Get Started

Bringen Sie Clerk in nur wenigen Schritten auf Ihrem Lightspeed-Shop zum Laufen. Diese Anleitung führt Sie durch die Verbindung Ihres Shops, die Installation von Tracking-Skripten und die Synchronisierung Ihrer Daten.

Ihren Shop verbinden #

Nachdem Sie diese einfachen Schritte befolgt haben, können Sie Ihre Live Demo ansehen, die Ihnen einen persönlichen Überblick darüber gibt, wie Clerk in Ihrem Webshop funktioniert, bevor Sie den Rest des Systems einrichten.

Shop hinzufügen #

Nach dem Login unter my.clerk.io müssen Sie als Erstes Ihren Shop hinzufügen:

1. Geben Sie den Namen und die Domain Ihres Webshops ein.

2. Wählen Sie Lightspeed als Plattform und wählen Sie Ihre Währung.

3. Klicken Sie auf Add Store.

Tracking-Skripte installieren #

Das Clerk-Tracking-Skript verwendet Lightspeed Liquid-Variablen, um Shop-Daten wie Währung und Produktkontext auszulesen. Daher muss das Skript in eine Theme-Datei eingefügt werden, in der Liquid verarbeitet wird.

Besucher-Tracking #

1. Gehen Sie in Ihrem Lightspeed-Backend zu Design > Theme Editor > Advanced > Edit Code.

2. Klicken Sie unter Snippets auf Add a new snippet, geben Sie den Namen clerk-tracking.rain an und klicken Sie auf Done.

3. Fügen Sie das folgende Skript in clerk-tracking.rain ein und ersetzen Sie INSERT_PUBLIC_API_KEY durch Ihren Public Key aus my.clerk.io > Developers > API Keys.

<!-- Clerk.io Visitor Tracking (Lightspeed) -->
<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);

  Clerk('config', {
    key: 'INSERT_PUBLIC_API_KEY',
    formatters: {
      convert_currency: function(price) {
        const rate_raw = '{{ 100 | money }}'.replace(/[^0-9.]/g, '');
        const rate = parseFloat(rate_raw) ? (parseFloat(rate_raw) / 100) : 1;
        return rate * price;
      }
    },
    globals: {
      currency_iso: '{{ shop.currency2.code }}',
      currency_symbol: '{{ shop.currency2.symbol }}'
    }
  });
  // Clerk.js Context
  Clerk('context', {
    product: {% if product.id %}'{{ product.id }}'{% else %}null{% endif %},
    category: {% if collection.category_id %}'{{ collection.category_id }}'{% else %}null{% endif %},
    page: {% if product.id %}null{% else %}{% if collection.category_id %}null{% else %}'{{ template }}'{% endif %}{% endif %}
  });

  {% if page.account.email %}
  Clerk('call', 'log/email', { email: '{{ page.account.email }}' });
  {% endif %}
</script>

4. Klicken Sie auf Save.

5. Öffnen Sie layouts > custom.rain und fügen Sie das folgende Include dort ein, wo das Besucher-Tracking-Skript geladen werden soll – in der Regel kurz vor dem schließenden </head>-Tag. Klicken Sie auf Save.

{% include 'snippets/clerk-tracking.rain' %}

Die Warenkorb- und Dankeseite in Lightspeed verwendet eine eigene Themendatei namens fixed.rain. Diese Datei erbt keine Skripte von custom.rain, daher wird Clerk.js auf diesen Seiten nicht geladen, es sei denn, das Snippet wird dort ebenfalls eingefügt.

6. Öffnen Sie layouts > fixed.rain im selben Theme-Editor und fügen Sie das gleiche Include direkt vor dem schließenden </head>-Tag ein.

{% include 'snippets/clerk-tracking.rain' %}

7. Klicken Sie auf Save.

Bestell-Tracking #

1. Gehen Sie in Ihrem Lightspeed-Backend zu Settings > Website-Settings > Web Extras.

2. Suchen Sie das Tracking-Feld und fügen Sie den Clerk-Bestelltracking-Code ein.

<span
  class="clerk"
  data-api="log/sale"
  data-sale="{{ order.information.number }}"
  data-email="{{ order.customer.email }}"
  data-customer="{{ order.customer.id }}"
  data-products='[{% for product in order.products %}{"id":{{ product.product_id }},"quantity":{{ product.quantity }},"price":{{ product.base_price_incl }}}{% if not loop.last %},{% endif %}{% endfor %}]'>
</span>

3. Klicken Sie auf Save.

Wenn Bestellungen trotzdem nicht getrackt werden #

Einige Lightspeed-Themes laden Clerk.js während des Checkouts nicht aus custom.rain und fixed.rain. Wenn das Snippet clerk-tracking.rain in beiden Dateien enthalten ist und dennoch keine Bestellungen getrackt werden, fügen Sie den Inhalt des Besucher-Tracking-Snippets zusätzlich bei Web Extras ein.

1. Gehen Sie zu Settings > Website-Settings > Web Extras und suchen Sie das Tracking-Feld.

2. Fügen Sie den Inhalt von clerk-tracking.rain direkt über dem Clerk.io-Bestell-Tracking-Code ein.

3. Klicken Sie auf Save.

Verwenden Sie diese Platzierung nur, wenn das Standard-Theme-Datei-Setup keine Bestellungen erfasst. Ob das notwendig ist, hängt vom aktiven Lightspeed-Theme ab.

Mehrere Sprachen #

Verwenden Sie dieses Setup, wenn ein Lightspeed eCom (C-Series) Shop Sprachpfade wie /nl/, /en/, /de/ und /fr/ hat, und jede Sprache einen separaten Clerk.io-Shop nutzt.

Konfigurieren Sie den Public Key in Rain, bevor Clerk.js geladen wird. Lightspeed rendert shop.language serverseitig, so dass jede Seite genau den passenden Schlüssel erhält, bevor Clerk.js im Browser geladen wird.

Das ist zuverlässiger als das Umschalten des Schlüssels mit JavaScript auf Client-Seite. Ein Switch im Browser kann mit dem Laden von Clerk.js konkurrieren oder Clerk.io versehentlich mit dem falschen Store initialisieren.

Ersetzen Sie den Inhalt von clerk-tracking.rain mit folgendem Besucher-Tracking-Loader. Ersetzen Sie jeden Platzhalter durch den entsprechenden Public Key des jeweiligen Stores aus my.clerk.io > Developers > API Keys.

{% set clerk_key = 'INSERT_NL_PUBLIC_API_KEY' %}

{% if shop.language == 'en' %}
  {% set clerk_key = 'INSERT_EN_PUBLIC_API_KEY' %}
{% elseif shop.language == 'de' %}
  {% set clerk_key = 'INSERT_DE_PUBLIC_API_KEY' %}
{% elseif shop.language == 'fr' %}
  {% set clerk_key = 'INSERT_FR_PUBLIC_API_KEY' %}
{% elseif shop.language == 'nl' %}
  {% set clerk_key = 'INSERT_NL_PUBLIC_API_KEY' %}
{% endif %}

<!-- Clerk.io Visitor Tracking (Lightspeed multilingual) -->
<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);

  Clerk('config', { key: '{{ clerk_key }}' });
</script>

Der anfängliche niederländische Schlüssel ist der Fallback. Ändern Sie ihn in den Public Key der Standard-Sprache Ihres Shops, falls Niederländisch nicht die Fallback-Sprache ist. Verwenden oder veröffentlichen Sie keinen Private Key in Rain, im Seitenquelltext oder im Browser-JavaScript.

shop.language ist die aktive Besuchersprach-Variable von Lightspeed. Lesen Sie Lightspeeds Rain variable reference und Clerk.io’s Clerk.js configuration reference für weitere Informationen zu den zugrunde liegenden Variablen und der Konfiguration.

Lassen Sie das Include in sowohl layouts > custom.rain als auch layouts > fixed.rain direkt vor dem schließenden </head>-Tag. fixed.rain deckt den Checkout und andere eingeschränkte Seiten ab, und Clerk.js muss dort für das Sales-Tracking auf der Bestätigungsseite laufen.

Jede Seite darf nur einen Clerk.js-Loader und eine Clerk.io-Konfiguration enthalten. Entfernen oder ersetzen Sie eventuell vorhandene statische Clerk.io-Konfigurationen in fixed.rain, custom.rain oder Tracking/Web Extras. Andernfalls kann eine statische Datei Clerk.io vor dem sprachspezifischen Schlüssel konfigurieren.

Jede Sprache prüfen #

Für jede konfigurierte Sprache:

1. Öffnen Sie eine Seite in dieser Sprache und prüfen Sie den gerenderten Seitenquelltext. Bestätigen Sie, dass der Schlüssel in Clerk('config') der erwartete, sprachspezifische Public Key ist.

2. Bestätigen Sie, dass die jeweiligen Clerk.io-Elemente Ergebnisse aus dem Clerk.io-Shop dieser Sprache laden.

3. Wo Sales-Tracking relevant ist, führen Sie eine kontrollierte Testbestellung durch und bestätigen Sie, dass die Bestellung im passenden Sprachshop getrackt wird.

Daten synchronisieren #

Die Synchronisierung der Daten verbindet Ihren Lightspeed-Shop mit Clerk, sodass Clerk auf Ihre Produkte, Bestellungen, Kunden und andere Shop-Informationen zugreifen kann. Dadurch kann Clerk personalisierte Empfehlungen und Suchergebnisse auf Basis Ihrer echten Shop-Daten bereitstellen. Befolgen Sie die Schritte im Sync Data guide, um die Datensynchronisierung einzurichten.