Get Started

Få Clerk op at køre på din Lightspeed-butik på bare et par trin. Denne guide guider dig igennem at forbinde din butik, installere sporingsscripts og synkronisere dine data.

Forbind din butik #

Når du har 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 navnet (Name) og domænet (Domain) på din webshop.

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

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 bliver behandlet.

Besøger-sporing #

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

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

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

5. Åbn layouts > custom.rain og tilføj følgende include, hvor besøger-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, der hedder fixed.rain. Denne fil arver ikke scripts fra custom.rain, så Clerk.js indlæses ikke på disse sider, medmindre snippet’et også inkluderes der.

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

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

7. Klik på Save.

Ordre-sporing #

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

2. Find boksen Tracking 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-snippet’et er inkluderet i begge filer, og ordrer stadig ikke spores, så tilføj indholdet af besøger-sporingssnippet’et til Web Extras også.

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

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

3. Klik på Save.

Brug kun denne placering, når den standard temafil-opsætning 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 så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 modtager præcis én korrekt nøgle, før browseren indlæser Clerk.js.

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

Erstat indholdet af clerk-tracking.rain med følgende besøgersporingsloader. Udskift hver placeholder med den matchende 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 for butikkens standardsprog, hvis hollandsk ikke er fallback-sproget. Brug eller vis aldrig en Private Key i Rain, sidekilde eller browser JavaScript.

shop.language er Lightspeeds aktive besøgs-sprogsvariabel. 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 beskyttede sider, og Clerk.js skal køre der for at spore salg på bekræftelsessiden.

Hver side må kun have én Clerk.js loader og én Clerk.io konfiguration. Fjern eller udskift 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.

Verificer 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 sprog’s Clerk.io butik.

3. Hvor salgs-tracking er relevant, gennemfør en kontrolleret testordre og bekræft at salget spores i den tilsvarende sprog-butik.

Synkronisér data #

Synkronisering af data forbinder din Lightspeed-butik til Clerk, så Clerk kan få adgang til dine produkter, ordrer, kunder og andre butikinformationer. Dette gør det muligt for Clerk at levere personlige anbefalinger og søgeresultater baseret på dine faktiske butikdata. Følg trinnene i Sync Data guiden for at opsætte data-synkroniseringen.