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 hjælper dig med at forbinde din butik, installere tracking og synkronisere dine data.

Forbind din butik #

Det første trin 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 for din webshop.

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

  4. Klik på Tilføj butik.

Installer besøgs-tracking #

  1. Gå til Online Store > Themes i din Shopify-backend.

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

  3. Åbn settings_schema.json og tilføj Clerk indstillingseksemplet 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 navngivet clerk-tracking.liquid, og klik på Done.

  3. Indsæt dit Clerk besøgs-tracking snippet i den nye fil og klik på 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);
  const 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 ordre tracking #

  1. I Shopify, gå til Settings > Customer Events.

  2. Klik på Add custom pixel, navngiv den Clerk.io, og klik derefter 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 til Clerk, hvilket gør det muligt for Clerk at få adgang til dine produkter, ordrer, kunder og anden butikkens information. Dette gør det muligt for Clerk at levere personlige anbefalinger og søgeresultater baseret på dine faktiske butikdata. Følg trinene i Sync Data guide for at opsætte datasynkronisering.

Markeder og lokaliteter #

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

  1. Afslut grundopsætningen 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 lagerstatus skal opdeles efter placering.
  5. Start en ny synkronisering og verificer produkt-URLs på hvert sprog-/domæne-storeside.

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

Hvis du er i tvivl om, hvilke locale koder din butik bruger, så spørg Shopifys Sidekick-assistent om at liste alle installerede locales for butikken.

Se den detaljerede mapping-guide her: Shopify integration settings.

Husk at oversætte Headlines i Element -> Edit -> Select Design så det matcher hvert sprog.

Skift API-nøgler #

Hvis din opsætning benytter separate Clerk.io stores per marked, har hver butik sin egen API-nøgle. Brug Shopifys request.locale.iso_code til automatisk at tildele den korrekte nøgle på hvert sideopkald.

Udskift indholdet af clerk-tracking.liquid med nedenstående komplette snippet. Tilføj et {% when %}-afsnit for hver locale og sæt {% else %} til din standardbutiks nøgle:

<!-- 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);
  {% case request.locale.iso_code %}
    {% when 'da' %}
      {% assign publicKey = 'YOUR_DANISH_KEY' %}
    {% when 'sv' %}
      {% assign publicKey = 'YOUR_SWEDISH_KEY' %}
    {% else %}
      {% assign publicKey = 'YOUR_DEFAULT_KEY' %}
  {% endcase %}
  const publicKey = '{{ publicKey }}';
  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 -->

Multi-store opsætning #

Hvis din opsætning spænder over flere Shopify-butikker (ikke kun flere sprog på én butik), opret én Clerk.io butik pr. Shopify-butik:

  1. I my.clerk.io, klik på + Add new Store.
  2. Kopiér indhold fra hovedbutikken under oprettelsen.
  3. Forbind og synkronisér hver Shopify-butik separat.
  4. Brug den tilhørende public key i tracking for hver butiksfront.

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