Shopify

Get Started

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

Få Clerk.io op at køre på din Shopify-butik på blot et par trin. Denne guide viser dig, hvordan du forbinder din butik, installerer tracking og synkroniserer dine data.

Før opsætning #

Shopify og Clerk.io har hver sin rolle i opsætningen. Shopify-siden giver adgang, appen og tracking på butikken. Clerk.io-siden forbinder butikken, konfigurerer synkroniseringen og starter import af data.

Shopifymy.clerk.io
Opret og installer appen, tilføj tracking, og angiv Shopify-domænet til synkronisering.Tilføj butikken, konfigurer Shopify-synkroniseringen, start den første synkronisering og verificér de importerede data.

Shopify-domæne #

Shopify-domænet er nødvendigt, når synkroniseringen skal konfigureres. Brug .myshopify.com-adressen, selvom webshoppen bruger et tilpasset offentligt domæne.

  1. Gå i Shopify til Settings > Domains.
  2. Kopiér butikkens nuværende .myshopify.com-adresse.

Shopify bruger myshopify.com-adressen til at identificere butikken. Læs mere i Shopifys domæne-dokumentation.

Forbind din butik #

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

Når du har fulgt disse enkle trin, kan du se din Live Demo Store, som giver dig et personligt overblik over, hvordan Clerk.io kommer til at virke 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. Skriv Navn og offentligt Domæne for din webshop.

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

  4. Klik på Add Store.

Shopifys .myshopify.com-domæne angives senere i Data > Configuration, når synkroniseringen konfigureres.

Installer besøgs-tracking #

  1. I dit Shopify-backend, gå til Online Store > Themes.

  2. Klik på ... > Edit code for det tema, du ønsker at ændre.

  3. Åbn settings_schema.json og tilføj Clerk-indstillinger kodeblokken nederst, lige inden 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 Done.

  3. Indsæt din Clerk-besøgs-tracking kodeblok i denne 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);
  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, giv den navnet Clerk.io, og klik derefter på Add pixel.

  3. Sæt pixelens tilladelseskrav til Not required. Dette er den anbefalede indstilling til standard Clerk.io-opsætningen, fordi Clerk.io bruger cookieless tracking og ikke sætter vedvarende cookies. Pixel vil derfor køre uanset om besøgende accepterer marketing-, analyse- eller præference-cookies. Læs mere om Clerk.io’s cookieløse løsning.

    Hvis du har tilpasset Clerk.io til at bruge vedvarende besøgs-ID’er, sæt tilladelseskravet til Analytics i stedet. Dette er kun nødvendigt, hvis din tilpassede opsætning faktisk bruger vedvarende cookies; det er ikke nødvendigt for den standard cookieløse opsætning.

  4. 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 #

Appen og synkronisering konfigureres i Sync Data guiden. Følg først Shopify-trinnene, og gennemfør derefter my.clerk.io-trinnene for at forbinde legitimationsoplysninger, angive .myshopify.com domænet og starte den første synkronisering.

Markeder og sprogversioner #

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

  1. Gennemfør først denne guides grundopsætning.
  2. Åbn my.clerk.io > Data > Configuration.
  3. Konfigurer markedsspecifikke indstillinger (Shopify Market, Shopify Locale, Prefix URLs with Locale, Force Relative URLs).
  4. Tilføj lagerlokationer hvis lager skal opdeles efter lokation.
  5. Start en ny synkronisering og verificér produkt-URL’er på hvert butikssprog/domæne.

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

Hvis du ikke ved, hvilke lokalekoder din butik bruger, kan du bede Shopifys Sidekick-assistent om at liste de konfigurerede sprog for butikken.

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

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

Skift API nøgler #

Hvis din opsætning bruger separate Clerk.io-butikker pr. marked, har hver butik sin egen API nøgle. Brug Shopifys request.locale.iso_code til automatisk at tildele den korrekte nøgle på alle sider.

Erstat indholdet af clerk-tracking.liquid med hele kodeblokken nedenfor. Tilføj en {% when %}-blok for hvert sprog, og brug {% 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 sprogvarianter i én butik), opret en 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 synkroniser hver Shopify-butik separat.
  4. Brug den matchende public key til hvert butikssite i tracking.

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