Get Started

Bringen Sie Clerk.io in nur wenigen Schritten auf Ihrem Shopify-Shop zum Laufen. Diese Anleitung führt Sie durch die Verbindung Ihres Shops, die Installation des Trackings und die Synchronisierung Ihrer Daten.

Vor der Einrichtung #

Shopify und Clerk.io haben jeweils einen Teil in der Einrichtung. Die Shopify-Seite stellt den Zugang, die App und das Storefront-Tracking bereit. Die Clerk.io-Seite verbindet den Shop, konfiguriert die Synchronisierung und startet den Datenimport.

Shopify-Zugriff #

Wenn eine Drittpartei wie Clerk.io die Integration einrichtet oder Fehler behebt, benötigt sie die aktuelle myshopify.com-Domain des Shops und Kollaborationszugriff, um sich in das Shopify-Backend einzuloggen.

Domain finden #

1. Gehen Sie in Shopify zu Einstellungen > Domains.
2. Kopieren Sie die aktuelle .myshopify.com-Adresse des Shops.

Verwenden Sie die .myshopify.com-Adresse für die Shopify-Integrationseinstellungen, auch wenn der Webshop eine benutzerdefinierte öffentliche Domain verwendet. Shopify verwendet die myshopify.com-Adresse zur Identifikation des Shops und für den Admin-Zugriff. Lesen Sie mehr in der Shopify-Domaindokumentation.

Code finden #

1. Gehen Sie in Shopify zu Einstellungen > Benutzer.
2. Wenn der Shop Teil einer Organisation ist, öffnen Sie Benutzer. Andernfalls öffnen Sie Benutzer & Berechtigungen.
3. Klicken Sie auf Sicherheit.
4. Klicken Sie auf den vierstelligen Kollaborationscode, um ihn zu kopieren.

Die Drittpartei verwendet diesen Code beim Einreichen einer Kollaborationsanfrage. Genehmigen Sie die Anfrage unter Einstellungen > Benutzer → Anfragen. Weitere Informationen finden Sie in der Shopify-Dokumentation zu Kollaborationskonten.

Eigentümer der Einrichtung #

Das Team des Shopify-Shops oder eine Drittpartei mit den erforderlichen Shopify-Berechtigungen kann die Schritte auf der Shopify-Seite abschließen. Kollaborationszugriff beinhaltet nicht automatisch die Berechtigung zur App-Entwicklung. Wenn die Drittpartei die App nicht erstellen oder installieren kann, führt das Team des Shopify-Shops diese Schritte aus und teilt die Client-ID und das Client Secret der App sicher mit der Person, die die Synchronisation in my.clerk.io konfiguriert.

Ihren Shop verbinden #

Der erste Schritt bei der Installation von Clerk.io ist die Verbindung Ihres Stores mit Ihrem Clerk.io-Konto.

Nach diesen einfachen Schritten können Sie Ihren Live-Demo-Store sehen, der Ihnen einen persönlichen Überblick darüber gibt, wie Clerk.io in Ihrem Webshop funktioniert.

Shop hinzufügen #

1. Melden Sie sich bei my.clerk.io an. Beim ersten Login sehen Sie die Seite “Neuen Shop hinzufügen”.

2. Geben Sie den Namen und die öffentliche Domain Ihres Webshops ein.

3. Wählen Sie Shopify als Plattform und wählen Sie Ihre Währung.

4. Klicken Sie auf Shop hinzufügen.

Die Shopify .myshopify.com-Domain wird später unter Daten > Konfiguration eingetragen, wenn die Synchronisation konfiguriert wird.

Besucher-Tracking installieren #

1. Gehen Sie in Ihrem Shopify-Backend zu Onlineshop > Themes.

2. Klicken Sie bei dem Theme, das Sie bearbeiten möchten, auf ... > Code bearbeiten.

3. Öffnen Sie settings_schema.json und fügen Sie den Clerk-Settings-Snippet unten, direkt vor der letzten ], an.

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

4. Klicken Sie auf Speichern.

5. Unter Snippets klicken Sie auf Neues Snippet hinzufügen mit dem Namen clerk-tracking.liquid und dann auf Fertig.

6. Fügen Sie Ihr Clerk Besucher-Tracking-Snippet in die neue Datei ein und klicken Sie auf Speichern. Ersetzen Sie INSERT_PUBLIC_API_KEY durch Ihren Public Key aus 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 -->

7. Öffnen Sie theme.liquid und fügen Sie dies direkt vor </head> ein:

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

Bestell-Tracking installieren #

1. Gehen Sie in Shopify zu Einstellungen > Kundenereignisse.

2. Klicken Sie auf Individuellen Pixel hinzufügen, benennen Sie ihn Clerk.io, und klicken Sie dann auf Pixel hinzufügen.

3. Setzen Sie die Anforderungsberechtigung für den Pixel auf Nicht erforderlich. Dies ist die empfohlene Einstellung für die Standard-Clerk.io-Installation, da Clerk.io cookieloses Tracking verwendet und keine persistente Cookies setzt. Der Pixel läuft also unabhängig davon, ob der Besucher Marketing-, Analyse- oder Präferenz-Cookies akzeptiert. Weitere Informationen zur Clerk.io cookieless-Lösung.

   Wenn Sie Clerk.io benutzerdefiniert für persistente Besucher-IDs konfiguriert haben, wählen Sie als Anforderung stattdessen Analyse. Dies ist nur erforderlich, wenn Ihr Setup tatsächlich persistente Cookies verwendet; für das Standard-cookieless-Setup ist dies nicht erforderlich.

4. Fügen Sie Ihren Clerk Sales Tracking-Code ein und klicken Sie auf Speichern.

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,
    }),
  });
});

5. Klicken Sie auf Verbinden und bestätigen Sie.

Daten synchronisieren #

Die App und die Synchronisation werden im Leitfaden zur Datensynchronisation konfiguriert. Folgen Sie zuerst den Shopify-Schritten, schließen Sie dann die my.clerk.io-Schritte ab, um die Zugangsdaten zu verbinden, die .myshopify.com-Domain einzugeben und die erste Synchronisation zu starten.

Märkte und Sprachen #

Wenn Ihr Shopify-Setup mehrere Sprachen, Märkte oder Domains verwendet, konfigurieren Sie dies, bevor Sie live gehen.

1. Schließen Sie zuerst die Grundkonfiguration in dieser Anleitung ab.
2. Öffnen Sie my.clerk.io > Daten > Konfiguration.
3. Konfigurieren Sie marktspezifische Einstellungen (Shopify Market, Shopify Locale, Prefix URLs with Locale, Force Relative URLs).
4. Fügen Sie Bestandsstandorte hinzu, wenn der Bestand nach Standort gefiltert werden soll.
5. Starten Sie eine neue Synchronisation und überprüfen Sie die Produkt-URLs in jeder Schaufenstersprache/-domain.

Shop Locale/Shopify Locale sollte den standardisierten Shopify-Sprach-Locale-Code verwenden, z. B. da für Dänemark und sv für Schweden.

Wenn Sie unsicher sind, welche Locale-Codes Ihr Shop verwendet, fragen Sie den Shopify Sidekick-Assistenten, um die im Shop konfigurierten Locales aufzulisten.

Detaillierte Mapping-Anleitung finden Sie hier: Shopify Integrationseinstellungen.

Denken Sie daran, Überschriften in Element -> Bearbeiten -> Design auswählen zu übersetzen, um jeder Sprache zu entsprechen.

API-Schlüssel wechseln #

Wenn Ihr Setup für jeden Markt eigene Clerk.io-Stores verwendet, hat jeder Store einen eigenen API-Schlüssel. Verwenden Sie Shopify’s request.locale.iso_code, um automatisch bei jedem Laden der Seite den richtigen Key zuzuweisen.

Ersetzen Sie den Inhalt von clerk-tracking.liquid durch den vollständigen Snippet unten. Fügen Sie einen {% when %}-Eintrag für jede Locale hinzu und setzen Sie {% else %} auf den Schlüssel Ihres Standardshops:

<!-- 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-Setup #

Wenn Ihr Setup mehrere Shopify-Stores umfasst (nicht nur mehrere Sprachen innerhalb eines Shops), erstellen Sie für jeden Shopify-Store einen Clerk.io-Store:

1. Klicken Sie in my.clerk.io auf + Neuen Store hinzufügen.
2. Kopieren Sie beim Erstellen die Inhalte des Hauptstores.
3. Verbinden und synchronisieren Sie jeden Shopify-Store separat.
4. Verwenden Sie den passenden Public Key pro Storefront im Tracking.