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 et par trin. Denne guide guider dig igennem tilslutning af din butik, installation af tracking og synkronisering af dine data.

Tilslut din butik #

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

Når du har 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 #

  1. Log ind på my.clerk.io. Første gang du gør dette, vil du se siden Tilføj Ny Butik.

  2. Indtast Navn og Domæne på din webshop.

  3. Vælg Shopify som Platform og vælg din Valuta.

  4. Klik på Add Store.

Installer besøgstracking #

  1. Gå til din Shopify-backend, og gå til Online Store > Themes.

  2. Klik på ... > Edit code for det tema, du vil ændre.

  3. Åbn settings_schema.json og tilføj Clerk-indstillingssnippen i bunden, lige før den sidste ].

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

  1. Klik på Save.

  2. Under Snippets, klik på Add a new snippet kaldet clerk-tracking.liquid og klik på Done.

  3. Indsæt din Clerk besøgstracking-snippet i den nye fil og klik på Save. Erstat 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 }}"
    }
  });

  // Clerk.js Context
  Clerk('context', {
    product: {% if product %}{{ product.id }}{% else %}null{% endif %},
    category: {% if collection %}{{ collection.id }}{% else %}null{% endif %},
    page: {% if product %}null
          {% elsif collection %}null
          {% elsif page %}{{ page.id }}
          {% elsif blog %}{{ blog.id }}
          {% elsif article %}{{ article.id }}
          {% elsif template.name == 'index' %}'homepage'
          {% else %}'{{ template.name }}'
          {% endif %}
  });

  {% 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 {
        function publishClerkContext() {
          if (window.Shopify?.analytics?.publish) {
            window.Shopify.analytics.publish('clerk_pixel_context', {
              localeApiKey: publicKey,
              visitor: visitorId,
            });
          } else {
            setTimeout(publishClerkContext, 200);
          }
        }
        publishClerkContext();
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
  1. Åbn theme.liquid og tilføj dette lige før </head>:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}
Theme liquid tracking code

Installer ordretracking #

  1. Gå i Shopify til Settings > Customer Events.

  2. Klik på Add custom pixel, navngiv den Clerk.io, og klik så på Add pixel.

  3. Indsæt din Clerk Sales Tracking kode og klik på 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,
    }),
  });
});
  1. Klik på Connect og bekræft.
Insert pixel tracking

Synkroniser data #

Synkronisering af data forbinder din Shopify-butik med Clerk, hvilket giver Clerk adgang til dine produkter, ordrer, kunder og andre butiksoplysninger. Dette gør Clerk i stand til at give personlige anbefalinger og søgeresultater baseret på dine faktiske butikdata. Følg trinnene i Sync Data guide for at opsætte datasynkronisering.

Markeder og sprog #

Hvis din Shopify-opsætning bruger flere sprog, markeder eller domæner, skal du konfigurere dette, før du går live.

  1. Gennemfør den grundlæggende opsætning i denne guide først.
  2. Åbn my.clerk.io > Data > Configuration.
  3. Konfigurer markeds-specifikke indstillinger (Shopify Market, Shopify Locale, Prefix URLs with Locale, Force Relative URLs).
  4. Tilføj lagerlokationer, hvis beholdningen skal opdeles efter lokation.
  5. Start en ny synkronisering og verificer produkt-URL’er på hvert butiks-sprog/domæne.

Shop Locale/Shopify Locale skal bruge den standardiserede Shopify-lokationskode, for eksempel da for Danmark og sv for Sverige.

Hvis du er i tvivl om, hvilke sprogkoder din butik bruger, kan du bede Shopifys Sidekick-assistent om at vise de lokaler, der er konfigureret for butikken.

Brug den detaljerede mapping guide her: Shopify integration settings.

Husk at oversætte Headlines i Element -> Edit -> Select Design til at matche hvert sprog.

Multi-store opsætning #

Hvis din opsætning spænder over flere Shopify-butikker (ikke kun flere sprog i én butik), skal du oprette én Clerk.io butik per Shopify-butik:

  1. I my.clerk.io, klik på + Add new Store.
  2. Kopiér indhold fra hovedbutikken under oprettelsen.
  3. Forbind og synkroniser hver Shopify-butik separat.
  4. Brug den matchende public key per storefront i tracking.

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