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 der Tracking-Skripte und die Synchronisierung Ihrer Daten.

Verbindung Ihres Shops #

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 eingeloggt 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 Store hinzufügen.

Tracking-Skripte installieren #

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

Besucher-Tracking #

1. Gehen Sie im 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.

Bestell-Tracking #

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

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

Daten synchronisieren #

Die Datensynchronisierung verbindet Ihren Lightspeed-Shop 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 echten Shopdaten bereitstellen. Folgen Sie den Schritten im Sync Data guide, um die Datensynchronisierung einzurichten.