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.

Shop verbinden #

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 funktioniert, bevor Sie den Rest des Systems einrichten.

Shop hinzufügen #

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

1. Tragen 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 nutzt 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 Speichern.

Bestell-Tracking #

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

2. Finden Sie das Feld Tracking 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 Speichern.

Daten synchronisieren #

Durch das Synchronisieren der Daten wird Ihr Lightspeed-Shop mit Clerk verbunden, sodass Clerk Zugriff auf Ihre Produkte, Bestellungen, Kunden und andere Shop-Informationen erhält. Das ermöglicht Clerk, personalisierte Empfehlungen und Suchergebnisse auf Basis Ihrer tatsächlichen Shop-Daten bereitzustellen. Befolgen Sie die Schritte in der Sync Data Anleitung, um die Datensynchronisierung einzurichten.