Shopify

Get Started

Installa Clerk su Shopify seguendo questi semplici passaggi

Configura Clerk e rendilo operativo sul tuo negozio Shopify in pochi passaggi. Questa guida ti accompagna nel collegare il tuo negozio, installare il tracciamento e sincronizzare i tuoi dati.

Collegare il tuo negozio #

Il primo passo per installare Clerk è collegare il tuo Store con il tuo account Clerk.

Dopo aver seguito questi semplici passaggi, sarai in grado di vedere il tuo Live Demo Store, che ti fornisce una panoramica personale di come Clerk funzionerà sul tuo webshop.

Aggiungi store #

  1. Accedi a my.clerk.io. La prima volta che accedi, vedrai la pagina Aggiungi Nuovo Store.

  2. Inserisci il Nome e il Dominio del tuo webshop.

  3. Scegli Shopify come Piattaforma e seleziona la tua Valuta.

  4. Clicca su Add Store.

Installa il tracciamento dei visitatori #

  1. Nel backend di Shopify, vai su Online Store > Themes.

  2. Clicca su ... > Edit code per il tema che desideri modificare.

  3. Apri settings_schema.json e aggiungi lo snippet delle impostazioni Clerk in fondo, appena prima dell’ultima ].

Settings schema file
,
{
  "name": "Clerk settings",
  "settings": [
    {
      "type": "header",
      "content": "Clerk"
    },
    {
      "type": "checkbox",
      "id": "enable_clerk",
      "label": "Enable Clerk",
      "default": true
    }
  ]
}

  1. Clicca su Save.

  2. Sotto Snippets, clicca su Add a new snippet chiamato clerk-tracking.liquid e clicca su Done.

  3. Inserisci il tuo snippet di tracciamento visitatori Clerk nel nuovo file e clicca su Save. Sostituisci INSERT_PUBLIC_API_KEY con la tua Public Key da my.clerk.io > Developers > API Keys.

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function (w, d) {
    var e = d.createElement('script'); e.type = 'text/javascript'; e.async = true;
    e.src = (d.location.protocol == 'https:' ? 'https' : 'http') + '://cdn.clerk.io/clerk.js';
    var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    w.__clerk_q = w.__clerk_q || []; w.Clerk = w.Clerk || function () { w.__clerk_q.push(arguments) };
  })(window, document);
  const publicKey = 'INSERT_PUBLIC_API_KEY';
  Clerk('config', {
    key: publicKey,
    formatters: {
      currency_converter: function (price) {
        var converted_price = (price * Shopify.currency.rate);
        return (converted_price).toString();
      }
    },
    globals: {
      currency_iso: "{{ cart.currency.iso_code }}",
      currency_symbol: "{{ cart.currency.symbol }}"
    }
  });

  // Clerk.js Context
  Clerk('context', {
    product: {% if product %}{{ product.id }}{% else %}null{% endif %},
    category: {% if collection %}{{ collection.id }}{% else %}null{% endif %},
    page: {% if product %}null
          {% elsif collection %}null
          {% elsif page %}{{ page.id }}
          {% elsif blog %}{{ blog.id }}
          {% elsif article %}{{ article.id }}
          {% elsif template.name == 'index' %}'homepage'
          {% else %}'{{ template.name }}'
          {% endif %}
  });

  {% if customer %}
    Clerk('call', 'log/email', { email: "{{ customer.email }}" });
  {% endif %}

  document.addEventListener('DOMContentLoaded', (e) => {
    (async function fetchVisitorId() {
      let visitorId = window.sessionStorage.getItem('visitor_id');
      try {
        if (!visitorId) {
          const response = await fetch(`https://api.clerk.io/v2/misc/visitor_id?key=${publicKey}&visitor=auto`);
          const data = await response.json();
          visitorId = data.visitor;
          window.sessionStorage.setItem('visitor_id', data.visitor);
        }
        Clerk('config', {
          visitor: visitorId,
        });
      } catch (error) {
        console.error('Error:', error);
      } finally {
        function publishClerkContext() {
          if (window.Shopify?.analytics?.publish) {
            window.Shopify.analytics.publish('clerk_pixel_context', {
              localeApiKey: publicKey,
              visitor: visitorId,
            });
          } else {
            setTimeout(publishClerkContext, 200);
          }
        }
        publishClerkContext();
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
  1. Apri theme.liquid e aggiungi questo codice prima di </head>:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}
Theme liquid tracking code

Installa il tracciamento degli ordini #

  1. In Shopify, vai su Settings > Customer Events.

  2. Clicca su Add custom pixel, assegnagli il nome Clerk.io, quindi clicca su Add pixel.

  3. Inserisci il tuo codice di tracciamento vendite Clerk e clicca su Save.

analytics.subscribe("clerk_pixel_context", (event) => {
  browser.localStorage.setItem("clerkPixelContext", JSON.stringify(event.customData));
});

analytics.subscribe("checkout_completed", async (event) => {
  const pixelContextRaw = await browser.localStorage.getItem("clerkPixelContext");
  const pixelContext = await JSON.parse(pixelContextRaw);
  const checkout = event.data.checkout;
  fetch(`https://api.clerk.io/v2/log/sale/shopify`, {
    method: "POST",
    mode: "cors",
    body: JSON.stringify({
      sale: checkout.order.id,
      key: pixelContext.localeApiKey,
      visitor: pixelContext.visitor,
    }),
  });
});
  1. Clicca su Connect e conferma.
Insert pixel tracking

Sincronizza i dati #

La sincronizzazione dei dati collega il tuo negozio Shopify a Clerk, consentendo a Clerk di accedere ai tuoi prodotti, ordini, clienti e altre informazioni del negozio. Questo permette a Clerk di offrire raccomandazioni e risultati di ricerca personalizzati basati sui dati reali del tuo negozio. Segui i passaggi nella Guida alla sincronizzazione dei dati per configurare la sincronizzazione dei dati.

Mercati e localizzazioni #

Se la tua configurazione Shopify utilizza più lingue, mercati o domini, configura queste impostazioni prima di andare online.

  1. Completa prima la configurazione di base presente in questa guida.
  2. Apri my.clerk.io > Data > Configuration.
  3. Configura le impostazioni specifiche per mercato (Shopify Market, Shopify Locale, Prefix URLs with Locale, Force Relative URLs).
  4. Aggiungi sedi di inventario se la disponibilità deve essere limitata per posizione.
  5. Avvia una nuova sincronizzazione e verifica gli URL dei prodotti per ciascuna lingua/dominio dello store.

Shop Locale/Shopify Locale deve utilizzare il codice standard della lingua locale Shopify, ad esempio da per la Danimarca e sv per la Svezia.

Se non sei sicuro di quali codici localizzazione usi il tuo negozio, chiedi all’assistente Sidekick di Shopify di elencare le localizzazioni configurate per il negozio.

Segui la guida dettagliata alla mappatura qui: Shopify integration settings.

Ricordati di tradurre le Headlines in Element -> Edit -> Select Design per ogni lingua.

Cambia le chiavi API #

Se la tua configurazione usa store Clerk.io separati per ogni mercato, ogni store ha la propria API key. Usa request.locale.iso_code di Shopify per assegnare automaticamente la chiave corretta a ogni caricamento pagina.

Sostituisci il contenuto di clerk-tracking.liquid con lo snippet completo seguente. Aggiungi una voce {% when %} per ogni localizzazione e imposta {% else %} con la chiave del tuo store predefinito:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function (w, d) {
    var e = d.createElement('script'); e.type = 'text/javascript'; e.async = true;
    e.src = (d.location.protocol == 'https:' ? 'https' : 'http') + '://cdn.clerk.io/clerk.js';
    var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    w.__clerk_q = w.__clerk_q || []; w.Clerk = w.Clerk || function () { w.__clerk_q.push(arguments) };
  })(window, document);
  {% case request.locale.iso_code %}
    {% when 'da' %}
      {% assign publicKey = 'YOUR_DANISH_KEY' %}
    {% when 'sv' %}
      {% assign publicKey = 'YOUR_SWEDISH_KEY' %}
    {% else %}
      {% assign publicKey = 'YOUR_DEFAULT_KEY' %}
  {% endcase %}
  const publicKey = '{{ publicKey }}';
  Clerk('config', {
    key: publicKey,
    formatters: {
      currency_converter: function (price) {
        var converted_price = (price * Shopify.currency.rate);
        return (converted_price).toString();
      }
    },
    globals: {
      currency_iso: "{{ cart.currency.iso_code }}",
      currency_symbol: "{{ cart.currency.symbol }}"
    }
  });

  // Clerk.js Context
  Clerk('context', {
    product: {% if product %}{{ product.id }}{% else %}null{% endif %},
    category: {% if collection %}{{ collection.id }}{% else %}null{% endif %},
    page: {% if product %}null
          {% elsif collection %}null
          {% elsif page %}{{ page.id }}
          {% elsif blog %}{{ blog.id }}
          {% elsif article %}{{ article.id }}
          {% elsif template.name == 'index' %}'homepage'
          {% else %}'{{ template.name }}'
          {% endif %}
  });

  {% if customer %}
    Clerk('call', 'log/email', { email: "{{ customer.email }}" });
  {% endif %}

  document.addEventListener('DOMContentLoaded', (e) => {
    (async function fetchVisitorId() {
      let visitorId = window.sessionStorage.getItem('visitor_id');
      try {
        if (!visitorId) {
          const response = await fetch(`https://api.clerk.io/v2/misc/visitor_id?key=${publicKey}&visitor=auto`);
          const data = await response.json();
          visitorId = data.visitor;
          window.sessionStorage.setItem('visitor_id', data.visitor);
        }
        Clerk('config', {
          visitor: visitorId,
        });
      } catch (error) {
        console.error('Error:', error);
      } finally {
        function publishClerkContext() {
          if (window.Shopify?.analytics?.publish) {
            window.Shopify.analytics.publish('clerk_pixel_context', {
              localeApiKey: publicKey,
              visitor: visitorId,
            });
          } else {
            setTimeout(publishClerkContext, 200);
          }
        }
        publishClerkContext();
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Configurazione multi-store #

Se la tua configurazione coinvolge più store Shopify (non solo più lingue all’interno di uno stesso store), crea uno store Clerk.io per ogni store Shopify:

  1. Su my.clerk.io, clicca su + Add new Store.
  2. Copia i contenuti dallo store principale durante la creazione.
  3. Collega e sincronizza ciascun store Shopify separatamente.
  4. Usa la Public Key corrispondente per ciascun storefront nel tracciamento.

Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.