Get Started

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

Connessione del tuo store #

Dopo aver seguito questi semplici passaggi potrai vedere la tua Live Demo, che ti offrirà 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. Scegli Lightspeed come Platform e seleziona la tua Currency.

3. Clicca su Add Store.

Installa gli script di tracciamento #

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

Tracciamento visitatori #

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

2. Apri layouts > custom.rain.

3. Incolla il seguente script in fondo al file e sostituisci INSERT_PUBLIC_API_KEY con la tua Public Key che trovi in 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.

Le pagine carrello e di ringraziamento su 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 script non sia aggiunto anche lì.

5. Apri layouts > fixed.rain nello stesso Theme Editor.

6. Incolla lo stesso script immediatamente prima del tag di chiusura </head>.

7. Clicca su Save.

Lingue multiple #

Usa questa configurazione quando un negozio Lightspeed eCom (C-Series) presenta percorsi lingua come /nl/, /en/, /de/, e /fr/, e ogni lingua utilizza uno store Clerk.io separato.

Configura la chiave pubblica in Rain, prima che venga caricato Clerk.js. Lightspeed genera shop.language lato server, così ogni pagina riceve la chiave corretta prima che il browser carichi Clerk.js.

Questo approccio è più affidabile dello switch lato client in JavaScript, che potrebbe gareggiare con il caricamento di Clerk.js o inizializzare Clerk.io con lo store sbagliato.

Sostituisci il loader standard del tracciamento visitatori con il seguente snippet in questa configurazione. Sostituisci ogni segnaposto con la Public Key corrispondente dallo store Clerk.io in 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 predefinita del negozio se l’olandese non è la lingua di fallback. Non utilizzare mai o divulgare una Private Key in Rain, nel sorgente della pagina o nel JavaScript lato browser.

shop.language è la variabile Lightspeed della lingua attiva del visitatore. Consulta la Rain variable reference di Lightspeed e la Clerk.js configuration reference di Clerk.io per conoscere le variabili e le configurazioni sottostanti.

Aggiungi lo snippet sia a layouts > custom.rain che a layouts > fixed.rain, immediatamente prima del tag di chiusura </head>. fixed.rain copre le pagine di 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 di Clerk.js e una sola configurazione Clerk.io. Rimuovi o sostituisci ogni configurazione statica Clerk.io in fixed.rain, custom.rain o Tracking/Web Extras. Diversamente, una chiave statica potrebbe configurare Clerk.io prima della chiave specifica per lingua.

Verifica ogni lingua #

Per ogni lingua configurata:

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

2. Conferma che gli Elementi Clerk.io pertinenti carichino i risultati dallo store Clerk.io di quella lingua.

3. Dove il tracciamento delle vendite è rilevante, effettua un ordine di test controllato e conferma che la vendita venga registrata nello store della lingua corrispondente.

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 comunque tracciati #

Alcuni temi Lightspeed non caricano Clerk.js da custom.rain e fixed.rain durante il checkout. Se Clerk.io è già stato aggiunto a entrambi i file e gli ordini non vengono comunque tracciati, aggiungi anche lo script di tracciamento visitatori nei Web Extras.

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

2. Incolla lo script di tracciamento visitatori immediatamente sopra il codice di tracciamento ordini Clerk.io.

3. Clicca su Save.

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

Sincronizza dati #

La sincronizzazione dei dati collega il tuo store Lightspeed a Clerk, permettendo a Clerk di accedere ai tuoi prodotti, ordini, clienti e altre informazioni del negozio. Questo consente a Clerk di offrire raccomandazioni personalizzate e risultati di ricerca basati sui dati reali del tuo negozio. Segui i passaggi nella guida alla sincronizzazione dei dati per impostare la sincronizzazione dei dati.