Get Started

Configura Clerk nel tuo negozio Lightspeed in pochi passaggi. Questa guida ti accompagna nella connessione del tuo negozio, nell’installazione degli script di tracciamento e nella sincronizzazione dei tuoi dati.

Collegare il tuo negozio #

Dopo aver seguito questi semplici passaggi potrai vedere la tua Live Demo, che ti offre una panoramica personale di come Clerk funzionerà sul tuo webshop, prima di configurare il resto del sistema.

Aggiungi negozio #

Dopo aver effettuato l’accesso a my.clerk.io, la prima cosa da fare è aggiungere il tuo negozio:

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

2. Scegli Lightspeed come Piattaforma e scegli la tua Valuta.

3. Clicca su Add Store.

Installa gli script di tracciamento #

Lo script di tracciamento Clerk utilizza le variabili Lightspeed Liquid per leggere i dati del negozio come valuta e contesto dei prodotti. Per questo motivo, lo script deve essere inserito in un file del tema dove è elaborato Liquid.

Tracciamento dei visitatori #

1. Nel backend di Lightspeed, vai su Design > Theme Editor > Advanced > Edit Code.

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

3. Aggiungi il seguente script a clerk-tracking.rain e sostituisci INSERT_PUBLIC_API_KEY con la tua Public Key da my.clerk.io > Developers > API Keys.

<!-- Clerk.io Visitor Tracking (Lightspeed) -->
<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script'); e.type='text/javascript'; e.async=true;
    e.src='https://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);

  Clerk('config', {
    key: 'INSERT_PUBLIC_API_KEY',
    formatters: {
      convert_currency: function(price) {
        const rate_raw = '{{ 100 | money }}'.replace(/[^0-9.]/g, '');
        const rate = parseFloat(rate_raw) ? (parseFloat(rate_raw) / 100) : 1;
        return rate * price;
      }
    },
    globals: {
      currency_iso: '{{ shop.currency2.code }}',
      currency_symbol: '{{ shop.currency2.symbol }}'
    }
  });
  // Clerk.js Context
  Clerk('context', {
    product: {% if product.id %}'{{ product.id }}'{% else %}null{% endif %},
    category: {% if collection.category_id %}'{{ collection.category_id }}'{% else %}null{% endif %},
    page: {% if product.id %}null{% else %}{% if collection.category_id %}null{% else %}'{{ template }}'{% endif %}{% endif %}
  });

  {% if page.account.email %}
  Clerk('call', 'log/email', { email: '{{ page.account.email }}' });
  {% endif %}
</script>

4. Clicca su Save.

5. Apri layouts > custom.rain e aggiungi il seguente include dove deve essere caricato lo script di tracciamento dei visitatori, normalmente appena prima del tag di chiusura </head>. Clicca su Save.

{% include 'snippets/clerk-tracking.rain' %}

Le pagine del carrello e di ringraziamento in Lightspeed utilizzano un file tema separato chiamato fixed.rain. Questo file non eredita gli script da custom.rain, quindi Clerk.js non verrà caricato su queste pagine a meno che anche il frammento non venga incluso lì.

6. Apri layouts > fixed.rain nello stesso Theme Editor e aggiungi lo stesso include appena prima del tag di chiusura </head>.

{% include 'snippets/clerk-tracking.rain' %}

7. Clicca su Save.

Tracciamento ordini #

1. Nel backend di Lightspeed, vai su Settings > Website-Settings > Web Extras.

2. Trova il box Tracking e inserisci il codice di tracciamento ordini Clerk.

<span
  class="clerk"
  data-api="log/sale"
  data-sale="{{ order.information.number }}"
  data-email="{{ order.customer.email }}"
  data-customer="{{ order.customer.id }}"
  data-products='[{% for product in order.products %}{"id":{{ product.product_id }},"quantity":{{ product.quantity }},"price":{{ product.base_price_incl }}}{% if not loop.last %},{% endif %}{% endfor %}]'>
</span>

3. Clicca su Save.

Se gli ordini non vengono ancora tracciati #

Alcuni temi Lightspeed non caricano Clerk.js da custom.rain e fixed.rain durante il checkout. Se il frammento clerk-tracking.rain è incluso in entrambi i file e gli ordini non vengono comunque tracciati, aggiungi anche il contenuto del frammento di tracciamento visitatori in Web Extras.

1. Vai su Settings > Website-Settings > Web Extras e trova il box Tracking.

2. Incolla il contenuto di clerk-tracking.rain immediatamente sopra il codice di tracciamento ordini Clerk.io.

3. Clicca su Save.

Utilizza questa soluzione solo quando la configurazione standard del tema non traccia gli ordini. La necessità dipende dal tema Lightspeed attivo.

Più lingue #

Utilizza questa configurazione quando un negozio Lightspeed eCom (C-Series) ha percorsi linguistici come /nl/, /en/, /de/, e /fr/, e ciascuna lingua utilizza un negozio Clerk.io separato.

Configura la chiave pubblica in Rain, prima che venga caricato Clerk.js. Lightspeed visualizza shop.language sul server, quindi ogni pagina riceve esattamente la chiave corretta prima che il browser carichi Clerk.js.

Questo metodo è più affidabile rispetto allo switch delle chiavi tramite JavaScript lato client. Uno switch lato browser può entrare in conflitto con il caricamento di Clerk.js o inizializzare Clerk.io con il negozio sbagliato inizialmente.

Sostituisci il contenuto di clerk-tracking.rain con il seguente loader di tracciamento visitatori. Sostituisci ogni segnaposto con la Public Key corrispondente da my.clerk.io > Developers > API Keys.

{% set clerk_key = 'INSERT_NL_PUBLIC_API_KEY' %}

{% if shop.language == 'en' %}
  {% set clerk_key = 'INSERT_EN_PUBLIC_API_KEY' %}
{% elseif shop.language == 'de' %}
  {% set clerk_key = 'INSERT_DE_PUBLIC_API_KEY' %}
{% elseif shop.language == 'fr' %}
  {% set clerk_key = 'INSERT_FR_PUBLIC_API_KEY' %}
{% elseif shop.language == 'nl' %}
  {% set clerk_key = 'INSERT_NL_PUBLIC_API_KEY' %}
{% endif %}

<!-- Clerk.io Visitor Tracking (Lightspeed multilingual) -->
<script type="text/javascript">
  (function(w, d) {
    var e = d.createElement('script');
    e.type = 'text/javascript';
    e.async = true;
    e.src = 'https://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);

  Clerk('config', { key: '{{ clerk_key }}' });
</script>

La chiave iniziale olandese è quella di fallback. Cambiala con la Public Key della lingua predefinita del negozio se l’olandese non è la lingua di fallback. Non utilizzare né esporre una Private Key in Rain, nel codice sorgente della pagina o nel JavaScript del browser.

shop.language è la variabile Lightspeed attiva per la lingua del visitatore. Consulta la documentazione delle variabili Rain di Lightspeed e la documentazione di configurazione di Clerk.js per le variabili e la configurazione sottostanti.

Mantieni l’include sia in layouts > custom.rain sia in layouts > fixed.rain, subito prima del tag di chiusura </head>. fixed.rain copre il checkout e altre pagine riservate, e Clerk.js deve essere eseguito lì per il tracciamento delle vendite sulla pagina di conferma.

Ogni pagina deve avere un solo loader Clerk.js e una sola configurazione Clerk.io. Rimuovi o sostituisci qualsiasi configurazione statica Clerk.io in fixed.rain, custom.rain o Tracking/Web Extras. Altrimenti, una chiave statica può configurare Clerk.io prima della chiave specifica per lingua.

Verifica di ogni lingua #

Per ogni lingua configurata:

1. Apri una pagina in quella lingua e ispeziona il sorgente della pagina renderizzata. Conferma che la chiave Clerk('config') sia la Public Key esatta per quella lingua.

2. Conferma che gli Elementi Clerk.io rilevanti carichino risultati dal negozio Clerk.io di quella lingua.

3. Dove è rilevante il tracciamento delle vendite, effettua un ordine di test controllato e conferma che la vendita sia tracciata nel negozio corrispondente alla lingua.

Sincronizza dati #

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