Get Started

Avvia Clerk sul tuo store Lightspeed in pochi semplici passaggi. Questa guida ti accompagna nel collegare il tuo store, installare gli script di tracciamento e sincronizzare i tuoi dati.

Collegamento del tuo store #

Dopo aver seguito questi semplici passaggi potrai visualizzare 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 store #

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

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

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

3. Clicca su Add Store.

Installa gli script di tracciamento #

Lo script di tracciamento di Clerk utilizza le variabili Lightspeed Liquid per leggere i dati dello store come valuta e contesto del prodotto. Per questo motivo, lo script deve essere inserito in un file tema in cui viene processato 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, chiamalo clerk-tracking.rain e clicca su Done.

3. Aggiungi il seguente script in clerk-tracking.rain, sostituendo 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 nel punto in cui deve essere caricato lo script di tracciamento 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 quelle pagine a meno che lo snippet non venga incluso anche lì.

6. Apri layouts > fixed.rain nello stesso Theme Editor e aggiungi lo stesso include appena prima della chiusura del tag </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 di 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 lo snippet clerk-tracking.rain è incluso in entrambi i file e gli ordini non vengono comunque tracciati, aggiungi anche il contenuto dello snippet 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 di Clerk.io.

3. Clicca su Save.

Utilizza questa soluzione solo quando la configurazione standard dei file tema non traccia gli ordini. Se sia necessario o meno dipende dal tema Lightspeed attivo.

Più lingue #

Utilizza questa configurazione quando uno shop Lightspeed eCom (C-Series) ha path linguistici come /nl/, /en/, /de/ e /fr/, e ogni lingua utilizza uno store Clerk.io separato.

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

Questo metodo è più affidabile rispetto al cambio chiavi lato client con JavaScript. Uno switch sul browser può essere in corsa con il caricamento di Clerk.js o inizializzare Clerk.io con lo store sbagliato per primo.

Sostituisci il contenuto di clerk-tracking.rain con il seguente visitor tracking loader. Sostituisci ogni segnaposto con la Public Key corrispondente dal 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 olandese iniziale è il fallback. Cambiala con la Public Key della lingua di default dello shop se l’olandese non è la lingua di fallback. Non utilizzare o esporre una Private Key in Rain, nel sorgente pagina o nello JavaScript del browser.

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

Mantieni l’include sia in layouts > custom.rain sia in layouts > fixed.rain, immediatamente prima della chiusura del tag </head>. fixed.rain copre la fase di checkout e altre pagine riservate, e Clerk.js deve funzionare anche lì per il tracciamento delle vendite nella pagina di conferma.

Ogni pagina deve avere un solo loader Clerk.js e una sola configurazione Clerk.io. Rimuovi o sostituisci qualsiasi configurazione Clerk.io statica in fixed.rain, custom.rain o Tracking/Web Extras. In caso contrario, una key statica potrebbe configurare Clerk.io prima della key specifica per lingua.

Verifica ogni lingua #

Per ciascuna lingua configurata:

1. Apri una pagina in quella lingua e ispeziona il sorgente pagina renderizzato. Conferma che la key di Clerk('config') sia la Public Key della lingua prevista.

2. Verifica che i relativi Elementi Clerk.io carichino i risultati dal Clerk.io store di quella lingua.

3. Dove il tracciamento delle vendite è pertinente, effettua un ordine di prova controllato e verifica che la vendita sia tracciata nello store di lingua corrispondente.

Sincronizza i dati #

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