Shopify

Get Started

Install Clerk.io auf Shopify, indem Sie diese einfachen Schritte befolgen.

Verbindung Ihres Shops #

Der erste Schritt zur Installation von Clerk.io besteht darin, Ihren Shop mit Ihrem Clerk.io Konto zu verbinden.

Das folgende Video zeigt Ihnen, was Sie Schritt für Schritt tun müssen. Verwenden Sie den Rest des Leitfadens als Referenz :)

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.io in Ihrem Webshop funktionieren wird.

1. Shop hinzufügen #

Melden Sie sich bei my.clerk.io an. Beim ersten Mal, wenn Sie dies tun, sehen Sie die Seite “Neuen Shop hinzufügen”.
Geben Sie den Namen und die Domain Ihres Webshops ein.
Wählen Sie Shopify als Plattform und wählen Sie Ihre Währung.
Klicken Sie auf Shop hinzufügen.

2. Konfigurieren Sie die Shopify-Verbindung #

Klicken Sie im Hauptmenü des Einrichtungsleitfadens auf Synchronisieren Sie Ihre Daten.
Dieser Einrichtungsleitfaden zeigt, was Sie in Ihrem Shopify-Backend tun müssen. Hier ist eine Übersicht der Schritte:
Gehen Sie im Shopify-Backend zu Apps > App- und Verkaufskanaleinstellungen > Apps entwickeln.
Klicken Sie in der oberen rechten Ecke auf App erstellen.
Geben Sie der App einen Namen wie “Clerk.io” und wählen Sie sich selbst als App-Entwickler aus.
Klicken Sie auf App erstellen.
Klicken Sie auf Konfiguration und suchen Sie nach Admin-API-Integration. Klicken Sie auf Konfigurieren.
Wählen Sie unter Admin-API-Zugriffsbereiche für Folgendes Lesezugriff (beginnt mit “read_”) aus:

Kunden
Inventar
Online-Shop-Seiten
Bestellungen
Preisregeln
Produkte
Veröffentlichungen
Shop-Standorte
Shopify-Märkte
Shop-Inhalte
Übersetzungen

Klicken Sie auf Speichern.
Klicken Sie auf App installieren und dann auf Installieren im Popup-Fenster, das angezeigt wird.
Klicken Sie auf die Registerkarte API-Anmeldeinformationen.

3. Synchronisieren Sie Ihren Shop #

Jetzt kopieren Sie alle notwendigen Informationen in die Felder in my.clerk.io:

Shopify-Domain (yourdomain.myshopify.com)
API-Schlüssel
Admin-API-Zugriffstoken
API-Geheimschlüssel

Klicken Sie auf Synchronisierung starten. Warten Sie, bis die Synchronisierung abgeschlossen ist. Vielleicht gönnen Sie sich eine Tasse Kaffee, wenn Sie einen großen Produktkatalog haben ;)
Das war’s!

4. Hinzufügen von Clerk.io zu Ihrem Theme #

Installieren Sie die Besucherverfolgung (clerk.js)

Melden Sie sich im Shopify-Backend an und gehen Sie zu Online-Shop → Themes.
Klicken Sie rechts neben dem Theme, in dem Sie Clerk installieren möchten, auf "…" → Code bearbeiten.
Öffnen Sie die Datei settings_schema.json. Fügen Sie den Clerk-Einstellungs-Snippet am Ende der Datei ein, direkt vor dem letzten ].

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

Drücken Sie Speichern
Klicken Sie in der linken Leiste unter “Snippets” auf Neuen Snippet hinzufügen mit dem Namen clerk-tracking, und klicken Sie auf Fertig.
Fügen Sie das folgende Clerk.io-Tracking-Skript in die Datei ein und klicken Sie auf Speichern. Denken Sie daran, PUBLIC_KEY durch den öffentlichen API-Schlüssel Ihres Clerk-Shops zu ersetzen.

<!-- 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 = 'PUBLIC_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 }}'
        }
    });

    {% 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 {
            window.Shopify.analytics.publish('clerk_pixel_context', {
              localeApiKey: publicKey,
              visitor: visitorId,
            });
          }
        })();
      });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Öffnen Sie die Datei theme.liquid. Fügen Sie den folgenden Verweis auf das Tracking-Skript im Header des Dokuments ein, direkt vor dem </head>-Tag.

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

5. Installieren Sie die Bestellverfolgung #

Gehen Sie im Shopify-Backend zu Einstellungen → Kundenereignisse.
Klicken Sie auf Benutzerdefinierten Pixel hinzufügen, benennen Sie ihn Clerk.io und klicken Sie auf Pixel hinzufügen.
Fügen Sie den folgenden Verkaufstracking-Code in das Codefeld ein. Klicken Sie auf Speichern.
Klicken Sie nach dem Speichern auf verbinden und bestätigen Sie verbinden.

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

Vollständiges Installationsbeispiel #

Shopify hat die Art und Weise aktualisiert, wie private Apps hinzugefügt werden. Wir arbeiten an einer neuen Version des Videos. Bis dahin sehen Sie, wie Sie eine Private App hier hinzufügen.

In diesem Video erhalten Sie einen vollständigen Überblick darüber, was erforderlich ist, um Clerk.io auf einem Shopify-Webshop einzurichten.

Mehrere Domains / Sprachen #

Der einfachste Weg, Clerk.io in Standardkonfigurationen über mehrere Domains hinweg zu implementieren, besteht darin, für jede Domain in my.clerk.io einen separaten Shop zu erstellen und diese mit jeder Ihrer Shopify-Sprachdomains zu synchronisieren.

Dies ermöglicht es Ihnen, Produkte, Verkäufe, Währungen usw. zu trennen, um jede Domain im Auge zu behalten.

Beginnen Sie damit, Ihren Hauptshop zu erstellen und folgen Sie dem Einrichtungsleitfaden, um Ihren Shop mit Clerk.io zu verbinden. Wählen Sie die Empfehlungen und/oder die Suche aus, die Sie in Ihrem Webshop anzeigen möchten.
Wenn Sie die erste Einrichtung abgeschlossen haben, klicken Sie auf "+ Neuen Shop hinzufügen" - die letzte Option in der Dropdown-Liste (normalerweise unter Ihren bestehenden Shops und dem Firmennamen zu finden):

3. Geben Sie auf der Seite “Neuen Shop hinzufügen” Ihre Domain-Details ein.

4. Klicken Sie auf Von bestehendem Shop kopieren? und wählen Sie den Shop aus, von dem Sie Inhalte kopieren möchten. Klicken Sie dann auf Shop hinzufügen. Dies überträgt die Inhalte und Designs von Ihrem Hauptshop.

5. Folgen Sie erneut dem Einrichtungsleitfaden, um Clerk.io zu aktivieren, indem Sie auf Einstellungen -> Einrichtungsleitfäden klicken, um Daten zu synchronisieren für die neue Domain.

6. Sobald die Daten-Synchronisierung abgeschlossen ist, ist Ihre Domain bereit und verwendet die gleiche Einrichtung wie Ihr Hauptshop.

7. Wiederholen Sie diesen Prozess für jede Ihrer Shopify-Sprachdomains.

8. Schließlich ändern Sie das Tracking-Skript in Ihrem Shopify-Theme, um den richtigen öffentlichen Schlüssel für jede Domain einzuschließen.

Hier ist ein Beispiel für das Tracking-Skript, das geändert wurde, um mehrere Sprachen einzuschließen:

<!-- 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 = "https://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);

  document.addEventListener("DOMContentLoaded", (e) => {
    let publicKey;
    switch (Shopify.locale) {
      case 'nl':
        publicKey = 'KEY';
        break;
      case 'en':
        publicKey = 'KEY';
        break;
      case 'es':
        publicKey = 'KEY';
        break;
      case 'it':
        publicKey = 'KEY';
        break;
      case 'fr':
        publicKey = 'KEY';
        break;
      case 'de':
        publicKey = 'KEY';
        break;
    }

    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 }}",
        clerkShopLocale: "{{ shop.locale }}",
        template_name: "{{ template.name }}",
        clerkCountry: "{{ routes.root_url }}"
      }
    });

    ; (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 {
        window.Shopify.analytics.publish('clerk_pixel_context', {
          localeApiKey: publicKey,
          visitor: visitorId,
        });
      }
    })();
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Mehrere Bestände #

Wenn Sie einen einzigen Shop mit mehreren Beständen und Sprachen haben, müssen Sie mehrere Clerk.io-Apps erstellen, um eine schnelle Daten-Synchronisierung sicherzustellen. Dies geschieht, damit Shops nicht das gleiche Rate-Limit und die Wiederherstellungsrate in der Shopify ADMIN API teilen.

Gehen Sie im Shopify-Backend zu Apps > Apps entwickeln für Ihren Shop.
Klicken Sie auf die Schaltfläche App erstellen und wiederholen Sie diese Schritte, bis Sie die Anzahl der “Clerk.io”-Apps entsprechend der Anzahl der Subdomains für den Shop haben.

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