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 funktioniert.

1. Shop hinzufügen #

Melden Sie sich bei my.clerk.io an. Beim ersten Mal 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 aus.
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 Vertriebskanal-Einstellungen > Apps entwickeln.
Klicken Sie oben rechts 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-Zugriffsberechtigungen Lesezugriff (beginnt mit “read_”) für Folgendes aus:

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

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

3. Synchronisieren Sie Ihren Shop #

Jetzt kopieren Sie alle erforderlichen 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. Fügen Sie Clerk.io zu Ihrem Theme hinzu #

Installieren Sie die Besucher-Tracking (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, direkt vor dem letzten ], ein.

,  
{
"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 Neues Snippet hinzufügen mit dem Namen clerk-tracking und klicken Sie auf Fertig.
Fügen Sie das untenstehende 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 des Clerk.io E-Commerce-Personalisierungstools - 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>
<!-- Ende des Clerk.io E-Commerce-Personalisierungstools - www.clerk.io -->

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

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

5. Installieren Sie das Bestell-Tracking #

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 Verkaufs-Tracking-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 in einem Shopify-Webshop einzurichten.

Mehrere Domains/Sprachen #

Der einfachste Weg, Clerk.io in Standardkonfigurationen über mehrere Domains 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 mit der Erstellung Ihres Hauptshops 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 dem Einrichtungsleitfaden erneut, 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 Konfiguration 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 des Clerk.io E-Commerce-Personalisierungstools - 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>
<!-- Ende des Clerk.io E-Commerce-Personalisierungstools - www.clerk.io -->

Mehrere Bestände #

Wenn Sie einen einzelnen 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 entsprechende Anzahl von „Clerk.io“-Apps für die Anzahl der Subdomains des Shops haben.

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