Shopify

Get Started

Installa Clerk su Shopify seguendo questi semplici passaggi

Configura Clerk e mettilo in funzione sul tuo store Shopify in pochi passaggi. Questa guida ti accompagna attraverso la connessione del tuo store, l’installazione del tracciamento e la sincronizzazione dei tuoi dati.

Connessione del tuo store #

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

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

Aggiungi store #

Accedi a my.clerk.io. La prima volta che lo fai, vedrai la pagina Add New Store.
Inserisci il Name e il Domain del tuo webshop.
Scegli Shopify come Platform e scegli la tua Currency.
Clicca su Add Store.

Installa il tracciamento dei visitatori #

Nel backend di Shopify, vai su Online Store > Themes.
Clicca su ... > Edit code per il tema che desideri modificare.
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
    }
  ]
}

Clicca su Save.
Sotto Snippets, clicca su Add a new snippet denominato clerk-tracking.liquid e clicca su Done.
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 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 -->

Apri theme.liquid e aggiungi questo appena prima di </head>:

{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}

Installa il tracciamento ordini #

In Shopify, vai su Settings > Customer Events.
Clicca su Add custom pixel, assegnagli il nome Clerk.io, poi clicca su Add pixel.
Incolla 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,
    }),
  });
});

Clicca su Connect e conferma.

Sincronizza i dati #

La sincronizzazione dei dati collega il tuo store Shopify a Clerk, consentendo a Clerk di accedere a prodotti, ordini, clienti e altre informazioni del negozio. Questo permette a Clerk di fornire Recommendations personalizzate e risultati Search basati sui dati effettivi del tuo store. 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 questo prima di andare online.

Completa prima la configurazione base di questa guida.
Apri my.clerk.io > Data > Configuration.
Configura le impostazioni specifiche per mercato (Shopify Market, Shopify Locale, Prefix URLs with Locale, Force Relative URLs).
Aggiungi le ubicazioni dell’inventario se lo stock deve essere limitato per posizione.
Avvia una nuova sincronizzazione e verifica gli URL dei prodotti su ogni lingua/dominio dello shop.

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

Se non sei sicuro di quali codici locale siano utilizzati dal tuo store, chiedi all’assistente Sidekick di Shopify di elencare i codici locali configurati per il negozio.

Usa la guida dettagliata alla mappatura qui: Impostazioni integrazione Shopify.

Ricorda di tradurre le 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 store avrà la propria 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 ogni locale e imposta {% else %} sulla 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 %}
  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 comprende più store Shopify (non solo più lingue all’interno di uno store), crea uno store Clerk.io per ogni store Shopify:

In my.clerk.io, clicca su + Add new Store.
Copia il contenuto dallo store principale durante la creazione.
Collega e sincronizza ogni store Shopify separatamente.
Usa la public key corrispondente per ogni vetrina nello snippet di tracciamento.

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