Get Started

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

Ihren Shop verbinden #

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

Shop hinzufügen #

Nachdem Sie sich bei my.clerk.io angemeldet haben, müssen Sie als Erstes Ihren Shop hinzufügen:

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

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

3. Klicken Sie auf Add Store.

Tracking-Skripte installieren #

Das Clerk-Tracking-Skript verwendet Lightspeed Liquid-Variablen, um Shopdaten wie Währung und Produkt-Kontext zu lesen. Aus diesem Grund muss das Skript in einer Theme-Datei platziert werden, in der Liquid verarbeitet wird.

Besucher-Tracking #

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

2. Klicken Sie unter Snippets auf Add a new snippet, benennen Sie es clerk-tracking.rain 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 den folgenden Include dort ein, wo das Besuchertracking-Skript geladen werden soll – normalerweise direkt vor dem schließenden </head>-Tag. Klicken Sie auf Save.

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

Die Warenkorb- und Danke-Seiten in Lightspeed verwenden eine separate Theme-Datei namens fixed.rain. Diese Datei übernimmt keine Skripte aus custom.rain, daher wird Clerk.js auf diesen Seiten nicht geladen, es sei denn, das Snippet wird dort ebenfalls eingebunden.

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

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

7. Klicken Sie auf Save.

Bestell-Tracking #

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

2. Suchen Sie das Tracking-Feld und fügen Sie dort 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 weiterhin nicht getrackt werden #

Einige Lightspeed-Themes laden Clerk.js während des Checkouts weder aus custom.rain noch aus fixed.rain. Wenn das clerk-tracking.rain-Snippet in beiden Dateien eingebunden ist und die Bestellungen trotzdem nicht getrackt werden, fügen Sie den Inhalt des Besucher-Tracking-Snippets zusätzlich in 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 oberhalb des Clerk.io-Bestelltracking-Codes ein.

3. Klicken Sie auf Save.

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

Mehrsprachigkeit #

Verwenden Sie dieses Setup, wenn ein Lightspeed eCom (C-Series) Shop über Sprachpfade wie /nl/, /en/, /de/ und /fr/ verfügt und jede Sprache einen eigenen Clerk.io-Store nutzt.

Konfigurieren Sie den Public Key in Rain, bevor Clerk.js geladen wird. Lightspeed rendert shop.language auf dem Server, sodass jede Seite genau einen korrekten Key erhält, bevor der Browser Clerk.js lädt.

Das ist zuverlässiger als ein Key-Wechsel per clientseitigem JavaScript. Ein Wechsel im Browser kann mit Clerk.js konkurrieren oder Clerk.io zunächst mit dem falschen Store initialisieren.

Ersetzen Sie den Inhalt von clerk-tracking.rain durch folgenden Visitor Tracking Loader. Ersetzen Sie jeden Platzhalter durch den passenden Public Key aus my.clerk.io > Developers > API Keys Ihres Shops.

{% 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 initiale niederländische Key ist der Fallback. Ändern Sie ihn zum Public Key der Standardsprache des Shops, falls Niederländisch nicht die Fallback-Sprache ist. Verwenden oder veröffentlichen Sie keinen Private Key in Rain, im Seitenquelltext oder in Browser-JavaScript.

shop.language ist die Lightspeed-Variable für die aktive Besuchersprache. Siehe die Rain-Variablenreferenz von Lightspeed und die Clerk.js-Konfigurationsreferenz von Clerk.io für die zugrundeliegenden Variablen und Konfigurationen.

Behalten Sie das Include weiterhin in beiden Dateien layouts > custom.rain und layouts > fixed.rain, unmittelbar vor dem schließenden </head>-Tag. fixed.rain deckt Checkout- und andere gesperrte Seiten ab, und Clerk.js muss dort für die Verkaufserfassung auf der Bestätigungsseite laufen.

Jede Seite darf nur einen Clerk.js-Loader und eine Clerk.io-Konfiguration haben. Entfernen oder ersetzen Sie statische Clerk.io-Konfigurationen in fixed.rain, custom.rain oder Tracking/Web Extras. Andernfalls kann ein statischer Key Clerk.io vor dem sprachspezifischen Key konfigurieren.

Jede Sprache prüfen #

Für jede konfigurierte Sprache:

1. Öffnen Sie eine Seite in dieser Sprache und kontrollieren Sie den gerenderten Quelltext. Stellen Sie sicher, dass der Clerk('config')-Key dem gewünschten, sprachspezifischen Public Key entspricht.

2. Überprüfen Sie, dass die jeweiligen Clerk.io-Elemente Ergebnisse aus dem Clerk.io-Store dieser Sprache laden.

3. Wo das Verkaufstracking relevant ist, geben Sie eine Testbestellung auf und prüfen Sie, ob der Verkauf im Store der jeweiligen Sprache getrackt wird.

Daten synchronisieren #

Die Datensynchronisierung verbindet Ihren Lightspeed-Store mit Clerk und ermöglicht Clerk den Zugriff auf Ihre Produkte, Bestellungen, Kunden und weitere Shopinformationen. So kann Clerk personalisierte Empfehlungen und Suchergebnisse auf Basis Ihrer tatsächlichen Shopdaten bereitstellen. Folgen Sie den Schritten im Sync Data guide, um die Datensynchronisierung einzurichten.