Shopify

Get Started

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

Forbind din butik #

Det første skridt 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 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.io vil fungere på din webshop.

1. 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 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ætningsguiden, klik på Synkroniser dine data

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

  3. I Shopify backend, gå til Apps > App- og salgskanalindstillinger > Udvikle 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 Admin API-integration. Klik på Konfigurer

  8. Under Admin API-adgangsområder, vælg Læseadgang (starter med “read_”) for følgende:

  • Kunder
  • Lager
  • Online butikssider
  • Ordrer
  • Priseregler
  • Produkter
  • Publikationer
  • Butikslokationer
  • Shopify-markeder
  • Butikindhold
  • Oversættelser

  1. Klik på Gem

  2. Klik på Installer app og derefter Installer i pop-up-vinduet, der vises

  3. Klik på fanen API-legitimationsoplysninger

3. Synkroniser din butik #

  1. Nu skal du kopiere og indsætte alle nødvendige oplysninger i felterne i my.clerk.io:
  • Shopify Domæne (yourdomain.myshopify.com)
  • API-nøgle
  • Admin API-adgangstoken
  • API Hemmelig nøgle
  1. Klik på Start synkronisering. Vent på, at synkroniseringen er færdig. Måske tage en kop kaffe, hvis du har et stort produktkatalog ;)
  2. Det er det!

4. Tilføj Clerk.io til dit tema #

  1. Installer Visitor Tracking (clerk.js)
  • Log ind på Shopify backend, og gå til Online butik → Temaer.
  • Til højre for det tema, du ønsker at installere Clerk på, klik på "…" → Rediger kode.
  • Åbn filen settings_schema.json. Indsæt Clerk-indstillingssnippet nederst i filen, lige før den sidste ].
,  
{
"name": "Clerk settings",
"settings": [
    {
    "type": "header",
    "content": "Clerk"
    },
    {
    "type": "checkbox",
    "id": "enable_clerk",
    "label": "Aktiver Clerk",
    "default": true
    }
]
}
settins_schema.json screenshot
  • Tryk på Gem
  • I venstre bjælke, under “Snippets”, klik på Tilføj et nyt snippet kaldet clerk-tracking, og klik på Færdig.
  • Indsæt nedenstående Clerk.io tracking-script i filen, og klik på Gem. Husk at erstatte PUBLIC_KEY med din Clerk Stores offentlige API-nøgle.
<!-- Start af 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('Fejl:', error);
          } finally {
            window.Shopify.analytics.publish('clerk_pixel_context', {
              localeApiKey: publicKey,
              visitor: visitorId,
            });
          }
        })();
      });
</script>
<!-- Slut på Clerk.io E-commerce Personalisation tool - www.clerk.io -->
  • Åbn filen theme.liquid. Indsæt nedenstående reference til tracking-scriptet i dokumentets header, lige før </head> tag.
{% if settings.enable_clerk %}
    {% render 'clerk-tracking' %}
{% endif %}
theme.liquid screenshot

5. Installer ordretracking #

  • I Shopify backend, gå til Indstillinger → Kunde begivenheder.
  • Klik på Tilføj brugerdefineret pixel, navngiv den Clerk.io og klik på Tilføj pixel.
  • Indsæt nedenstående Salg Tracking Kode i kodefeltet. Klik på Gem.
  • Efter gemning, klik på forbind og bekræft forbind.
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

Fuldt installations eksempel #

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

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

Flere domæner/sprog #

Den nemmeste måde at implementere Clerk.io 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 hver af dine Shopify sprogdomæner.

Dette giver dig mulighed for at adskille produkter, salg, valutaer osv. for at holde styr på hvert domæne.

  1. Start med at oprette din hovedbutik og følg opsætningsguiden for at forbinde din butik til Clerk.io. Vælg de anbefalinger og/eller søgninger, du ønsker at vise på din webshop.

  2. Når du har gennemført den indledende opsætning, klik på "+ Tilføj ny butik" - den sidste mulighed i dropdown-listen (typisk fundet under dine eksisterende butik(ker) og firmanavn):

3. På siden Tilføj ny butik, indtast dine domænedetaljer.

4. Klik på Kopier fra eksisterende butik? og vælg den butik, du ønsker at kopiere indhold fra. Klik derefter på Tilføj butik. Dette vil overføre Indholdet og Designene fra din hovedbutik.

5. Følg opsætningsguiden igen for at aktivere Clerk.io ved at klikke på Indstillinger -> Opsætningsguider for at Synkronisere data for det nye domæne.

6. Når Data Synkronisering er færdig, vil dit domæne være klar og bruge den samme opsætning som din hovedbutik.

7. Gentag denne proces for hver af dine Shopify sprogdomæner.

8. Endelig, modificer tracking-scriptet i dit Shopify-tema for at inkludere den korrekte offentlige nøgle for hvert domæne.

Her er et eksempel på tracking-scriptet, der er ændret for at inkludere flere sprog:

<!-- Start af 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('Fejl:', error);
      } finally {
        window.Shopify.analytics.publish('clerk_pixel_context', {
          localeApiKey: publicKey,
          visitor: visitorId,
        });
      }
    })();
  });
</script>
<!-- Slut på Clerk.io E-commerce Personalisation tool - www.clerk.io -->
Husk at oversætte Overskrifter i Indhold -> Rediger -> Vælg design til det rigtige sprog også.

Flere lagre #

Hvis du har en enkelt butik med flere lagre og sprog, skal du oprette flere Clerk.io-apps for at sikre hurtig datasykronisering. Dette gøres, så butikker ikke deler den samme rategrænse og gendannelseshastighed i Shopify ADMIN API.

  • I Shopify backend, gå til Apps > Udvikle apps for din butik.
  • Klik på knappen Opret en app, og gentag disse trin, indtil du har et tilsvarende antal “Clerk.io” apps som antallet af subdomæner for butikken.

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