Shopify

Get Started

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

Bringen Sie Clerk 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 die Synchronisierung Ihrer Daten.

Ihren Shop verbinden #

Der erste Schritt bei der Installation von Clerk ist das Verbinden Ihres Shops mit Ihrem Clerk-Konto.

Nachdem Sie diese einfachen Schritte befolgt haben, können Sie Ihren Live-Demo-Shop sehen, der Ihnen einen persönlichen Überblick darüber gibt, wie Clerk in Ihrem Webshop funktioniert.

Shop hinzufügen #

  1. Melden Sie sich bei my.clerk.io an. Beim ersten Mal sehen Sie die Seite zum Hinzufügen eines neuen Shops.

  2. Geben Sie den Namen und die 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.

Besucher-Tracking installieren #

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

  2. Klicken Sie auf ... > Edit code für das Theme, das Sie anpassen möchten.

  3. Öffnen Sie settings_schema.json und fügen Sie das Clerk Settings-Snippet am Ende hinzu, direkt vor die letzte ].

Settings schema file
,
{
  "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 mit dem Namen 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 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 -->
  1. Öffnen Sie theme.liquid und fügen Sie dies direkt vor </head> ein:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}
Theme liquid tracking code

Bestell-Tracking installieren #

  1. Gehen Sie in Shopify zu Settings > Customer Events.

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

  3. 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.
Insert pixel tracking

Daten synchronisieren #

Die Datensynchronisierung verbindet Ihren Shopify-Shop mit Clerk, sodass Clerk auf Ihre Produkte, Bestellungen, Kunden und andere Shop-Informationen zugreifen kann. Dies ermöglicht Clerk, personalisierte Empfehlungen und Suchergebnisse basierend auf Ihren aktuellen Shop-Daten bereitzustellen. Befolgen Sie die Schritte im Sync Data guide, um die Datensynchronisierung einzurichten.

Märkte und Sprachen #

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

  1. Schließen Sie zunächst die Basiseinrichtung in dieser Anleitung ab.
  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 Lagerstandorte hinzu, falls der Bestand nach Standort gefiltert werden soll.
  5. Starten Sie eine neue Synchronisierung und überprüfen Sie die Produkt-URLs auf jeder Storefront-Sprache/Domain.

Shop Locale/Shopify Locale sollte den standardisierten Shopify-Sprachcode verwenden, zum Beispiel da für Dänemark und sv für Schweden.

Falls Sie unsicher sind, welche Sprachcodes Ihr Shop verwendet, fragen Sie den Sidekick-Assistenten von Shopify, die konfigurierten Locales für den Shop aufzulisten.

Verwenden Sie die detaillierte Mapping-Anleitung hier: Shopify integration settings.

Denken Sie daran, Headlines in Element -> Bearbeiten -> Design auswählen so zu übersetzen, dass sie zu jeder Sprache passen.

API-Schlüssel wechseln #

Wenn Sie für jedes Marktsegment eigene Clerk.io Stores verwenden, hat jeder Shop seinen eigenen API Key. Verwenden Sie Shopifys request.locale.iso_code, um beim Laden jeder Seite automatisch den richtigen Schlüssel zuzuweisen.

Ersetzen Sie den Inhalt von clerk-tracking.liquid durch das vollständige Snippet unten. Fügen Sie für jedes Locale einen {% when %}-Eintrag hinzu und setzen Sie {% else %} auf den API-Key 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 Ihre Einrichtung mehrere Shopify-Shops umfasst (nicht nur mehrere Sprachen innerhalb eines Shops), erstellen Sie je einen Clerk.io Store pro Shopify-Shop:

  1. Klicken Sie in my.clerk.io auf + Neuen Shop hinzufügen.
  2. Kopieren Sie Inhalte des Hauptshops während der Erstellung.
  3. Verbinden und synchronisieren Sie jeden Shopify-Shop separat.
  4. Verwenden Sie für jedes Schaufenster den passenden Public Key im Tracking.

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