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 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 Store 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 „Add New Store“.

2. Schreiben Sie den Name und die Domain Ihres Webshops.

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

4. Klicken Sie auf Add Store.

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 bearbeiten möchten.

3. Öffnen Sie settings_schema.json und fügen Sie das Clerk Settings-Snippet ganz unten, 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 anschließend auf Done.

6. Fügen Sie Ihr Clerk Visitor Tracking Snippet in die neue Datei ein und klicken Sie auf Save. Ersetzen Sie INSERT_PUBLIC_API_KEY mit Ihrem 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 %}

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

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

Daten synchronisieren #

Die Datensynchronisierung verbindet Ihren Shopify-Shop mit Clerk, sodass Clerk auf Ihre Produkte, Bestellungen, Kunden und andere Shop-Informationen zugreifen kann. Dadurch kann Clerk personalisierte Empfehlungen und Suchergebnisse auf Basis Ihrer aktuellen Shop-Daten bereitstellen. Folgen Sie den Schritten im Sync Data guide, um die Datensynchronisierung einzurichten.

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 das Basissetup 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, wenn der Bestand nach Standort eingeschränkt werden soll.
5. Starten Sie eine neue Synchronisation und überprüfen Sie die Produkt-URLs in jeder Storefront-Sprache/Domain.

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

Wenn Sie sich unsicher sind, welche Locale-Codes Ihr Shop verwendet, bitten Sie Shopifys Sidekick-Assistenten, die konfigurierten Sprachversionen des Shops aufzulisten.

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

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

Multi-Store-Setup #

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

1. In my.clerk.io auf + Add new Store klicken.
2. Inhalte vom Hauptshop während der Erstellung kopieren.
3. Jeden Shopify-Shop einzeln verbinden und synchronisieren.
4. Den jeweils passenden Public Key pro Storefront im Tracking verwenden.