Get Started

Wenn Clerk keine vorgefertigte Erweiterung oder Integration für eine bestimmte Webshop-Plattform hat, bezeichnen wir dies als custom platform.

Der größte Unterschied besteht darin, dass custom platforms mit einem Data Feed synchronisiert werden sollten und die Clerk.io-Ergebnisse ins Frontend eingefügt werden.

In dieser Anleitung wird erklärt, wie man Clerk auf einer custom platform mit Clerk.js installiert. Dies ist die empfohlene Vorgehensweise, da sie viele der aufwändigen Aufgaben im Hinblick auf Tracking und API-Aufrufe übernimmt.

Wenn du es vorziehst, Clerk.io über unsere API einzurichten, sieh dir stattdessen diesen Artikel an.

Clerk.js ist eine schlanke Bibliothek, mit der Clerk einfach per HTML-Snippet im Quellcode eingerichtet werden kann. Clerk.js durchsucht die Seite nach allen Snippets mit der Klasse „clerk“ und nutzt diese, um API-Aufrufe zu machen.

Hier sind die Schritte, die du beim Installieren von Clerk durchlaufen wirst.

1. Daten synchronisieren #

Zuerst musst du Daten eingeben, damit die KI von Clerk.io deinen Webshop versteht und mit der Prognose von Ergebnissen beginnen kann.

Store erstellen #

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

Wenn du mehrere Webshops oder Domains einrichten möchtest, sollte jeder seinen eigenen Store haben.

Du kannst deine Konfiguration auf neue Stores kopieren, nachdem die erste Einrichtung abgeschlossen ist.

Feeds erstellen #

Es gibt zwei Möglichkeiten, deine Webshop-Daten mit Clerk.io zu verbinden.

Data Feeds #

Dies ist die Hauptdatenquelle vom Webshop zu Clerk. Sieh dir die Spezifikation für die Feeds hier an.

Das sind unsere Best Practices zur Erstellung der Feeds:

• Sie sollten idealerweise einmal täglich von deiner Seite aktualisiert werden.
• Sie sollten unter einer URL gehostet werden, damit Clerk.io’s Importer sie abrufen kann, z.B. https://awesomestore.com/feed/clerk.json
• Mindestens sollten die Feeds immer alle verfügbaren products und categories enthalten, können aber auch pages (Blogposts / Artikel) und customer-Daten enthalten.
• Clerk verwendet Produktattribute zum Suchen, Filtern und für das Styling.
• Beim ersten Import solltest du alle historischen Bestellungen einbeziehen. Nach dem ersten Import können diese entfernt werden, da Clerk sie in der Datenbank speichert.
• Für products kannst du neben den erforderlichen Attributen beliebige weitere verschicken, die für dein Geschäft wichtig sind, wie reviews, colors, labels, splash-images usw.
• Standardmäßig importiert Clerk die Feeds mindestens einmal pro Tag.
• Du kannst ein Zeitfenster innerhalb einer Stunde konfigurieren (z.B. zwischen 2:59-3:59), wenn der Importer zu einer bestimmten Zeit laufen soll.

AI Integration #

Falls deine Webshop-Plattform eine API bereitstellt, auf die du zugreifen kannst, kannst du eine AI Integration nutzen, um Clerk.io direkt mit der API zu verbinden. Lies die AI Integration-Anleitung unter Ask Clerk.io, um mehr zu erfahren.

Echtzeit-Synchronisierung nutzen #

Das ist optional, aber empfohlen.

Wenn der Webshop Echtzeit-Updates benötigt, z.B. um ausverkaufte Produkte zu entfernen oder Preise zu aktualisieren, kann unsere CRUD API verwendet werden, um Produkte zwischen Feed-Importen hinzuzufügen, zu aktualisieren oder zu entfernen.

2. Verhalten tracken #

Die KI von Clerk.io lernt das Kundenverhalten durch Bestellungen und Aktivitäten auf der Website. Dieses Tracking ist entscheidend, damit die KI genaue Vorhersagen machen und die Statistiken anzeigen kann, die beweisen, wie gut die Lösung funktioniert.

Clerk.js installieren #

Clerk.io trackt Klicks, Suchanfragen und Bestellungen vom Frontend aus aus drei wichtigen Gründen:

• Damit die KI durch Bestellungen in Echtzeit das Verhalten der Kunden lernen kann.
• Analysen, die zeigen, wie Bestellungen durch Clerk verbessert werden.
• Personalisierung verschiedener Recommendations auf der Seite.

Das Clerk.js-Script sollte zusammen mit deinen anderen Scripts in den <head>-Bereich eingefügt und mit dem Public API Key konfiguriert werden, der in my.clerk.io zu finden ist.

Dadurch wird die Bibliothek geladen, die cookieless, anonyme Besucher-IDs generiert und Klicks auf alle von Clerk angezeigten Produkte in den Snippets 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 #

Mit Clerk Context kannst du Clerk.js mitteilen, welches Produkt, welche Kategorie oder Seite der Besucher sieht. Dies ermöglicht personalisierte Produktempfehlungen und hilft Chat zu verstehen, welche Produktseite oder Kategorie angesehen wird. Außerdem kannst du den Warenkorb-Kontext an Chat übergeben, damit erkannt wird, welche Produkte im Warenkorb sind.

Füge das folgende Snippet nach Clerk.js in das Seitentemplate ein. Ersetze die Beispielwerte durch die passenden Produkt-, Kategorie- oder Seitenkennungen und verwende null, wenn ein Kontext-Typ nicht zutrifft.

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

Sales-Tracking hinzufügen #

Dies sollte auf deiner Bestellbestätigungsseite eingefügt werden. Wann immer eine Bestellung aufgegeben wird, verwendet Clerk.js das Snippet, um einen API-Aufruf mit den Bestelldaten zu machen, einschließlich der vom Besucher in der Session vor der Bestellung geklickten Produkte.

Achte darauf, die Platzhalter so zu aktualisieren, dass die korrekten Daten aus den Bestellungen geholt werden.

 <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 loggt außerdem die vom Besucher angesehenen Produkte, z.B. für die Personalisierung in bestimmten Bannern.

Wenn du Cross-Sell- und/oder Alternative-Produkte auf deinen Produktdetailseiten verwendest, nutzt Clerk diese, um die vom Besucher angesehenen Produkte zu loggen.

Andernfalls musst du dieses Snippet ebenfalls auf der Produktdetailseite einfügen, um die Produktansichten zu tracken:

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

3. Ergebnisse visualisieren #

Beim Einsatz von Clerk.js können Designs auf zwei Arten gepflegt werden:

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

• Gehostet im eigenen Quellcode als eingebettete Ergebnisse

In Clerk.io hosten #

Das Hosting in my.clerk.io bietet die größte Flexibilität, da sich Design, Logik und Filter nach der Einrichtung jederzeit ändern lassen, ohne den Code vor Ort anpassen zu müssen. Nachteil: Designs werden pro Store verwaltet.

Ergebnisse einbetten #

Beim Hosting im eigenen Quellcode können Designs storesübergreifend geteilt werden. Nachteil: Du kannst unser Element-System nicht nutzen, um Änderungen an den Ergebnissen vorzunehmen.

4. Elemente hinzufügen #

Dies erfolgt per Snippet, das deinem Element zugeordnet ist.

Im Frontend einfügen #

Um Clerk-Ergebnisse einzufügen, wähle in my.clerk.io ein Element aus, konfiguriere es mit einem Design deiner Wahl und kopiere das Snippet auf die Seite, auf der die Ergebnisse angezeigt werden sollen.

Clerk.js durchsucht dein Quellcode nach allen Snippets mit der Klasse clerk und verwendet die data-Attribute, um API-Aufrufe zu machen.

Dabei werden deine Element-Einstellungen wie API-Endpunkt, Element-Logik, Design, Produktanzahl usw. referenziert und ein vollständiger HTML-Block zurückgegeben, der im Snippet eingefügt wird.

Konfigurieren #

Manche Snippets erfordern zusätzliche Daten wie Produkt-IDs oder Kategorie-ID, die auf Basis deiner Webshop-Logik für die Datenbeschaffung konfiguriert werden müssen.

Ein Beispiel ist das Best Alternatives Recommendations-Snippet, das eine Produkt-ID im Snippet benötigt:

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

Andere benötigen lediglich das Einfügen des Snippets und ggf. kleinere Konfigurationsoptionen zum Verhalten.

Ein Beispiel ist das Instant Search-Snippet, das einen CSS-Selektor für das Search-Eingabefeld sowie die Anzahl der 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-Blocks erstellt, um den Einstieg zu erleichtern.

Das Snippet ändert sich je nach für das Element gewählter Produktlogik, sodass du immer sehen kannst, welche data-Attribute für dich zur Konfiguration erforderlich sind.