Jeder (Webshop)

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 im Frontend eingefügt werden.

Diese Anleitung erklärt, wie Clerk auf einer Custom Platform mit Clerk.js installiert wird. Dies ist der empfohlene Ansatz, da dabei ein Großteil der aufwändigen Aufgaben wie Tracking und API-Aufrufe übernommen wird.

Wenn du Clerk.io lieber per API einrichten möchtest, lies stattdessen diesen Artikel.

Clerk.js ist eine schlanke Bibliothek, mit der Clerk über einfache HTML-Snippets im Quellcode eingerichtet werden kann. Clerk.js scannt die Seite nach Snippets mit der Klasse “clerk” und verwendet diese, um API-Aufrufe zu machen.

Nachfolgend siehst du die Schritte, die bei der Installation von Clerk durchlaufen werden.

1. Daten synchronisieren #

Zuerst müssen Daten eingespielt werden, damit die KI von Clerk.io deinen Webshop versteht und mit der Vorhersage von Ergebnissen beginnen kann.

Store erstellen #

Jede Clerk-Einrichtung wird in einem Store bei my.clerk.io konfiguriert. Dieser speichert alle hochgeladenen Daten und ermöglicht dir die Interaktion darüber mittels des Public API Keys.

Für mehrere Webshops oder Domains sollte jeweils ein eigener Store angelegt werden.

Du kannst deine Konfiguration auf neue Stores kopieren, nachdem der erste eingerichtet wurde.

Feeds erstellen #

Es gibt zwei Wege, wie du Daten deines Webshops an Clerk.io anbinden kannst.

Data Feeds #

Dies ist die Hauptdatenquelle vom Webshop zu Clerk. Die Spezifikation für die Feeds findest du hier.

Unsere Best Practices für das Erstellen der Feeds sind:

Sie sollten idealerweise mindestens einmal täglich auf deiner Seite aktualisiert werden.
Sie sollten unter einer URL gehostet werden, wo Clerk.io sie abrufen kann, z.B. https://awesomestore.com/feed/clerk.json
Die Feeds sollten immer alle verfügbaren Produkte und Kategorien enthalten, können aber auch Seiten (Blogbeiträge/Artikel) und Kundendaten enthalten.
Clerk nutzt Produktattribute für Suche, Filter und Design.
Beim ersten Import solltest du alle historischen Bestellungen einfügen. Danach können diese weggelassen werden, da Clerk sie in der Datenbank speichert.
Für Produkte kannst du neben den Pflichtfeldern beliebige weitere, für dein Geschäft relevante Attribute senden, wie Bewertungen, Farben, Labels, Splash-Images etc.
Standardmäßig importiert Clerk die Feeds mindestens einmal täglich.
Du kannst ein Zeitfenster von 1 Stunde (z.B. zwischen 2:59 und 3:59) einrichten, wenn der Import zu einer bestimmten Zeit laufen soll.

AI Integration #

Sollte deine Webshop-Plattform eine zugängliche API bieten, kannst du eine AI Integration verwenden, um Clerk.io direkt an diese API anzubinden. Lies den AI Integration Guide unter Ask Clerk.io, um mehr zu erfahren.

Realtime Sync verwenden #

Das ist optional, wird aber empfohlen.

Falls der Webshop Echtzeit-Updates erfordert, wie das Entfernen nicht vorrätiger Produkte oder das Aktualisieren von Preisen, kann die CRUD API genutzt werden, um Produkte zwischen den Feed-Imports hinzuzufügen, zu aktualisieren oder zu entfernen.

2. Verhalten tracken #

Die KI von Clerk.io lernt aus dem Verhalten der Kunden, etwa über Bestellungen und Website-Aktivität. Das Tracking dieses Verhaltens ist entscheidend für die Vorhersagegenauigkeit der KI sowie für die Anzeige der Statistiken, die die Wirksamkeit belegen.

Clerk.js installieren #

Clerk.io verfolgt Klicks, Suchen und Bestellungen im Frontend aus drei wichtigen Gründen:

Damit die KI in Echtzeit aus den Bestellungen das Kundenverhalten lernt.
Analytics, die zeigen, wie Bestellungen durch Clerk gesteigert werden.
Personalisierung verschiedener Recommendations auf der gesamten Website.

Das Clerk.js-Skript sollte zusammen mit deinen anderen Skripten im <head>-Abschnitt eingefügt und mit dem Public API Key aus my.clerk.io konfiguriert werden.

Dadurch wird die Bibliothek geladen, die cookielose, anonyme Besucher-IDs generiert und Käufe für 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 #

Nutze Clerk Context, um Clerk.js mitzuteilen, welches Produkt, welche Kategorie oder welche Seite vom Besucher gerade betrachtet wird. Dies ermöglicht personalisierte Produktvorschläge und hilft Chat zu verstehen, welche Produktseite oder Kategorie angesehen wird. Du kannst auch den Warenkorb-Kontext an Chat übergeben, damit dieser weiß, was sich im Warenkorb befindet.

Füge das folgende Snippet der Seitentemplate hinzu, nachdem Clerk.js geladen wurde. Ersetze die Beispielwerte durch die jeweiligen Produkt-, Kategorie- oder Seiten-IDs, und verwende null, wenn ein Kontext-Typ nicht relevant ist.

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

Sales-Tracking hinzufügen #

Dies sollte auf deiner Bestellbestätigungsseite eingebunden werden. Wenn eine Bestellung aufgegeben wird, sendet Clerk.js mittels dieses Snippets einen API-Aufruf mit den Bestelldaten, einschließlich der vom Besucher zuvor geklickten Produkte in dieser Session.

Stelle sicher, dass du die Platzhalter aktualisierst, um die echten Daten aus den Bestellungen zu verwenden.

 <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 protokolliert außerdem von Besuchern angesehene Produkte, um Personalisierungen in bestimmten Bannern zu ermöglichen.

Wenn du Cross-Sell- und/oder Alternativprodukte auf deinen Produktdetailseiten einsetzt, nutzt Clerk diese, um die angeschauten Produkte zu erfassen.

Falls nicht, solltest du dieses Snippet auf der Produktdetailseite einbinden, um ebenfalls die Produktansicht zu erfassen:

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

3. Ergebnisse visualisieren #

Bei Verwendung von Clerk.js kann das Design auf zwei Arten gehandhabt werden:

Gehostet in my.clerk.io mittels unseres Design Editors oder von Liquid code.
Im eigenen Quellcode als Embedded Results gehostet

Clerk.io Design Editor showing a recommendation design

Hosting in Clerk.io #

Das Hosting der Designs in my.clerk.io bietet die meiste Flexibilität, da du Designs, Logiken und Filter ändern kannst, ohne nach dem Setup den Code im Shop anzupassen. Nachteil ist, dass die Designs pro Store verwaltet werden.

Ergebnisse einbetten #

Beim Hosting im Quellcode hast du die Freiheit, Designs über mehrere Stores hinweg zu teilen. Hier entfällt allerdings die Möglichkeit, unser Element-System zur Anpassung der Ergebnisse zu nutzen.

4. Elemente hinzufügen #

Dies geschieht mit Snippets, die zu deinem Element gehören.

Im Frontend einfügen #

Um Clerk-Ergebnisse einzubinden, wähle ein Element in my.clerk.io aus, konfiguriere ein gewünschtes Design und kopiere das Snippet in die entsprechende Seite.

Clerk.js durchsucht den Quellcode nach Snippets mit der Klasse clerk und nutzt die data-Attribute für API-Aufrufe.

Dabei werden die Einstellungen deines Elements wie API-Endpunkt/Elementlogik, Design, Produktanzahl usw. referenziert, und es wird ein vollständiger HTML-Block zurückgegeben, der ins Snippet eingefügt wird.

Konfiguration #

Einige Snippets benötigen zusätzliche Daten wie Produkt-IDs oder Kategorie-ID, die je nach der Logik deines Shops für die Datenermittlung konfiguriert werden sollten.

Ein Beispiel ist das Best Alternatives Recommendations-Snippet, das eine Produkt-ID verlangt:

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

Andere erfordern nur das Einfügen des Snippets mit einigen kleineren Konfigurationsoptionen bzgl. des Verhaltens.

Ein Beispiel ist das Instant Search-Snippet, das einen CSS-Selektor für das Sucheingabefeld sowie die Zahl 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 sind neue Stores bei Clerk schon mit unseren Best Practices als einzelne Element-Blöcke vorkonfiguriert, sodass der Einstieg leicht fällt.

Das Snippet variiert je nach für das Element gewählter Produktlogik, sodass du jederzeit sehen kannst, welche data-Attribute konfiguriert werden müssen.

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.