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 von Tracking-Skripten und das Synchronisieren Ihrer Daten.

Verbinden Sie Ihren Shop #

Nachdem Sie diese einfachen Schritte befolgt haben, können Sie Ihre Live Demo sehen, die Ihnen einen persönlichen Überblick darüber gibt, wie Clerk in Ihrem Webshop funktionieren wird – 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 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 Shopdaten wie Währung und Produktkontext auszulesen. Deshalb 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. Öffnen Sie layouts > custom.rain.

3. Fügen Sie das folgende Skript am 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 Danke-Seiten in Lightspeed verwenden eine separate Theme-Datei namens fixed.rain. Diese Datei übernimmt keine Skripte von custom.rain, daher wird Clerk.js auf diesen Seiten nicht geladen, sofern das Skript dort nicht ebenfalls 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.

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.

Falls Bestellungen weiterhin nicht verfolgt 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 verfolgt werden, fügen Sie das Besucher-Tracking-Skript ebenfalls zu Web Extras hinzu.

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

2. Fügen Sie das Visitor Tracking Script direkt oberhalb des Clerk.io-Bestelltracking-Codes ein.

3. Klicken Sie auf Save.

Verwenden Sie diese Platzierung nur, wenn mit der Standardskripteinbindung in den Theme-Dateien keine Bestellungen verfolgt werden. Ob dies erforderlich ist, hängt vom aktiven Lightspeed-Theme ab.

Daten synchronisieren #

Die Datensynchronisierung verbindet Ihren Lightspeed-Shop mit Clerk, sodass Clerk auf Ihre Produkte, Bestellungen, Kunden und andere Shop-Informationen zugreifen kann. So kann Clerk personalisierte Empfehlungen und Suchergebnisse auf Basis Ihrer echten Shopdaten bereitstellen. Folgen Sie den Schritten im Daten-Sync-Guide, um die Datensynchronisation einzurichten.