Get Started

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

Tilslutning af din butik #

Efter at have fulgt disse simple trin, vil du kunne se din Live Demo, som giver dig et personligt overblik over, hvordan Clerk vil fungere på din webshop, før resten af systemet opsættes.

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 for din webshop.

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

3. Klik på Add Store.

Installer sporingsscripts #

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

Besøgs-sporing #

1. I din Lightspeed-backend, gå til Design > Theme Editor > Advanced > Edit Code.

2. Under Snippets, klik på Add a new snippet, navngiv den clerk-tracking.rain, og klik på Done.

3. Tilføj følgende script til clerk-tracking.rain, og udskift 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.

5. Åbn layouts > custom.rain og tilføj følgende include, hvor besøgs-sporingsscriptet skal indlæses, normalt lige før den afsluttende </head>-tag. Klik på Save.

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

Kurv- og takkesiderne i Lightspeed bruger en separat temafil kaldet fixed.rain. Denne fil arver ikke scripts fra custom.rain, så Clerk.js bliver ikke indlæst på disse sider, medmindre snippen også inkluderes der.

6. Åbn layouts > fixed.rain i samme Theme Editor og tilføj den samme include lige før den afsluttende </head>-tag.

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

7. Klik på Save.

Ordresporing #

1. I din Lightspeed-backend, gå til Settings > Website-Settings > Web Extras.

2. Find Tracking-boksen og indsæt Clerk-ordre sporingskoden.

<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-tracking.rain snippen er inkluderet i begge filer, og ordrer stadig ikke spores, skal du også tilføje indholdet af besøgs-sporingssnippen til Web Extras.

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

2. Indsæt indholdet af clerk-tracking.rain umiddelbart over Clerk.io-ordre sporingskoden.

3. Klik på Save.

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

Flere sprog #

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

Konfigurer public key i Rain, før Clerk.js indlæses. Lightspeed gengiver shop.language på serveren, så hver side får præcis den rigtige nøgle, før browseren indlæser Clerk.js.

Dette er mere pålideligt end at skifte nøgler med klient-side JavaScript. En browser-baseret switch kan komme i karambolage med Clerk.js-indlæsning eller initialisere Clerk.io med den forkerte butik først.

Udskift indholdet af clerk-tracking.rain med følgende besøgs-sporingsloader. Udskift hver placeholder 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 indledende hollandske nøgle er fallback. Skift den til Public Key for butikkens standardsprog, hvis hollandsk ikke er standardsprog. Brug eller vis aldrig en Private Key i Rain, sidekilde eller browser-JavaScript.

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

Behold include i både layouts > custom.rain og layouts > fixed.rain, umiddelbart før den afsluttende </head>-tag. fixed.rain dækker checkout og andre lukkede sider, og Clerk.js skal køre der for salgssporing på bekræftelsessiden.

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

Verificér hvert sprog #

For hvert konfigureret sprog:

1. Åbn en side på det pågældende sprog, og inspicér den gengivne sidekilde. Bekræft at Clerk('config')-nøglen er det 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-butik.

3. Hvor salgssporing er relevant, læg en kontrolleret testordre og bekræft at salget spores i det tilsvarende sprog-butik.

Synkronisér data #

Synkronisering af data forbinder din Lightspeed-butik til Clerk, så Clerk kan tilgå dine produkter, ordrer, kunder og anden butikinformation. Dette gør det muligt for Clerk at give personlige anbefalinger og søgeresultater baseret på din faktiske butiksdata. Følg trinnene i Sync Data guide for at opsætte datasynkronisering.