Shopify

Get Started

Installa Clerk su Shopify seguendo questi semplici passaggi

Configura Clerk e avvialo nel tuo store Shopify in pochi passaggi. Questa guida ti accompagna nella connessione del tuo store, nell’installazione del tracking e nella sincronizzazione dei tuoi dati.

Collegare il tuo store #

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

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

Aggiungi store #

  1. Accedi a my.clerk.io. La prima volta che lo farai, 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 Aggiungi Store.

Installa il tracking dei visitatori #

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

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

  3. Apri settings_schema.json e aggiungi lo snippet delle impostazioni Clerk in fondo al file, subito 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 tracking dei 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);
  let 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 subito prima di </head>:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}
Theme liquid tracking code

Installa il tracking 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. Incolla il tuo codice di Sales Tracking 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 store Shopify a Clerk, permettendo a Clerk di accedere a prodotti, ordini, clienti e altre informazioni del tuo store. Questo consente a Clerk di fornire raccomandazioni personalizzate e risultati Search basati sui dati effettivi del tuo negozio. Segui i passaggi nella guida Sync Data per configurare la sincronizzazione dei dati.

Mercati e lingue #

Se la tua configurazione Shopify utilizza più lingue, mercati o domini, configura questi aspetti prima di andare live.

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

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

Se non sei sicuro di quali codici locale utilizzi il tuo store, chiedi all’assistente Sidekick di Shopify di elencare le lingue configurate per il negozio.

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

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

Configurazione multi-store #

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

  1. In my.clerk.io, clicca su + Add new Store.
  2. Copia i contenuti dallo store principale durante la creazione.
  3. Collega e sincronizza ogni store Shopify separatamente.
  4. Usa la relativa public key per ogni vetrina nel tracking.

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