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 viser dig, hvordan du forbinder din butik, installerer tracking og synkroniserer dine data.

Forbind din butik #

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

Videoen nedenfor viser dig, hvad du skal gøre, trin-for-trin. Brug resten af guiden som reference.

Efter at have 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 #

Log ind på my.clerk.io. Første gang du gør dette, kommer du til siden Tilføj ny butik.
Skriv Navn og Domæne på din webshop.
Vælg Shopify som Platform og vælg din Valuta.
Klik på Add Store.

Installer besøgs-tracking #

Gå til Online Store > Themes i din Shopify backend.
Klik på ... > Edit code for det tema, du vil ændre.
Åbn settings_schema.json og tilføj Clerk-indstillingerne nederst i filen, lige før den sidste ].

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

Klik på Save.
Under Snippets, klik på Add a new snippet og navngiv den clerk-tracking, og klik derefter på Done.
Indsæt din Clerk besøgs-tracking kode 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);
  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 }}"
    }
  });

  {% 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 {
        window.Shopify.analytics.publish('clerk_pixel_context', {
          localeApiKey: publicKey,
          visitor: visitorId,
        });
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Åbn theme.liquid og indsæt dette lige før </head>:

{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}

Installer ordre-tracking #

Gå i Shopify til Settings > Customer Events.
Klik på Add custom pixel, navngiv den Clerk.io, og klik derefter på Add pixel.
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,
    }),
  });
});

Klik på Connect og bekræft.

Synkroniser data #

I Shopify, gå til Apps > App and sales channel settings og klik på Develop apps.

Klik på Create app, navngiv den “Clerk.io”, vælg App-udvikler, og klik derefter på Create app igen.
Klik på Configuration → Admin API integration → Configure.

Under Admin API access scopes, giv læseadgang (scopes starter med read_) til følgende:
- Customers
- Inventory
- Locales
- Markets
- Online Store Pages
- Orders
- Products
- Store Content
- Translations

Klik på Save, derefter Install App → Install.
Åbn API Credentials og kopier dit Shopify-domæne og API Key, Access Token og Secret Key til appen.

Gå til my.clerk.io > Data > Configuration og indsæt disse værdier i formularen. Vælg en standard billedstørrelse, hvis du bliver spurgt, og klik derefter på Start Sync.

Fuldt installations-eksempel #

Shopify har opdateret måden, hvorpå Private Apps tilføjes. Vi arbejder på en ny version af videoen. Indtil da kan du se, hvordan du tilføjer en Privat App her.

I denne video kan du få et komplet overblik over, hvad der skal til for at opsætte Clerk på en Shopify-webshop.

Flere domæner/sprog #

Den nemmeste måde at implementere Clerk på tværs af flere domæner i standardopsætninger er ved at oprette en separat butik for hvert domæne i my.clerk.io og synkronisere dem med hvert af dine Shopify-sprogdomæner.

Dette gør det muligt for dig at adskille produkter, salg, valutaer osv. for at holde styr på hvert domæne.

Opsætning af butikker #

Start med at oprette din hovedbutik og følg opsætningsguiden for at forbinde din butik til Clerk. Vælg de Recommendations og/eller Search, du vil vise på din webshop.
Når du har gennemført den indledende opsætning, skal du klikke på "+ Add new Store" - den sidste mulighed i drop-down-listen (typisk placeret under dine eksisterende butikker og firmanavn):

På Add New Store-siden indtaster du dine domænedetaljer.
Klik på Copy from existing Store? og vælg den butik, du vil kopiere indhold fra. Klik derefter på Add Store. Dette overfører Content og Designs fra din hovedbutik.
Følg opsætningsguiden igen for at aktivere Clerk ved at klikke på Settings > Setup Guides for at Sync Data til det nye domæne.
Når Data Sync er fuldført, er dit domæne klar og benytter samme opsætning som din hovedbutik.
Gentag denne proces for hvert af dine Shopify sprogdomæner.
Til sidst skal du tilpasse tracking scriptet i dit Shopify-tema, så det indeholder den korrekte public key for hvert domæne.

Her er et eksempel på tracking scriptet tilpasset til flere sprog:

<!-- 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 = "https://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);

  document.addEventListener("DOMContentLoaded", (e) => {
    let publicKey;
    switch (Shopify.locale) {
      case 'nl':
        publicKey = 'KEY';
        break;
      case 'en':
        publicKey = 'KEY';
        break;
      case 'es':
        publicKey = 'KEY';
        break;
      case 'it':
        publicKey = 'KEY';
        break;
      case 'fr':
        publicKey = 'KEY';
        break;
      case 'de':
        publicKey = 'KEY';
        break;
    }

    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 }}",
        clerkShopLocale: "{{ shop.locale }}",
        template_name: "{{ template.name }}",
        clerkCountry: "{{ routes.root_url }}"
      }
    });

    ; (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 {
        window.Shopify.analytics.publish('clerk_pixel_context', {
          localeApiKey: publicKey,
          visitor: visitorId,
        });
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Husk også at oversætte Headlines i Content -> Edit -> Select Design til det korrekte sprog.

Flere lagre #

Hvis du har én butik med flere lagre og sprog, skal du oprette flere Clerk Apps for at sikre hurtig datasynkronisering.

Dette gøres, så butikker ikke deler samme rate limit og restore rate i Shopify ADMIN API.

Gå i Shopify backend til Apps > Develop apps for din butik.
Klik på Create an app-knappen, og gentag disse trin, indtil du har tilsvarende “Clerk.io” apps til antallet af subdomæner for shoppen.

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