Shopify

Get Started

Installieren Sie Clerk auf Shopify, indem Sie diesen einfachen Schritten folgen

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 Synchronisation Ihrer Daten.

Verbinden Ihres Shops #

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

Nachdem Sie diese einfachen Schritte durchgeführt haben, können Sie Ihren Live-Demonstrationsshop 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 Login 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.

Besucher-Tracking installieren #

Gehen Sie im Shopify-Backend zu Online Store > Themes.
Klicken Sie bei dem Theme, das Sie anpassen möchten, auf ... > Edit code.
Öffnen Sie settings_schema.json und fügen Sie das Clerk-Einstellungs-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 Save.
Unter Snippets klicken Sie auf Add a new snippet mit dem Namen clerk-tracking.liquid und dann auf Done.
Fügen Sie Ihr Clerk-Besucher-Tracking-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 -->

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

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

Bestell-Tracking installieren #

Gehen Sie in Shopify zu Settings > Customer Events.
Klicken Sie auf Add custom pixel, benennen Sie es Clerk.io und klicken Sie auf Add pixel.
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,
    }),
  });
});

Klicken Sie auf Connect und bestätigen Sie.

Daten synchronisieren #

Die Datensynchronisierung verbindet Ihren Shopify-Shop mit Clerk und ermöglicht Clerk den Zugriff auf Ihre Produkte, Bestellungen, Kunden und weitere Shop-Informationen. Dadurch kann Clerk personalisierte Empfehlungen und Suchergebnisse auf Basis Ihrer echten Shop-Daten bereitstellen. Befolgen Sie die Schritte im Sync Data guide, um die Datensynchronisation einzurichten.

Mehrere Domains/Sprachen #

Die einfachste Möglichkeit, Clerk in Standard-Setups auf mehreren Domains zu implementieren, besteht darin, für jede Domain einen separaten Shop in my.clerk.io zu erstellen und sie mit jeder Ihrer Shopify-Sprachdomains zu synchronisieren.

So können Sie Produkte, Verkäufe, Währungen usw. pro Domain trennen und überblicken.

Einrichtung von Shops #

Beginnen Sie mit der Erstellung Ihres Hauptshops und folgen Sie der Einrichtungsanleitung, um Ihren Shop mit Clerk zu verbinden. Wählen Sie die Recommendations und/oder Search, die Sie in Ihrem Webshop anzeigen möchten.
Wenn Sie die Grundeinrichtung abgeschlossen haben, klicken Sie auf "+ Neuen Shop hinzufügen" – die letzte Option in der Dropdown-Liste (normalerweise unter Ihrem bestehenden Shop/Ihren Shops und Firmennamen):

Geben Sie auf der Seite Neuen Shop hinzufügen Ihre Domain-Daten ein.
Klicken Sie auf Von bestehendem Shop kopieren? und wählen Sie den Shop, aus dem Sie Elemente kopieren möchten. Klicken Sie dann auf Shop hinzufügen. Dadurch werden die Elemente und Designs aus Ihrem Hauptshop übernommen.
Folgen Sie erneut der Einrichtungsanleitung, um Clerk zu aktivieren, indem Sie auf Settings > Setup Guides klicken, um Daten zu synchronisieren für die neue Domain.
Sobald die Daten-Synchronisierung abgeschlossen ist, ist Ihre Domain bereit und verwendet die gleiche Einrichtung wie Ihr Hauptshop.
Wiederholen Sie diesen Prozess für jede Ihrer Shopify-Sprachdomains.
Passen Sie abschließend das Tracking-Skript in Ihrem Shopify-Theme an, sodass für jede Domain der korrekte Public Key verwendet wird.

Hier ein Beispiel, wie das Tracking-Skript für mehrere Sprachen angepasst wird:

<!-- 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 }}"
      }
    });

    // 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 %}
    });

    ; (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 Headlines im Element -> Bearbeiten -> Design wählen in die richtige Sprache zu übersetzen.

Mehrere Lagerbestände #

Wenn Sie einen einzelnen Shop mit mehreren Lagerbeständen und Sprachen haben, müssen Sie mehrere Clerk-Apps erstellen, um eine schnelle Datensynchronisation zu gewährleisten.

So wird verhindert, dass Shops denselben Rate Limit und die Wiederherstellungsrate in der Shopify ADMIN API teilen.

Gehen Sie im Shopify-Backend auf Apps > Develop apps für Ihren Shop.
Klicken Sie auf App erstellen und wiederholen Sie diese Schritte, bis Sie “Clerk.io”-Apps entsprechend der Anzahl der Subdomains für Ihren Shop haben.

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