Shopify

Get Started

Installa Clerk.io su Shopify seguendo questi semplici passaggi

Configura Clerk.io 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.

Prima della configurazione #

Sia Shopify che Clerk.io hanno un ruolo nella configurazione. La parte Shopify fornisce l’accesso, l’app e il tracciamento sullo store. La parte Clerk.io collega il negozio, configura la sincronizzazione e avvia l’importazione dei dati.

Shopifymy.clerk.io
Crea e installa l’app, aggiungi il tracciamento e fornisci il dominio Shopify per la sincronizzazione.Aggiungi il Negozio, configura la sincronizzazione di Shopify, avvia la prima sincronizzazione e verifica i dati importati.

Dominio Shopify #

Il dominio Shopify è necessario quando si configura la sincronizzazione. Usa l’indirizzo .myshopify.com anche quando il sito utilizza un dominio pubblico personalizzato.

  1. In Shopify, vai su Settings > Domains.
  2. Copia l’attuale indirizzo .myshopify.com del negozio.

Shopify utilizza l’indirizzo myshopify.com per identificare il negozio. Leggi di più nella documentazione sul dominio di Shopify.

Collegare il tuo negozio #

Il primo passaggio per installare Clerk.io è collegare il tuo Store al tuo account Clerk.io.

Dopo aver seguito questi semplici passaggi, potrai visualizzare il tuo Live Demo Store, che ti offre una panoramica personale di come Clerk.io funzionerà sul tuo negozio.

Aggiungi negozio #

  1. Accedi su my.clerk.io. Al primo accesso, vedrai la pagina di aggiunta di un nuovo negozio.

  2. Inserisci il Nome e il Dominio pubblico del tuo negozio.

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

  4. Clicca su Aggiungi negozio.

Il dominio Shopify .myshopify.com verrà inserito successivamente in Data > Configuration quando la sincronizzazione viene configurata.

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 ].

,
{
  "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 poi su Done.

  3. Inserisci il tuo snippet di tracciamento dei visitatori Clerk nel nuovo file e clicca su Save. Sostituisci INSERT_PUBLIC_API_KEY con la tua Public Key presente su 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 template.name == 'cart' %}[{% for item in cart.items %}{{ item.product_id | json }}{% unless forloop.last %}, {% endunless %}{% endfor %}]{% elsif product %}{{ product.id | json }}{% 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('Errore:', 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 subito prima di </head>:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}

Installa il tracciamento degli ordini #

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

  2. Clicca su Add custom pixel, chiamalo Clerk.io, poi clicca su Add pixel.

  3. Imposta il requisito dei permessi del pixel su Not required. Questa è l’impostazione consigliata per la configurazione predefinita di Clerk.io perché Clerk.io utilizza il tracciamento senza cookie e non imposta cookie persistenti. Il pixel verrà quindi eseguito indipendentemente dal fatto che il visitatore accetti cookie di marketing, analitici o di preferenza. Leggi di più sulla soluzione cookieless di Clerk.io.

    Se hai configurato Clerk.io per utilizzare ID visitatore persistenti, imposta il requisito dei permessi su Analytics. È necessario solo se la tua configurazione utilizza davvero cookie persistenti; non è richiesto per la configurazione predefinita cookieless.

  4. Incolla il tuo codice di tracciamento delle 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.

Sincronizza i dati #

L’app e la sincronizzazione vengono configurati nella guida Sync Data. Segui prima i passaggi Shopify, poi completa i passaggi su my.clerk.io per collegare le credenziali, inserire il dominio .myshopify.com e avviare la prima sincronizzazione.

Mercati e località #

Se la tua configurazione Shopify usa più lingue, mercati o domini, configura tutto questo prima di andare live.

  1. Completa prima la configurazione di base seguendo 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 località di inventario se lo stock deve essere gestito per location.
  5. Avvia una nuova sincronizzazione e verifica gli URL dei prodotti per ogni lingua/dominio del negozio.

Shop Locale/Shopify Locale dovrebbe usare il codice lingua di Shopify standardizzato, ad esempio da per la Danimarca e sv per la Svezia.

Se non sei sicuro dei codici delle lingue usati dal tuo store, chiedi all’assistente Sidekick di Shopify di elencare le lingue configurate per il negozio.

Usa la guida di mapping dettagliata qui: Impostazioni integrazione Shopify.

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

Cambia chiavi API #

Se la tua configurazione usa Store Clerk.io separati per ogni mercato, ogni negozio avrà la sua chiave API. 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 qui sotto. Aggiungi una voce {% when %} per ciascuna lingua e imposta {% else %} sulla chiave del negozio di default:

<!-- 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 template.name == 'cart' %}[{% for item in cart.items %}{{ item.product_id | json }}{% unless forloop.last %}, {% endunless %}{% endfor %}]{% elsif product %}{{ product.id | json }}{% 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('Errore:', 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ù negozi Shopify (non solo più lingue nello stesso store), crea uno store Clerk.io per ogni negozio Shopify:

  1. In my.clerk.io, clicca + Aggiungi nuovo negozio.
  2. Copia i contenuti dal negozio principale durante la creazione.
  3. Collega e sincronizza ogni negozio Shopify separatamente.
  4. Usa la chiave pubblica corrispondente per ogni store nel tracciamento.

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