Get Started

Få Clerk op at køre på din Lightspeed-butik på blot få trin. Denne guide guider dig gennem tilslutning af din butik, installation af tracking scripts og synkronisering af dine data.

Tilslut din butik #

Efter at have fulgt disse enkle trin vil du kunne se din Live Demo, som giver dig et personligt overblik over, hvordan Clerk vil fungere på din webshop, inden resten af systemet sættes op.

Tilføj butik #

Når du er logget ind på my.clerk.io, er det første, du skal gøre, at tilføje din butik:

1. Skriv Navn og Domæne på din webshop.

2. Vælg Lightspeed som Platform og vælg din Valuta.

3. Klik på Add Store.

Installer tracking scripts #

Clerk tracking scriptet bruger Lightspeed Liquid-variabler til at læse butikdata som valuta og produktkontekst. Derfor skal scriptet placeres i en temafil, hvor Liquid behandles.

Besøgs-tracking #

1. Gå til Design > Theme Editor > Advanced > Edit Code i din Lightspeed-backend.

2. Åbn layouts > custom.rain.

3. Indsæt følgende script nederst i filen, og erstat INSERT_PUBLIC_API_KEY med din Public Key fra 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. Klik på Save.

Kurv- og takkesiderne i Lightspeed bruger en separat temafil kaldet fixed.rain. Denne fil arver ikke scripts fra custom.rain, så Clerk.js vil ikke blive indlæst på disse sider, medmindre scriptet også tilføjes der.

5. Åbn layouts > fixed.rain i samme Theme Editor.

6. Indsæt det samme script lige før den afsluttende </head>-tag.

7. Klik på Save.

Flere sprog #

Brug denne opsætning, når én Lightspeed eCom (C-Series) butik har sprog-stier som /nl/, /en/, /de/ og /fr/, og hvert sprog bruger en separat Clerk.io store.

Konfigurer public key i Rain, før Clerk.js indlæses. Lightspeed gengiver shop.language på serveren, så hver side får nøjagtigt én korrekt nøgle, inden browseren indlæser Clerk.js.

Dette er mere pålideligt end at skifte nøgler med client-side JavaScript. Et browser-side skift kan komme i konkurrence med Clerk.js indlæsning eller initialisere Clerk.io med den forkerte butik først.

Erstat den normale besøgs-tracking loader med følgende snippet i denne opsætning. Udskift alle pladsholdere med den tilsvarende butiks Public Key fra 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>

Den oprindelige hollandske nøgle er fallback. Skift den til Public Key til butikkens standardsprog, hvis hollandsk ikke er fallback-sprog. Brug eller vis aldrig en Private Key i Rain, sidekilde eller browser JavaScript.

shop.language er Lightspeeds aktive besøgs-sprogs-variabel. Læs Lightspeeds Rain variable reference og Clerk.io’s Clerk.js configuration reference for de underliggende variabler og konfiguration.

Tilføj snippet’et til både layouts > custom.rain og layouts > fixed.rain, umiddelbart før den afsluttende </head>-tag. fixed.rain dækker checkout- og andre begrænsede sider, og Clerk.js skal køre der for salgssporing på bekræftelsessider.

Hver side må kun have én Clerk.js loader og én Clerk.io konfiguration. Fjern eller erstat eventuelle statiske Clerk.io konfigurationer i fixed.rain, custom.rain eller Tracking/Web Extras. Ellers kan en statisk nøgle konfigurere Clerk.io før den sprog-specifikke nøgle.

Verificér hvert sprog #

For hvert konfigureret sprog:

1. Åbn en side på det sprog og inspicér den gengivne sidekilde. Bekræft, at Clerk('config')-nøglen er den forventede sprog-specifikke Public Key.

2. Bekræft, at de relevante Clerk.io Elements indlæser resultater fra det pågældende sprogs Clerk.io store.

3. Hvor salgssporing er relevant, placer en kontrolleret testordre og bekræft, at salget spores i den tilhørende sprog-butik.

Ordresporing #

1. Gå til Settings > Website-Settings > Web Extras i din Lightspeed backend.

2. Find Tracking-boksen og indsæt Clerk ordresporing-koden.

<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. Klik på Save.

Hvis ordrer stadig ikke spores #

Nogle Lightspeed-temaer indlæser ikke Clerk.js fra custom.rain og fixed.rain under checkout. Hvis Clerk.io allerede er tilføjet til begge filer og ordrer stadig ikke spores, tilføj også besøgs-tracking scriptet til Web Extras.

1. Gå til Settings > Website-Settings > Web Extras og find Tracking-boksen.

2. Indsæt besøgs-tracking scriptet umiddelbart over Clerk.io ordresporing-koden.

3. Klik på Save.

Brug kun denne placering, når standard tema-filopsætningen ikke sporer ordrer. Om det er nødvendigt afhænger af det aktive Lightspeed-tema.

Synkronisér data #

Synkronisering af data forbinder din Lightspeed-butik med Clerk, så Clerk kan få adgang til dine produkter, ordrer, kunder og andre butikoplysninger. Dette gør Clerk i stand til at levere personlige anbefalinger og søgeresultater baseret på dine aktuelle butikkdata. Følg trinene i Sync Data guide for at sætte datasynkronisering op.