Get Started

Wenn Clerk keine vorgefertigte Erweiterung oder Integration für eine bestimmte Webshop-Plattform hat, bezeichnen wir diese als Custom Platform.

Der größte Unterschied besteht darin, dass Custom Platforms über einen Data Feed synchronisieren und Clerk.io-Ergebnisse in das Frontend einfügen sollten.

Diese Anleitung erklärt, wie Clerk auf einer Custom Platform mit Clerk.js installiert wird. Dies ist die empfohlene Vorgehensweise, da sie einen Großteil der Arbeit bei Tracking und API-Calls übernimmt.

Wenn Sie Clerk.io lieber über unsere API einrichten möchten, lesen Sie diesen Artikel.

Clerk.js ist eine schlanke Bibliothek, mit der Clerk mithilfe einfacher HTML-Snippets im Quellcode eingerichtet werden kann. Clerk.js durchsucht die Seite nach beliebigen Snippets mit der Klasse “clerk” und nutzt diese, um API-Calls durchzuführen.

Im Folgenden finden Sie die Schritte, die Sie bei der Installation von Clerk durchlaufen.

1. Daten synchronisieren #

Zuerst müssen Sie Daten importieren, damit die KI von Clerk.io Ihren Webshop versteht und mit Vorhersagen beginnen kann.

Store erstellen #

Jede Clerk-Installation wird in einem Store in my.clerk.io konfiguriert. Dieser enthält alle von Ihnen hochgeladenen Daten und ermöglicht Ihnen die Interaktion damit über den Public API Key.

Wenn Sie mehrere Webshops oder Domains einrichten müssen, sollte jeder einen eigenen Store haben.

Sie können Ihre Konfiguration auf neue Stores kopieren, nachdem Sie das erste Setup abgeschlossen haben.

Feeds erstellen #

Es gibt zwei Möglichkeiten, Ihre Webshop-Daten an Clerk.io anzubinden.

Data Feeds #

Dies ist die Hauptdatenquelle zwischen Webshop und Clerk. Die Spezifikation für die Feeds finden Sie hier.

Das sind unsere Best Practices für die Erstellung der Feeds:

• Sie sollten idealerweise einmal täglich auf Ihrer Seite aktualisiert werden.
• Sie sollten unter einer URL gehostet werden, unter der der Clerk.io-Importer darauf zugreifen kann, z. B. https://awesomestore.com/feed/clerk.json
• Die Feeds sollten immer alle verfügbaren Produkte und Kategorien enthalten, können aber auch Pages (Blogposts/Artikel) und Kundendaten umfassen.
• Clerk nutzt Produktattribute zum Suchen, Filtern und Stylen.
• Beim ersten Import sollten alle historischen Bestellungen enthalten sein. Nach dem ersten Import können diese entfernt werden, da Clerk diese in der Datenbank behält.
• Für Produkte können Sie neben den erforderlichen beliebige weitere Attribute senden, die für Ihr Geschäft relevant sind, wie Reviews, Farben, Labels, Splash-Images etc.
• Standardmäßig importiert Clerk die Feeds mindestens einmal am Tag.
• Sie können ein Zeitfenster von 1 Stunde konfigurieren (z.B. zwischen 2:59-3:59), wenn der Importer zu einer bestimmten Zeit laufen soll.

AI-Integration #

Wenn Ihre Webshop-Plattform eine API zur Verfügung stellt, auf die Sie Zugriff haben, können Sie eine AI-Integration verwenden, um Clerk.io direkt mit der API zu verbinden. Lesen Sie die AI-Integration-Anleitung unter Ask Clerk.io, um mehr zu erfahren.

Realtime Sync verwenden #

Dies ist optional, aber empfohlen.

Wenn der Webshop Aktualisierungen in Echtzeit benötigt, wie das Entfernen von ausverkauften Produkten oder das Aktualisieren von Preisen, kann unsere CRUD API verwendet werden, um Produkte zwischen den Feed-Imports hinzuzufügen, zu aktualisieren oder zu entfernen.

2. Verhalten tracken #

Die KI von Clerk.io lernt das Kundenverhalten über Bestellungen und Website-Aktivitäten. Das Tracking dieses Verhaltens ist unerlässlich, damit die KI genaue Vorhersagen machen kann und um die Statistiken darzustellen, die belegen, wie gut sie funktioniert.

Clerk.js installieren #

Clerk.io trackt Klicks, Suchen und Bestellungen vom Frontend aus aus drei Hauptgründen:

• Die KI lernt in Echtzeit das Kundenverhalten durch Bestellungen.
• Analytik zeigt, wie Bestellungen durch Clerk verbessert werden.
• Personalisierung verschiedener Empfehlungen auf der Seite.

Das Clerk.js-Skript sollte mit Ihren anderen Scripts im <head>-Bereich eingefügt und mit dem Public API Key aus my.clerk.io konfiguriert werden.

Dadurch wird die Bibliothek geladen, die cookieless, anonyme Besucher-IDs generiert und Klicks auf alle von Clerk über Snippets angezeigten Produkte trackt.

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<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_api_key'
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Kontext hinzufügen #

Verwenden Sie Clerk Context, um Clerk.js mitzuteilen, welches Produkt, welche Kategorie oder welche Seite der Besucher betrachtet. Dies kann Produktempfehlungen personalisieren und Chat helfen zu verstehen, welche Produktseite oder Kategorie angesehen wird. Sie können auch den Warenkorbkontext an Chat übergeben, damit dieser versteht, welche Produkte sich im Warenkorb befinden.

Fügen Sie das folgende Snippet in das Seitentemplate ein, nachdem Clerk.js geladen wurde. Ersetzen Sie die Beispielwerte durch die entsprechenden Produkt-, Kategorie- oder Seiten-IDs und verwenden Sie null, wenn ein Kontext-Typ nicht zutrifft.

<script>
  Clerk('context', {
    product: 123,
    category: 456,
    page: 789
  });
</script>

Sales-Tracking hinzufügen #

Dies sollte auf Ihrer Order-Success-Seite hinzugefügt werden. Sobald eine Bestellung aufgegeben wurde, verwendet Clerk.js das Snippet, um einen API-Call zu tätigen, der die Bestellinformationen enthält, einschließlich der Produkte, auf die der Besucher in der Session vor der Bestellung geklickt hat.

Stellen Sie sicher, dass Sie die Platzhalter aktualisieren, um die richtigen Daten aus den Bestellungen zu übernehmen.

 <span
    class="clerk"
    data-api="log/sale"
    data-sale="123456"
    data-email="luke@skywalker.me"
    data-customer="7890"
    data-products='[{"id": 12, "quantity": 1, "price": 99.95}, {"id": 54, "quantity": 2, "price": 9.50}...]'>
</span>

Clerk.io zeichnet auch die vom Besucher angesehenen Produkte auf, um sie in bestimmten Bannern zu personalisieren.

Wenn Sie Cross-Sell- und/oder Alternative Produkte auf Ihren Produktdetailseiten verwenden, wird Clerk diese nutzen, um die vom Besucher angesehenen Produkte zu erfassen.

Falls nicht, muss dieses Snippet auf der Produktdetailseite hinzugefügt werden, um die Produktaufrufe ebenfalls zu erfassen:

<span 
    class="clerk"
    data-api="log/product"
    data-product="INSERT_PRODUCT_ID">
</span>

3. Ergebnisse visualisieren #

Bei der Verwendung von Clerk.js können Designs auf zwei Arten gehandhabt werden:

• Gehostet in my.clerk.io mit unserem Design Editor oder Liquid-Code.

• Gehostet im eigenen Quellcode als eingebettete Ergebnisse.

Hosting in Clerk.io #

Das Hosting von Designs in my.clerk.io bietet die größte Flexibilität, da Sie Designs, Logiken und Filter ändern können, ohne nach Einrichtung Ihren Onsite-Code zu ändern. Der Nachteil ist, dass Designs pro Store verwaltet werden.

Ergebnisse einbetten #

Das Hosting der Designs im eigenen Quellcode gibt Ihnen die Freiheit, Designs über mehrere Stores hinweg zu teilen. Der Nachteil ist, dass Sie unser Element-System nicht nutzen können, um Änderungen an den Ergebnissen vorzunehmen.

4. Elemente hinzufügen #

Dies erfolgt mit Snippets, die Ihrem Element zugeordnet sind.

Im Frontend einfügen #

Um Clerk-Ergebnisse einzufügen, wählen Sie ein Element in my.clerk.io, konfigurieren es mit einem von Ihnen erstellten Design und kopieren das Snippet auf eine Seite, auf der Ergebnisse angezeigt werden sollen.

Clerk.js durchsucht den Quellcode nach Snippets mit der Klasse clerk und verwendet die Data-Attribute, um API-Calls abzusetzen.

Es referenziert Ihre Element-Einstellungen einschließlich API-Endpunkt/Elementlogik, Design, Anzahl der zurückzugebenden Produkte usw. und gibt einen vollständigen HTML-Block zurück, der in das Snippet eingefügt wird.

Konfigurieren #

Einige Snippets erfordern zusätzliche Daten wie Produkt-IDs oder Kategorie-ID, die je nach Ihrer Webshop-Logik zum Abrufen der Daten konfiguriert werden sollten.

Ein Beispiel ist das Best Alternatives Recommendations-Snippet, für das eine Produkt-ID in das Snippet eingefügt werden muss:

<!--Best Alternatives Recommendations-->
<span 
    class="clerk"
    data-template="@product-page-alternatives"
    data-products="[INSERT_PRODUCT_ID]">
</span>

Andere erfordern lediglich, dass das Snippet auf der Seite eingefügt wird, mit einigen kleineren Konfigurationsoptionen, wie es sich verhalten soll.

Ein Beispiel ist das Instant Search-Snippet, das einen CSS-Selector für das Suchfeld und die Anzahl der anzuzeigenden Vorschläge und Kategorien benötigt:

<!--Instant Search-->
<span 
    class="clerk"
    data-template="@live-search"
    data-instant-search="INSERT_SEARCH_INPUT_CSS_SELECTOR_HERE"
    data-instant-search-suggestions="6"
    data-instant-search-categories="6"
    data-instant-search-pages="6"
    data-instant-search-positioning="right">
</span>

Standardmäßig werden neue Stores in Clerk bereits mit unseren Best Practices als einzelne Element-Blöcke erstellt, wodurch der Einstieg erleichtert wird.

Das Snippet ändert sich je nach gewählter Produktlogik für das Element, sodass Sie immer sehen können, welche Data-Attribute für die Konfiguration erforderlich sind.