Shopify

Get Started

Installieren Sie Clerk.io auf Shopify, indem Sie diesen einfachen Schritten folgen

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

Vor dem Setup #

Shopify und Clerk.io haben jeweils einen eigenen Teil beim Setup. Die Shopify-Seite bietet Zugriff, die App und das Storefront-Tracking. Die Clerk.io-Seite verbindet den Shop, konfiguriert die Synchronisierung und startet den Datenimport.

Shopifymy.clerk.io
App erstellen und installieren, Tracking hinzufügen und die Shopify-Domain für die Synchronisierung angeben.Store hinzufügen, Shopify-Synchronisation konfigurieren, erste Synchronisation starten und importierte Daten überprüfen.

Shopify-Domain #

Die Shopify-Domain wird beim Konfigurieren der Synchronisierung benötigt. Verwenden Sie die .myshopify.com-Adresse, auch wenn der Webshop eine eigene öffentliche Domain nutzt.

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

Shopify verwendet die myshopify.com-Adresse zur Identifizierung des Shops. Mehr dazu in Shopifys Domain-Dokumentation.

Verbinden Ihres Shops #

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

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

Store hinzufügen #

  1. Melden Sie sich bei my.clerk.io an. Beim ersten Mal sehen Sie die Seite „Neuen Store hinzufügen“.

  2. Tragen 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 Store hinzufügen.

Die Shopify .myshopify.com-Domain wird später in Data > Configuration eingegeben, wenn die Synchronisierung konfiguriert wird.

Besucherverfolgung installieren #

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

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

  3. Öffnen Sie settings_schema.json und fügen Sie unten, direkt vor der letzten ], das Clerk-Einstellungs-Snippet ein.

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

  1. Klicken Sie auf Save.

  2. Unter Snippets klicken Sie auf Add a new snippet, benennen Sie es clerk-tracking.liquid und klicken Sie auf Done.

  3. Fügen Sie Ihr Clerk-Besucher-Tracking-Snippet in die neue Datei ein und klicken Sie auf Save. 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 template.name == 'cart' %}[{% for item in cart.items %}{{ item.product_id | json }}{% unless forloop.last %}, {% endunless %}{% endfor %}]{% elsif product %}{{ product.id | json }}{% 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 -->
  1. Ö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 Settings > Customer Events.

  2. Klicken Sie auf Add custom pixel, benennen Sie ihn Clerk.io und klicken Sie dann auf Add pixel.

  3. Setzen Sie die Berechtigungsanforderung des Pixels auf Not required. Dies ist die empfohlene Einstellung für das Standard-Setup von Clerk.io, denn Clerk.io verwendet cookieloses Tracking und setzt keine persistente Cookies. Das Pixel läuft daher unabhängig davon, ob der Besucher Marketing-, Analyse- oder Präferenz-Cookies akzeptiert. Mehr dazu unter Clerk.ios cookielose Lösung.

    Falls Sie Clerk.io individuell so eingerichtet haben, dass persistente Besucher-IDs verwendet werden, setzen Sie die Berechtigungsanforderung auf Analytics. Dies ist nur nötig, wenn Ihr individuelles Setup wirklich persistente Cookies nutzt; für das standardmäßige cookielose Tracking ist es nicht erforderlich.

  4. Fügen Sie Ihren Clerk Sales Tracking Code ein und klicken Sie auf 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,
    }),
  });
});
  1. Klicken Sie auf Connect und bestätigen Sie.

Daten synchronisieren #

Die App und die Synchronisierung werden im Sync Data Guide konfiguriert. Folgen Sie zuerst den Shopify-Schritten, dann beenden Sie die Schritte in my.clerk.io, um die Zugangsdaten zu verbinden, die .myshopify.com-Domain einzutragen und die erste Synchronisierung zu starten.

Märkte und Sprachversionen #

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

  1. Führen Sie zunächst das Basissetup laut dieser Anleitung durch.
  2. Öffnen Sie my.clerk.io > Data > Configuration.
  3. Konfigurieren Sie marktspezifische Einstellungen (Shopify Market, Shopify Locale, Prefix URLs with Locale, Force Relative URLs).
  4. Fügen Sie Lagerorte hinzu, falls Lagerbestände nach Standort gefiltert werden sollen.
  5. Starten Sie eine neue Synchronisierung und überprüfen Sie die Produkt-URLs für jede Storefront-Sprache/-Domain.

Shop Locale/Shopify Locale sollte den standardisierten Shopify-Ländercode für die Sprache nutzen, z.B. da für Dänemark und sv für Schweden.

Falls Sie unsicher sind, welche Locale-Codes Ihr Shop verwendet, bitten Sie den Shopify Sidekick-Assistenten, die konfigurierten Locales für den Shop aufzulisten.

Nutzen Sie die detaillierte Anleitung zur Zuordnung hier: Shopify-Integrationseinstellungen.

Denken Sie daran, die Headlines unter Element -> Edit -> Select Design passend zu jeder Sprache zu übersetzen.

API-Keys umschalten #

Falls Ihr Setup separate Clerk.io Stores pro Markt nutzt, hat jeder Store seinen eigenen API-Key. Nutzen Sie Shopifys request.locale.iso_code, um den passenden Key bei jedem Laden der Seite automatisch zuzuweisen.

Ersetzen Sie den Inhalt von clerk-tracking.liquid mit dem unten stehenden vollständigen Snippet. Fügen Sie für jede Locale einen {% when %}-Eintrag hinzu und setzen Sie {% else %} auf den Key Ihres Standard-Stores:

<!-- 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 template.name == 'cart' %}[{% for item in cart.items %}{{ item.product_id | json }}{% unless forloop.last %}, {% endunless %}{% endfor %}]{% elsif product %}{{ product.id | json }}{% 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 über mehrere Shopify-Shops hinweggeht (nicht nur mehrere Sprachen in einem Shop), erstellen Sie für jeden Shopify-Shop einen eigenen Clerk.io-Store:

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

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.