Shopify

Get Started

Installiere Clerk auf Shopify, indem du diese einfachen Schritte befolgst

Bringen Sie Clerk 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.

Store verbinden #

Der erste Schritt bei der Installation von Clerk ist das Verbinden Ihres Shops mit Ihrem Clerk-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 in Ihrem Webshop funktioniert.

Store hinzufügen #

Melden Sie sich bei my.clerk.io an. Beim ersten Mal sehen Sie die Seite „Add New Store“.
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 Add Store.

Besucherverfolgung installieren #

Gehen Sie in Ihrem Shopify-Backend zu Online Store > Themes.
Klicken Sie auf ... > Edit code für das gewünschte Theme.
Öffnen Sie settings_schema.json und fügen Sie das Clerk-Settings-Snippet am Ende hinzu, direkt vor die letzte ].

,
{
  "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-Besucherverfolgungs-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 %}

Bestellverfolgung installieren #

Gehen Sie in Shopify zu Settings > Customer Events.
Klicken Sie auf Add custom pixel, benennen Sie ihn 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 Datensynchronisation verbindet Ihren Shopify-Shop mit Clerk und ermöglicht Clerk den Zugriff auf Ihre Produkte, Bestellungen, Kunden und andere Shop-Informationen. So kann Clerk personalisierte Empfehlungen und Suchergebnisse auf Basis Ihrer tatsächlichen Shop-Daten bereitstellen. Folgen Sie den Schritten im Sync Data guide, um die Datensynchronisierung einzurichten.

Märkte und Sprachen #

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

Schließen Sie zuerst das Grundsetup in dieser Anleitung ab.
Öffnen Sie my.clerk.io > Data > Configuration.
Konfigurieren Sie markt-spezifische Einstellungen (Shopify Market, Shopify Locale, Prefix URLs with Locale, Force Relative URLs).
Fügen Sie Lagerstandorte hinzu, wenn der Bestand nach Standort gefiltert werden soll.
Starten Sie eine neue Synchronisierung und prüfen Sie die Produkt-URLs in jeder Storefront-Sprache/-Domain.

Shop Locale/Shopify Locale sollte den standardisierten Shopify Sprachcode verwenden, zum Beispiel da für Dänemark und sv für Schweden.

Wenn Sie unsicher sind, welche Locale-Codes Ihr Shop verwendet, fragen Sie den Shopify Sidekick-Assistenten, welche Locales für den Shop konfiguriert sind.

Nutzen Sie die detaillierte Mapping-Anleitung hier: Shopify integration settings.

Denken Sie daran, Headlines in Element -> Edit -> Select Design für jede Sprache zu übersetzen.

API-Keys wechseln #

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

Ersetzen Sie den Inhalt von clerk-tracking.liquid mit dem vollständigen Snippet unten. Fügen Sie einen {% when %}-Eintrag für jede Locale 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 %}
  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 (nicht nur mehrere Sprachen in einem Store), erstellen Sie pro Shopify-Store einen eigenen Clerk.io Store:

In my.clerk.io auf + Add new Store klicken.
Kopieren Sie die Inhalte des Hauptshops während der Erstellung.
Verbinden und synchronisieren Sie jeden Shopify-Shop individuell.
Verwenden Sie den passenden Public Key pro Storefront im Tracking.

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