Shopify

Get Started

Installer Clerk på Shopify ved at følge disse nemme trin

Få Clerk op at køre på din Shopify-butik på blot få trin. Denne guide guider dig igennem forbindelsen til din butik, installation af tracking og synkronisering af dine data.

Forbind din butik #

Det første trin i installationen af Clerk er at forbinde din butik med din Clerk-konto.

Videoen nedenfor viser dig, hvad du skal gøre, trin for trin. Brug resten af guiden som reference.

Efter at have fulgt disse enkle trin, vil du kunne se din Live Demo Store, som giver dig et personligt overblik over, hvordan Clerk vil fungere på din webshop.

Tilføj butik #

Log ind på my.clerk.io. Første gang du gør dette, vil du se “Add New Store”-siden.
Skriv Navn og Domæne på din webshop.
Vælg Shopify som Platform og vælg din Valuta.
Klik på Add Store.

Installer besøgende tracking #

I dit Shopify-backend, gå til Online Store > Themes.
Klik på ... > Edit code for det tema, du ønsker at ændre.
Åbn settings_schema.json og tilføj Clerk settings-snippet i bunden, lige før den sidste ].

,
{
  "name": "Clerk settings",
  "settings": [
    {
      "type": "header",
      "content": "Clerk"
    },
    {
      "type": "checkbox",
      "id": "enable_clerk",
      "label": "Enable Clerk",
      "default": true
    }
  ]
}

Klik på Save.
Under Snippets, klik på Add a new snippet med navnet clerk-tracking.liquid og klik på Done.
Indsæt dit Clerk besøgende tracking-snippet i den nye fil og klik Save. Udskift INSERT_PUBLIC_API_KEY med din Public Key fra my.clerk.io > Developers > API Keys.

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function (w, d) {
    var e = d.createElement('script'); e.type = 'text/javascript'; e.async = true;
    e.src = (d.location.protocol == 'https:' ? 'https' : 'http') + '://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);
  let publicKey = 'INSERT_PUBLIC_API_KEY';
  Clerk('config', {
    key: publicKey,
    formatters: {
      currency_converter: function (price) {
        var converted_price = (price * Shopify.currency.rate);
        return (converted_price).toString();
      }
    },
    globals: {
      currency_iso: "{{ cart.currency.iso_code }}",
      currency_symbol: "{{ cart.currency.symbol }}"
    }
  });

  {% if customer %}
    Clerk('call', 'log/email', { email: "{{ customer.email }}" });
  {% endif %}

  document.addEventListener('DOMContentLoaded', (e) => {
    (async function fetchVisitorId() {
      let visitorId = window.sessionStorage.getItem('visitor_id');
      try {
        if (!visitorId) {
          const response = await fetch(`https://api.clerk.io/v2/misc/visitor_id?key=${publicKey}&visitor=auto`);
          const data = await response.json();
          visitorId = data.visitor;
          window.sessionStorage.setItem('visitor_id', data.visitor);
        }
        Clerk('config', {
          visitor: visitorId,
        });
      } catch (error) {
        console.error('Error:', error);
      } finally {
        window.Shopify.analytics.publish('clerk_pixel_context', {
          localeApiKey: publicKey,
          visitor: visitorId,
        });
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Åbn theme.liquid og tilføj dette lige før </head>:

{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}

Installer ordre-tracking #

I Shopify, gå til Settings > Customer Events.
Klik på Add custom pixel, navngiv den Clerk.io, og klik derefter på Add pixel.
Indsæt din Clerk Sales Tracking-kode og klik Save.

analytics.subscribe("clerk_pixel_context", (event) => {
  browser.localStorage.setItem("clerkPixelContext", JSON.stringify(event.customData));
});

analytics.subscribe("checkout_completed", async (event) => {
  const pixelContextRaw = await browser.localStorage.getItem("clerkPixelContext");
  const pixelContext = await JSON.parse(pixelContextRaw);
  const checkout = event.data.checkout;
  fetch(`https://api.clerk.io/v2/log/sale/shopify`, {
    method: "POST",
    mode: "cors",
    body: JSON.stringify({
      sale: checkout.order.id,
      key: pixelContext.localeApiKey,
      visitor: pixelContext.visitor,
    }),
  });
});

Klik på Connect og bekræft.

Synkroniser data #

Datasykronisering forbinder din Shopify-butik til Clerk, hvilket giver Clerk adgang til dine produkter, ordrer, kunder og anden butiksinformation. Dette muliggør, at Clerk kan give personlige Recommendations og Search resultater baseret på dine faktiske butiksdata. Følg trinnene i Sync Data guide for at opsætte datasynkronisering.

Flere domæner/sprog #

Den nemmeste måde at implementere Clerk på tværs af flere domæner i standard-opsætninger er ved at oprette en separat Store for hvert domæne i my.clerk.io og synkronisere dem med hvert af dine Shopify sprogsdomæner.

Dette giver dig mulighed for at adskille produkter, salg, valutaer mv. for at holde styr på hvert domæne.

Butiksopsætning #

Start med at oprette din hovedbutik og følg Setup Guide for at forbinde din Store til Clerk. Vælg de Recommendations og/eller Search, som du ønsker skal vises på din webshop.
Når du har gennemført den indledende opsætning, klik på "+ Add new Store" - den sidste mulighed i dropdown-listen (findes typisk under dine eksisterende Stores og firmanavn):

På Add New Store-siden indtaster du dine domæneoplysninger.
Klik på Copy from existing Store? og vælg den Store, du vil kopiere elementer fra. Klik derefter på Add Store. Dette vil overføre Elements og Designs fra din hovedbutik.
Følg Setup Guide igen for at aktivere Clerk ved at klikke på Settings > Setup Guides for at Sync Data for det nye domæne.
Når Data Sync er færdig, vil dit domæne være klar og anvende samme opsætning som din hovedbutik.
Gentag denne proces for hvert af dine Shopify sprogsdomæner.
Til sidst, tilpas tracking scriptet i dit Shopify-tema, så det indeholder den korrekte public key for hvert domæne.

Her er et eksempel på tracking scriptet tilpasset til flere sprog:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<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);

  document.addEventListener("DOMContentLoaded", (e) => {
    let publicKey;
    switch (Shopify.locale) {
      case 'nl':
        publicKey = 'KEY';
        break;
      case 'en':
        publicKey = 'KEY';
        break;
      case 'es':
        publicKey = 'KEY';
        break;
      case 'it':
        publicKey = 'KEY';
        break;
      case 'fr':
        publicKey = 'KEY';
        break;
      case 'de':
        publicKey = 'KEY';
        break;
    }

    Clerk("config", {
      key: publicKey,
      formatters: {
        currency_converter: function (price) {
          var converted_price = (price * Shopify.currency.rate);
          return (converted_price).toString();
        }
      },
      globals: {
        currency_iso: "{{ cart.currency.iso_code }}",
        currency_symbol: "{{ cart.currency.symbol }}",
        clerkShopLocale: "{{ shop.locale }}",
        template_name: "{{ template.name }}",
        clerkCountry: "{{ routes.root_url }}"
      }
    });

    ; (async function fetchVisitorId() {
      let visitorId = window.sessionStorage.getItem('visitor_id');
      try {
        if (!visitorId) {
          const response = await fetch(`https://api.clerk.io/v2/misc/visitor_id?key=${publicKey}&visitor=auto`);
          const data = await response.json();
          visitorId = data.visitor;
          window.sessionStorage.setItem('visitor_id', data.visitor);
        }
        Clerk('config', {
          visitor: visitorId,
        });
      } catch (error) {
        console.error('Error:', error);
      } finally {
        window.Shopify.analytics.publish('clerk_pixel_context', {
          localeApiKey: publicKey,
          visitor: visitorId,
        });
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Husk også at oversætte Headlines i Element -> Edit -> Select Design til det rigtige sprog.

Flere lagerbeholdninger #

Hvis du har en enkelt Store med flere lagerbeholdninger og sprog, skal du oprette flere Clerk Apps for at sikre hurtig datasykronisering.

Dette gøres for at Stores ikke deler samme rate limit og gendannelsesrate i Shopify ADMIN API.

I Shopify backend, gå til Apps > Develop apps for din butik.
Klik på Create an app-knappen, og gentag disse steps, indtil du har et tilsvarende antal “Clerk.io”-apps til antallet af subdomæner for butikken.

Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.