Shopify

Get Started

Installiere Clerk auf Shopify, indem du diesen einfachen Schritten folgst

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

Verbinden Ihres Shops #

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

Das untenstehende Video zeigt Ihnen Schritt für Schritt, was zu tun ist. Nutzen Sie den Rest der Anleitung als Referenz.

Nachdem Sie diese einfachen Schritte durchgeführt 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 #

Melden Sie sich bei my.clerk.io an. Beim ersten Mal sehen Sie die Seite “Neue Store 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 Store hinzufügen.

Besucher-Tracking installieren #

Gehen Sie im Shopify-Backend zu Onlineshop > Themes.
Klicken Sie bei dem zu bearbeitenden Theme auf ... > Code bearbeiten.
Öffnen Sie settings_schema.json und fügen Sie das Clerk-Einstellungen-Snippet ganz unten, direkt vor der letzten ], hinzu.

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

Klicken Sie auf Speichern.
Unter Snippets klicken Sie auf Neues Snippet hinzufügen mit dem Namen clerk-tracking.liquid und anschließend auf Fertig.
Fügen Sie Ihr Clerk Besucher-Tracking-Snippet in die neue Datei ein und klicken Sie auf Speichern. 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 }}"
    }
  });

  {% 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 theme.liquid und fügen Sie diesen Code direkt vor </head> ein:

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

Order-Tracking installieren #

Gehen Sie in Shopify zu Einstellungen > Kundenereignisse.
Klicken Sie auf Eigenes Pixel hinzufügen, benennen Sie es Clerk.io und klicken Sie dann auf Pixel hinzufügen.
Fügen Sie Ihren Clerk Sales Tracking-Code ein und klicken Sie auf Speichern.

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

Klicken Sie auf Verbinden und bestätigen Sie.

Daten synchronisieren #

Die Datensynchronisierung 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 Grundlage Ihrer echten Shop-Daten bieten. Befolgen Sie die Schritte in der Sync Data Anleitung, um die Datensynchronisierung einzurichten.

Mehrere Domains/Sprachen #

Die einfachste Möglichkeit, Clerk in Standard-Setups über mehrere Domains hinweg zu implementieren, besteht darin, für jede Domain in my.clerk.io einen separaten Store zu erstellen und diese jeweils mit Ihren Shopify-Sprachdomains zu synchronisieren.

So können Sie Produkte, Verkäufe, Währungen usw. getrennt halten und jede Domain individuell verfolgen.

Stores Setup #

Beginnen Sie mit der Erstellung Ihres Haupt-Stores und folgen Sie der Setup-Anleitung, um Ihren Store mit Clerk zu verbinden. Wählen Sie die Recommendations und/oder die Search, die Sie in Ihrem Webshop anzeigen möchten.
Nachdem Sie die Erstinstallation abgeschlossen haben, klicken Sie auf "+ Neues Store hinzufügen" - die letzte Option in der Dropdown-Liste (normalerweise unter Ihrem bestehenden Store/Ihren bestehenden Stores und Firmennamen):

Geben Sie auf der Seite “Neues Store hinzufügen” Ihre Domain-Details ein.
Klicken Sie auf Von bestehendem Store kopieren? und wählen Sie den Store aus, von dem Sie Elemente übernehmen möchten, dann klicken Sie auf Store hinzufügen. Dadurch werden die Elemente und Designs aus Ihrem Haupt-Store übernommen.
Folgen Sie erneut der Setup-Anleitung, um Clerk durch Klick auf Einstellungen > Setup-Anleitungen für Daten-Sync für die neue Domain zu aktivieren.
Sobald der Daten-Sync abgeschlossen ist, ist Ihre Domain betriebsbereit und verwendet dasselbe Setup wie Ihr Haupt-Store.
Wiederholen Sie diesen Vorgang für jede Ihrer Shopify-Sprachdomains.
Passen Sie abschließend das Tracking-Script in Ihrem Shopify-Theme so an, dass für jede Domain der richtige Public Key verwendet wird.

Hier sehen Sie ein Beispiel für ein Tracking-Skript, das für mehrere Sprachen angepasst wurde:

<!-- 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 -->

Denken Sie daran, auch die Überschriften in Element -> Bearbeiten -> Design auswählen in die richtige Sprache zu übersetzen.

Mehrere Warenbestände #

Wenn Sie einen einzelnen Store mit mehreren Warenbeständen und Sprachen haben, müssen Sie mehrere Clerk Apps anlegen, um einen schnellen Daten-Sync sicherzustellen.

Dies wird gemacht, damit Stores nicht dasselbe Rate Limit und die Wiederherstellungsrate in der Shopify ADMIN API teilen.

Gehen Sie im Shopify-Backend zu Apps > Apps entwickeln für Ihren Store.
Klicken Sie auf die Schaltfläche App erstellen und wiederholen Sie diese Schritte, bis Sie so viele “Clerk.io”-Apps wie 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.