Shopify

Get Started

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

Få Clerk.io sat op 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.

Før opsætning #

Shopify og Clerk.io har hver deres del af opsætningen. Shopify-delen giver adgang, appen og sporing af butikken. Clerk.io-delen forbinder butikken, konfigurerer synkroniseringen og starter importen af data.

Shopifymy.clerk.io
Find Shopify-domænet og samarbejds-koden, godkend samarbejdsadgang, opret og installer appen, og tilføj tracking.Tilføj butikken, konfigurer Shopify-synkronisering, start første synkronisering og verificer de importerede data.

Shopify adgang #

Hvis en tredjepart som Clerk.io sætter integrationen op eller fejlsøger, har de brug for butikkens nuværende myshopify.com-domæne og samarbejdsadgang for at logge ind i Shopify backend.

Find domæne #

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

Brug .myshopify.com-adressen til Shopify-integrationsindstillinger, selv når webshoppen bruger et tilpasset offentligt domæne. Shopify bruger myshopify.com-adressen til at identificere butikken og til admin-adgang. Læs mere i Shopifys domænedokumentation.

Find kode #

  1. I Shopify, gå til Settings > Users.
  2. Hvis butikken er del af en organisation, åbn Users. Ellers åbn Users & permissions.
  3. Klik på Security.
  4. Klik på den firecifrede samarbejdskode for at kopiere den.

Tredjepart bruger denne kode ved indsendelse af samarbejdsanmodning. Godkend anmodningen under Settings > Users → Requests. Se Shopifys samarbejdskonto-dokumentation for de aktuelle trin.

Opsætningsansvar #

Shopify-buttikens team eller en tredjepart med de nødvendige Shopify-rettigheder kan fuldføre Shopify-trinnene. Samarbejdsadgang inkluderer ikke automatisk tilladelse til at udvikle apps. Hvis tredjeparten ikke kan oprette eller installere appen, skal Shopify-buttikens team fuldføre de trin og sikkert dele appens Client ID og Client Secret med personen, der konfigurerer synkroniseringen i my.clerk.io.

Forbind din butik #

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

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

Tilføj butik #

  1. Log ind på my.clerk.io. Første gang du gør dette, ser du siden Add New Store.

  2. Indtast Navn og offentligt Domæne for din webshop.

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

  4. Klik på Add Store.

Shopify .myshopify.com-domænet indtastes senere under Data > Configuration når synkroniseringen konfigureres.

Installer besøgs-tracking #

  1. I din 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-indstillingerne nederst, 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 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);
  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. Sæt tilladelseskravet for pixlen til Not required. Dette er den anbefalede indstilling for standard Clerk.io-opsætning, fordi Clerk.io bruger cookieløs tracking og ikke placerer vedvarende cookies. Pixlen vil derfor køre, uanset om 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 vedvarende besøgs-ID’er, skal du i stedet sætte tilladelseskravet til Analytics. Dette er kun nødvendigt, hvis din tilpasning faktisk bruger vedvarende cookies; det er ikke påkrævet for den standard cookieless opsætning.

  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.
Insert pixel tracking

Synkroniser data #

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

Markeder og sprog #

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

  1. Gennemfør først basisopsætningen i denne guide.
  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 lagerplaceringer hvis lager skal opdeles efter lokation.
  5. Start en ny synkronisering og verificer produkt-URLs på hvert sprog/domæne i butikken.

Shop Locale/Shopify Locale skal bruge den standardiserede Shopify-sprog-locale kode, for eksempel 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 de konfigurerede locales 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 ved hver sideindlæsning.

Erstat indholdet af clerk-tracking.liquid med nedenstående snippet. Tilføj en {% when %} for hver locale og sæt {% else %} til din standard-butik-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 dækker flere Shopify-butikker (ikke kun flere sprog i én butik), skal du oprette é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 individuelt.
  4. Brug den matchende public key for hver butik i tracking.

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