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

Før opsætning #

Shopify og Clerk.io har hver deres rolle i opsætningen. Shopify-siden giver adgang, appen og sporing af butik. Clerk.io-siden forbinder butikken, konfigurerer synkronisering og starter importen af data.

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

Shopify-domæne #

Shopify-domænet er nødvendigt ved konfiguration af synkronisering. Brug .myshopify.com-adressen, selvom webshoppen benytter et offentligt tilpasset domæne.

  1. Gå i Shopify til Settings > Domains.
  2. Kopiér butikkens aktuelle .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 Store med din Clerk.io-konto.

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

Tilføj butik #

  1. Log ind på my.clerk.io. Første gang du gør dette, ser du 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å Tilføj butik.

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

Installer besøgs-tracking #

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

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

  3. Åbn settings_schema.json og indsæt Clerk-indstillingssnippen nederst, lige før den sidste ].

,
{
  "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 med navnet clerk-tracking.liquid og klik Done.

  3. Indsæt din Clerk besøgs-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);
  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 template.name == 'cart' %}[{% for item in cart.items %}{{ item.product_id | json }}{% unless forloop.last %}, {% endunless %}{% endfor %}]{% elsif product %}{{ product.id | json }}{% 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 %}

Installer ordre-tracking #

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

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

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

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

  4. 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,
    }),
  });
});
  1. Klik på Connect og bekræft.

Synkronisér data #

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

Markeder og sprog #

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

  1. Gennemfør grundopsætningen i denne guide først.
  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 beholdning skal opdeles efter lokation.
  5. Start en ny synkronisering og verificér produkt-URLs på hver webshop-sprog/domæne.

Shop Locale/Shopify Locale skal bruge Shopifys standardiserede sproglokale-code, f.eks. da for Danmark og sv for Sverige.

Hvis du er usikker på hvilke lokale-koder din butik bruger, kan du bede Shopifys Sidekick-assistent om at liste de konfigurerede sprog til butikken.

Brug 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 bruger separate Clerk.io-butikker pr. marked, har hver butik sin egen API-nøgle. Brug Shopify’s request.locale.iso_code til automatisk at tildele den korrekte nøgle ved hver sideindlæsning.

Udskift indholdet af clerk-tracking.liquid med nedenstående komplette snippet. Tilføj en {% when %}-linje 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 template.name == 'cart' %}[{% for item in cart.items %}{{ item.product_id | json }}{% unless forloop.last %}, {% endunless %}{% endfor %}]{% elsif product %}{{ product.id | json }}{% 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 går på tværs af flere Shopify-butikker (ikke kun flere sprog i én butik), skal du oprette én Clerk.io Store pr. Shopify-butik:

  1. I my.clerk.io, klik på + Tilføj ny butik.
  2. Kopiér indholdet fra hovedbutikken under oprettelsen.
  3. Forbind og synkronisér hver Shopify-butik separat.
  4. Brug den tilsvarende public key pr. butik i tracking.

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