Shopify

Get Started

Tilslutning af din butik #

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

Videoen nedenfor viser dig, hvad du skal gøre, trin for trin. Brug resten af vejledningen som reference :)

Når du har fulgt disse enkle trin, vil du kunne se din Live-demo-butik,, som giver dig et personligt overblik over, hvordan Clerk.io vil fungere på din webshop. Kontakt din kontaktperson på Clerk.io for at se live-demoen.

1. Tilføj butik #

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

  2. Skriv Navn og Domæne for din webshop

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

  4. Klik på Tilføj butik.

2. Konfigurer Shopify-forbindelsen #

  1. Fra hovedmenuen i opsætningsvejledningen skal du klikke på Synkroniser dine data

  2. Denne opsætningsguide viser, hvad du skal gøre i din Shopify-backend. Her er en oversigt over trinnene:

  3. I Shopify-backend skal du gå til Apps > Indstillinger for app og salgskanal > Udvikl apps

  4. Klik på Opret en app i øverste højre hjørne

  5. Giv appen et navn som “Clerk.io”, og vælg dig selv som App-udvikler.

  6. Klik på Opret app

  7. Klik på Konfiguration og find Integration af administrator-API. Klik på Konfigurer

  8. Under Admin API-adgangsområder skal du vælge Læs adgang (starter med “read_”) for følgende:

  • Kunder
  • Lagerbeholdning
  • Sider i onlinebutikken
  • Ordrer
  • Prisregler
  • Produkter
  • Publikationer
  • Butikslokaler
  • Shopify-markeder
  • Butiksindhold
  • Oversættelser

  1. Klik på Gemme.

  2. Klik på Installer app og derefter på Installer i den popup, der vises.

  3. Klik på fanen API-legitimationsoplysninger.

3. Synkroniser din butik #

  1. Kopier og indsæt nu alle de nødvendige oplysninger i felterne i my.clerk.io:
  • Shopify-domæne (ditdomæne.myshopify.com)
  • API-nøgle
  • Admin API-adgangstoken
  • Hemmelig API-nøgle
  1. Klik på Start synkronisering. Vent på, at synkroniseringen er færdig. Tag evt. en kop kaffe, hvis du har et stort produktkatalog ;)
  2. Og så er det klaret!

4. Tilføjelse af Clerk.io til dit tema #

  1. Installer besøgssporing (clerk.js)
  • Log ind på Shopify-backend, og gå til Online Store → Themes.
  • Til højre for det tema, du ønsker at installere Clerk, skal du klikke på "…" → Rediger kode.
  • Åbn filen settings_schema.json. Indsæt Clerk settings snippet i bunden af filen, lige før det sidste ].
,  
{
"name": "Clerk settings",
"settings": [
   {
   "type": "header",
   "content": "Clerk"
   },
   {
   "type": "checkbox",
   "id": "enable_clerk",
   "label": "Enable Clerk",
   "default": true
   }
]
}
settins_schema.json screenshot
  • Tryk på Gem
  • I venstre bjælke under “Snippets” skal du klikke på Add a new snippet called clerk-tracking, og klikke på Done.
  • Indsæt nedenstående Clerk.io sporingsscript i filen, og klik på Gem. Husk at erstatte PUBLIC_KEY med din Clerk butiks offentlige API-nøgle.
Clerk.io sporingsscript
<!-- 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 = 'PUBLIC_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 filen theme.liquid. Indsæt nedenstående reference til sporingsscriptet i dokumentets overskrift, lige før tagget </head>.
{% if settings.enable_clerk %}
    {% render 'clerk-tracking' %}
{% endif %}
theme.liquid screenshot

5. Installer ordresporing #

  • I Shopify-backend skal du gå til Indstillinger → Kundebegivenheder.
  • Klik på Tilføj brugerdefineret pixelnavngiv den Clerk.io, og klik på Tilføj pixel.
  • Indsæt nedenstående Salgssporingskode i kodefeltet. Klik på Gem.
  • Når du har gemt, skal du klikke på forbind og bekræft Opret forbindelse.
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,
        }),
    });
});
script for pixel tracking screenshot

Fuld installation Eksempel #

Shopify har opdateret den måde, private apps tilføjes på. 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 sætte Clerk.io op på en Shopify-webshop.

Flere domæner/sprog #

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

På den måde kan du adskille produkter, salg, valutaer osv. for at holde styr på hvert domæne.

  1. Start med at oprette din hovedbutik, og følg opsætningsvejledningen for at forbinde din butik til Clerk.io, og vælg de anbefalinger og/eller søgeresultater, du vil have vist på din webshop.

  2. Når du er færdig med den indledende opsætning, skal du gå tilbage til startsiden på my.clerk.io (ved at klikke på Clerk.io -logoet på Øverste venstre hjørne af sidemenuen) og derefter klikke på "+ Tilføj ny butik" som den sidste mulighed på rullelisten (generelt under de(n) eksisterende butik(ker) og dit firmanavn):

3. På Tilføj ny butik-side skal du klikke på Avanceret for at se alle indstillinger.

4. Udfyld oplysningerne om dit domæne, og vælg din hovedbutik i menuen

Kopier indhold fra eksisterende butik dropdown, og klik derefter på Tilføj butik.

Dette vil overføre Indhold og Design fra din hovedbutik.

5. Nu kan du følge opsætningsvejledningen igen for at aktivere Clerk.io ved at klikke på Kom godt i gang, til Synkroniser data for det nye domæne.

6. Dette giver dig mulighed for at synkronisere dit domæne med din butik på my.clerk.io via

opsætningsguiden.

7. Når Synkronisering af data er færdig, er dit domæne klar og bruger det samme

opsætning som din hovedbutik.

8. Gentag denne proces for alle dine Shopify-sprogdomæner,

Husk også at oversætte overskrifter på Indhold-> Rediger -> Vælg design til det rigtige sprog.

Hvis du har en enkelt butik med flere varelager og sprog, skal du oprette flere Clerk .io Apps for at sikre hurtig datasynkronisering. Dette gøres, så en række butikker ikke deler den samme rate limit og gendannelseshastighed i Shopify ADMIN API.

  • I Shopify-backend skal du gå til Apps → Udvikl apps til din butik.
  • Klik på knappen Opret en app knappen.
  • Giv appen et navn som f.eks. "Clerk.io" sammen med et andet navn, f.eks. "Clerk.io (EN)" og vælg App-udvikler. Gentag dette, indtil du har tilsvarende "Clerk.io" apps til antallet af subdomæner for shoppen.
  • Klik på Opret app.
  • Klik på Konfiguration og find Admin API Integration. Klik på Konfigurer.
  • Under Admin API-adgangsområderskal du vælge Læseadgang (starter med "read_") for følgende:
    • Produkter
    • Ordrer
    • Kunder
    • Lagerbeholdning
    • Online butikssider
    • Butiksindhold
    • Oversættelser
    • Markeder
    • Lokaliteter
    • Prisregler
    • Publikationer
  • Klik på Gem øverst på skærmen.
  • Klik på Installer app og derefter Installer i pop op-vinduet.
  • Klik på API-legitimationsoplysninger fanen.
  • Kopier nu dine butikker Shopify-domæne(r) og de private apps API-nøgle, adgangstoken og hemmelig nøgle i felterne under Indstillinger for datasynkronisering på my.clerk.io.
  • Vælg en standard billedstørrelse og klik på Start Sync. Vent på, at synkroniseringen er færdig. Tag måske en kop kaffe, hvis du har en stor produktkatolog.

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