Get Started

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

Ihren Shop verbinden #

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

Nachdem Sie diese einfachen Schritte durchgeführt haben, können Sie Ihren Live Demo Store sehen, der Ihnen einen persönlichen Überblick darüber gibt, wie Clerk in Ihrem Webshop funktionieren wird.

Shop hinzufügen #

1. Loggen Sie sich bei my.clerk.io ein. Beim ersten Mal sehen Sie die Seite “Add New Store”.

2. Geben Sie den Name und die Domain Ihres Webshops ein.

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

4. Klicken Sie auf Add Store.

Besuchertracking installieren #

1. Gehen Sie im Backend von Shopify zu Online Store > Themes.

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

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

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

4. Klicken Sie auf Save.

5. Unter Snippets, klicken Sie auf Add a new snippet mit dem Namen clerk-tracking.liquid und danach auf Done.

6. Fügen Sie Ihr Clerk-Besuchertracking-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);
  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 -->

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

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

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

4. Klicken Sie auf Connect und bestätigen Sie.

Daten synchronisieren #

Die Datensynchronisation verbindet Ihren Shopify-Shop mit Clerk, sodass Clerk auf Ihre Produkte, Bestellungen, Kunden und weitere Shop-Informationen zugreifen kann. So kann Clerk personalisierte Empfehlungen und Suchergebnisse auf Basis Ihrer echten Shopdaten liefern. Folgen Sie den Schritten im Sync Data guide, um die Datensynchronisation einzurichten.

Märkte und Sprachen #

Falls Ihr Shopify-Setup mehrere Sprachen, Märkte oder Domains verwendet, richten Sie dies ein, 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 Bestände nach Standort gefiltert werden sollen.
5. Starten Sie eine neue Synchronisation und überprüfen Sie die Produkt-URLs in jeder Storefront-Sprache/-Domain.

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

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

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

Denken Sie daran, Headlines in Element -> Edit -> Select Design für jede Sprache passend zu übersetzen.

Multi-Store-Setup #

Falls Ihre Einrichtung mehrere Shopify-Shops umfasst (nicht nur mehrere Sprachen in einem Shop), legen Sie pro Shopify-Shop einen Clerk.io-Store an:

1. Klicken Sie in my.clerk.io auf + Add new Store.
2. Kopieren Sie während der Erstellung die Inhalte des Hauptshops.
3. Verbinden und synchronisieren Sie jeden Shopify-Shop einzeln.
4. Verwenden Sie pro Storefront den passenden Public Key für das Tracking.