Shopify

Get Started

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

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

Vor der Einrichtung #

Shopify und Clerk.io haben jeweils einen Teil bei der Einrichtung. Die Shopify-Seite ermöglicht den Zugriff, die App und das Storefront-Tracking. Die Clerk.io-Seite verbindet den Shop, konfiguriert die Synchronisierung und startet den Datenimport.

Shopifymy.clerk.io
Erstellen und Installieren der App, Hinzufügen des Trackings und Angabe der Shopify-Domain für die Synchronisierung.Hinzufügen des Stores, Konfigurieren der Shopify-Synchronisierung, Starten der ersten Synchronisierung und Überprüfung der importierten Daten.

Shopify-Domain #

Die Shopify-Domain wird für die Einrichtung der Synchronisierung benötigt. Verwenden Sie die .myshopify.com-Adresse, auch wenn der Webshop eine eigene öffentliche Domain verwendet.

  1. Gehen Sie in Shopify zu Settings > Domains.
  2. Kopieren Sie die aktuelle .myshopify.com-Adresse des Shops.

Shopify verwendet die myshopify.com-Adresse zur Identifizierung des Shops. Mehr dazu finden Sie in der Shopify-Domänendokumentation.

Ihren Store verbinden #

Der erste Schritt bei der Installation von Clerk.io ist die Verbindung Ihres Shops mit Ihrem Clerk.io-Konto.

Nachdem Sie diese einfachen Schritte befolgt haben, können Sie Ihren Live Demo Store sehen, der Ihnen einen persönlichen Überblick gibt, wie Clerk.io in Ihrem Webshop funktionieren wird.

Store hinzufügen #

  1. Melden Sie sich bei my.clerk.io an. Beim ersten Mal sehen Sie die Seite „Neuen Store hinzufügen“.

  2. Geben Sie den Namen und die öffentliche Domain Ihres Webshops ein.

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

  4. Klicken Sie auf Store hinzufügen.

Die Shopify .myshopify.com-Domain wird später in Data > Configuration eingegeben, wenn die Synchronisierung konfiguriert wird.

Besucher-Tracking installieren #

  1. Gehen Sie im Backend von Shopify zu Online Store > Themes.

  2. Klicken Sie bei dem gewünschten Theme auf ... > Edit code.

  3. Öffnen Sie settings_schema.json und fügen Sie das Clerk-Einstellungs-Snippet am Ende, direkt vor der letzten ], ein.

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

  1. Klicken Sie auf Save.

  2. Unter Snippets klicken Sie auf Add a new snippet mit dem Namen clerk-tracking.liquid und klicken Sie auf Done.

  3. Fügen Sie Ihr Clerk-Besucher-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);
  const 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 -->
  1. Öffnen Sie theme.liquid und fügen Sie folgenden Code direkt vor </head> ein:
{% if settings.enable_clerk %}
  {% render 'clerk-tracking' %}
{% endif %}
Theme liquid tracking code

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. Setzen Sie die erforderliche Berechtigung des Pixels auf Not required. Dies ist die empfohlene Einstellung für das Standardsetup von Clerk.io, da Clerk.io cookieless Tracking verwendet und keine dauerhaften Cookies setzt. Das Pixel wird daher unabhängig davon ausgeführt, ob der Besucher Marketing-, Analyse- oder Präferenz-Cookies akzeptiert. Weitere Informationen zur cookieless Lösung von Clerk.io.

    Wenn Sie Clerk.io individuell so konfiguriert haben, dass dauerhafte Besucher-IDs verwendet werden, stellen Sie die Berechtigung auf Analytics ein. Dies ist nur erforderlich, wenn Ihr benutzerdefiniertes Setup tatsächlich dauerhafte Cookies verwendet; für das Standard-cookieless-Setup ist es nicht notwendig.

  4. 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,
    }),
  });
});
  1. Klicken Sie auf Connect und bestätigen Sie.
Insert pixel tracking

Daten synchronisieren #

Die App und die Synchronisierung werden in der Sync Data guide konfiguriert. Folgen Sie zuerst den Shopify-Schritten, dann schließen Sie die my.clerk.io-Schritte ab, um die Zugangsdaten zu verbinden, die .myshopify.com-Domain einzugeben und die erste Synchronisierung zu starten.

Märkte und Sprachen #

Wenn Ihre Shopify-Konfiguration mehrere Sprachen, Märkte oder Domains verwendet, konfigurieren Sie dies, bevor Sie live gehen.

  1. Schließen Sie zuerst das Basis-Setup gemäß 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 Lagerorte hinzu, wenn der Bestand nach Standort gefiltert werden soll.
  5. Starten Sie eine neue Synchronisierung und überprüfen Sie die Produkt-URLs in jeder Storefront-Sprache/Domain.

Shop Locale/Shopify Locale sollte den standardisierten Shopify-Sprach-Locales-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 den Shopify Sidekick-Assistenten, die konfigurierten Locales für den Shop aufzulisten.

Nutzen Sie die ausführliche Mapping-Anleitung hier: Shopify integration settings.

Denken Sie daran, auch die Headlines unter Element -> Edit -> Select Design zu übersetzen, um jeder Sprache gerecht zu werden.

API-Keys wechseln #

Wenn Ihr Setup getrennte Clerk.io-Stores pro Markt verwendet, hat jeder Store seinen eigenen API-Key. Verwenden Sie das Shopify-Attribut request.locale.iso_code, um auf jeder Seite automatisch den korrekten Key zuzuweisen.

Ersetzen Sie den Inhalt von clerk-tracking.liquid durch das folgende vollständige Snippet. Fügen Sie für jedes Locale einen {% when %}-Eintrag hinzu und setzen Sie {% else %} auf den Key Ihres Standard-Stores:

<!-- 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);
  {% case request.locale.iso_code %}
    {% when 'da' %}
      {% assign publicKey = 'YOUR_DANISH_KEY' %}
    {% when 'sv' %}
      {% assign publicKey = 'YOUR_SWEDISH_KEY' %}
    {% else %}
      {% assign publicKey = 'YOUR_DEFAULT_KEY' %}
  {% endcase %}
  const publicKey = '{{ publicKey }}';
  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 -->

Multi-Store-Setup #

Wenn Ihr Setup mehrere Shopify-Stores umfasst (also nicht nur mehrere Sprachen in einem Shop), erstellen Sie für jeden Shopify-Shop einen eigenen Clerk.io-Store:

  1. Klicken Sie in my.clerk.io auf + Neuen Store hinzufügen.
  2. Kopieren Sie Inhalte vom Hauptshop bei der Erstellung.
  3. Verbinden und synchronisieren Sie jeden Shopify-Store einzeln.
  4. Verwenden Sie in Tracking für jede Storefront den passenden Public Key.

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