Get Started

Bringen Sie Clerk in nur wenigen Schritten auf Ihrem Lightspeed-Shop zum Laufen. Diese Anleitung führt Sie durch das Verbinden Ihres Shops, das Installieren der Tracking-Skripte und das Synchronisieren Ihrer Daten.

Ihren Shop verbinden #

Nachdem Sie diese einfachen Schritte befolgt haben, können Sie Ihre Live Demo sehen, die Ihnen eine persönliche Übersicht gibt, wie Clerk in Ihrem Webshop funktionieren wird, 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 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 Shop hinzufügen.

Tracking-Skripte installieren #

Das Clerk-Tracking-Skript verwendet Lightspeed Liquid-Variablen, um Shop-Daten wie Währung und Produktkontext auszulesen. Deshalb muss das Skript in einer Theme-Datei platziert werden, in der Liquid verarbeitet wird.

Besucherverfolgung #

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

2. Öffnen Sie layouts > custom.rain.

3. Fügen Sie das folgende Skript am unteren Ende der Datei 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.

Die Warenkorb- und Dankeseiten 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 nur geladen, wenn das Skript auch dort eingefügt wird.

5. Öffnen Sie layouts > fixed.rain im selben Theme Editor.

6. Fügen Sie das gleiche Skript direkt vor dem schließenden </head>-Tag ein.

7. Klicken Sie auf Save.

Mehrere Sprachen #

Nutzen Sie dieses Setup, wenn ein Lightspeed eCom (C-Series) Shop Sprachpfade wie /nl/, /en/, /de/ und /fr/ verwendet und jede Sprache einen eigenen Clerk.io-Store benutzt.

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 die Keys clientseitig mit JavaScript zu wechseln. Ein browserseitiger Wechsel kann mit dem Laden von Clerk.js konkurrieren oder Clerk.io zuerst mit dem falschen Store initialisieren.

Ersetzen Sie in diesem Setup den regulären Besucherverfolgungs-Loader durch den folgenden Schnipsel. Ersetzen Sie jeden Platzhalter durch den passenden Public Key des jeweiligen Clerk.io-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 initiale niederländische Key ist die Fallback-Option. Ändern Sie ihn auf den Public Key der Standard-Sprache Ihres Shops, wenn Niederländisch nicht die Fallback-Sprache ist. Verwenden Sie keinen Private Key in Rain, Seitenquelltext oder im Browser-JavaScript und geben Sie ihn nicht preis.

shop.language ist die Lightspeed-Variable für die aktive Besucher-Sprache. Lesen Sie die Rain-Variablenreferenz von Lightspeed und die Clerk.js-Konfigurationsreferenz von Clerk.io für die zugrunde liegenden Variablen und Einstellungen.

Fügen Sie das Snippet sowohl zu layouts > custom.rain als auch zu layouts > fixed.rain direkt vor dem schließenden </head>-Tag hinzu. fixed.rain deckt den Checkout und andere besondere Seiten ab, und Clerk.js muss dort für die Verkaufsverfolgung 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 könnte eine statische Konfiguration Clerk.io vor der sprachspezifischen Konfiguration initialisieren.

Jede Sprache überprüfen #

Für jede konfigurierte Sprache:

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

2. Überprüfen Sie, ob die relevanten Clerk.io Elements die Ergebnisse aus dem Clerk.io-Store dieser Sprache laden.

3. Wo Verkaufsverfolgung relevant ist, führen Sie eine kontrollierte Testbestellung durch und stellen Sie sicher, dass der Verkauf im jeweiligen Sprach-Shop getrackt wird.

Bestellverfolgung #

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

2. Suchen Sie das Feld Tracking und fügen Sie den Clerk-Code zur Bestellverfolgung 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.

Falls Bestellungen weiterhin nicht getrackt werden #

Einige Lightspeed-Themes laden Clerk.js während des Checkouts nicht aus custom.rain und fixed.rain. Wenn Clerk.io bereits in beide Dateien eingefügt wurde und Bestellungen immer noch nicht getrackt werden, fügen Sie das Besucherverfolgungs-Skript auch zu Web Extras hinzu.

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

2. Fügen Sie das Besucherverfolgungs-Skript direkt über dem Clerk.io-Code zur Bestellverfolgung ein.

3. Klicken Sie auf Save.

Verwenden Sie diese Platzierung nur, wenn die Standard-Theme-Datei-Einrichtung keine Bestellungen trackt. Ob dies nötig ist, hängt vom aktiven Lightspeed-Theme ab.

Daten synchronisieren #

Die Datensynchronisation verbindet Ihren Lightspeed-Shop mit Clerk, sodass Clerk Zugriff auf Ihre Produkte, Bestellungen, Kunden und andere Shop-Informationen erhält. Dies ermöglicht Clerk, personalisierte Empfehlungen und Suchergebnisse auf Basis Ihrer tatsächlichen Shopdaten bereitzustellen. Folgen Sie den Schritten im Daten-Synchronisierungs-Guide, um die Datensynchronisation einzurichten.