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

Tilslutning af din butik #

Det første trin i at installere Clerk er at tilslutte din butik til din Clerk-konto.

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, vil du se siden Tilføj ny butik.
Skriv Navn og Domæne for din webshop.
Vælg Shopify som Platform, og vælg din Valuta.
Klik Tilføj butik.

Installer besøgende-sporing #

I din Shopify-backend, gå til Online Store > Themes.
Klik på ... > Edit code for det tema, du ønsker at redigere.
Åbn settings_schema.json og tilføj 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
    }
  ]
}

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

  // 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 -->

Åbn theme.liquid og tilføj dette lige før </head>:

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

Installer ordre-sporing #

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

Klik Connect og bekræft.

Synkroniser data #

Data-synkronisering forbinder din Shopify-butik til Clerk, så Clerk kan få adgang til dine produkter, ordrer, kunder og anden butikinformation. Dette gør Clerk i stand til at levere personlige anbefalinger og søgeresultater baseret på dine faktiske butikkedata. Følg trinnene i Sync Data guide for at opsætte data-synkroniseringen.

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 hver af dine Shopify sprogdomæner.

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

Butikopsætning #

Start med at oprette din hovedbutik og følg opsætningsguiden for at tilslutte din butik til Clerk. Vælg de Recommendations og/eller Search, du vil vise på din webshop.
Når du har fuldført den indledende opsætning, klik på "+ Add new Store" – den sidste mulighed i dropdown-listen (typisk fundet under dine eksisterende Butik(ker) og firmanavn):

På Tilføj ny butik-siden, indtast dine domænedetaljer.
Klik på Copy from existing Store? og vælg den butik, du ønsker at kopiere elementer fra. Klik derefter Add Store. Dette vil overføre Elements 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 for det nye domæne.
Når Data Sync er fuldført, vil dit domæne være klar og bruge samme opsætning som din hovedbutik.
Gentag denne proces for hver af dine Shopify sprogdomæner.
Til sidst, redigér sporingsscriptet i dit Shopify-tema, så det indeholder den korrekte public key for hvert domæne.

Her er et eksempel på sporingsscriptet 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 }}"
      }
    });

    // 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 %}
    });

    ; (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 at oversætte Headlines i Element -> Edit -> Select Design til det rigtige sprog også.

Flere lagre #

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

Dette gøres for at butikker ikke deler den samme rate limit og gendannelsesrate i Shopify ADMIN API.

I Shopify-backend, gå til Apps > Develop apps for din butik.
Klik på Create an app-knappen, og gentag disse trin, indtil du har et tilsvarende antal “Clerk.io”-apps til 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.