Jeder (Webshop)

Get Started

Clerk.js

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 mit einem Data Feed synchronisiert werden sollten und Clerk.io-Ergebnisse in das Frontend eingefügt werden.

Diese Anleitung erklärt, wie Clerk auf einer Custom Platform mit Clerk.js installiert wird. Dies ist die empfohlene Vorgehensweise, da damit ein Großteil der aufwendigen Tätigkeiten hinsichtlich Tracking und API-Aufrufen übernommen wird.

Wenn du Clerk.io lieber über unsere 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 durchsucht die Seite nach allen Snippets mit der Klasse „clerk“ und verwendet diese, um API-Aufrufe zu tätigen.

Im Folgenden findest du die Schritte, die du bei der Installation von Clerk durchläufst.

1. Daten synchronisieren #

Zuerst musst du Daten importieren, damit die KI von Clerk.io deinen Webshop versteht und beginnen kann, Ergebnisse vorherzusagen.

Store erstellen #

Jede Clerk-Einrichtung wird in einem Store in my.clerk.io konfiguriert. Dieser enthält alle hochgeladenen Daten und ermöglicht die Interaktion über seinen 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 du das erste Setup durchgeführt hast.

Feeds erstellen #

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

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

  • Sie sollten idealerweise einmal pro Tag auf deiner Seite aktualisiert werden.
  • Sie sollten unter einer URL gehostet werden, von der der Importer von Clerk.io sie abrufen kann, z. B. https://awesomestore.com/feed/clerk.json
  • Grundsätzlich sollten die Feeds immer alle verfügbaren Produkte und Kategorien enthalten, können aber auch Pages (Blogbeiträge / Artikel) und Kundendaten enthalten.
  • Clerk verwendet Produktattribute für Suche, Filterung und Styling.
  • Beim ersten Import solltest du alle historischen Bestellungen einschließen. Nach dem ersten Import können diese entfernt werden, da Clerk sie in der Datenbank behält.
  • Für Produkte kannst du neben den Pflichtangaben auch andere Attribute übermitteln, die für dein Geschäft wichtig sind, wie Bewertungen, Farben, Labels, Splash-Images usw.
  • Standardmäßig importiert Clerk die Feeds mindestens einmal am Tag.
  • Du kannst ein Zeitfenster von 1 Stunde konfigurieren (z. B. zwischen 2:59-3:59), wenn du möchtest, dass der Importer zu einer bestimmten Zeit läuft.

Realtime Sync verwenden #

Dies ist optional, aber empfohlen.

Wenn der Webshop Echtzeit-Updates benötigt, wie das Entfernen nicht vorrätiger Produkte oder die Aktualisierung der Preise, 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 über das Kundenverhalten durch Bestellungen und Website-Aktivitäten. Das Tracking dieses Verhaltens ist entscheidend, damit die KI genaue Vorhersagen treffen und die Statistiken anzeigen kann, die belegen, wie gut sie funktioniert.

Clerk.js installieren #

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

  • Ermöglicht der KI, in Echtzeit aus den Bestellungen über das Kundenverhalten zu lernen.
  • Analytics, die zeigen, wie Bestellungen durch Clerk verbessert werden.
  • Personalisierung verschiedener Recommendations auf der gesamten Website.

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

Dies lädt die Bibliothek, die cookielose, anonyme Besucher-IDs generiert, und trackt Klicks auf alle Produkte, die von Clerk durch die Snippets angezeigt werden.

<!-- 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 -->

Sales-Tracking hinzufügen #

Dies sollte auf deiner Bestellbestätigungsseite eingefügt werden. Immer wenn eine Bestellung aufgegeben wird, nutzt Clerk.js das Snippet, um einen API-Aufruf mit den Bestelldaten zu machen, einschließlich der Produkte, auf die der Besucher in der Session vor der Bestellung geklickt hat.

Stelle sicher, dass die Platzhalter so angepasst werden, dass die korrekten Daten aus den Bestellungen übernommen 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 protokolliert außerdem die von Besuchern angesehenen Produkte, um diese beispielsweise bei der Personalisierung in bestimmten Bannern zu nutzen.

Wenn du Cross-Sell- und/oder Alternative Products auf deinen Produktdetailseiten verwendest, nutzt Clerk diese, um protokollierte Produktansichten von Besuchern zu erfassen.

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

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

3. Ergebnisse visualisieren #

Beim Einsatz von Clerk.js kann das Design auf zwei Arten gehandhabt werden:

In Clerk.io hosten #

Das Hosting von Designs in my.clerk.io bietet die größte Flexibilität, da du das Design, die Logik und die Filter nach dem Setup ohne Änderungen am Code der Seite anpassen kannst. Der Nachteil ist, dass die Designs pro Store verwaltet werden.

Ergebnisse einbetten #

Das Hosting von Designs im eigenen Quellcode ermöglicht, Designs über mehrere Stores hinweg zu teilen. Nachteilig ist, dass du unser Element-System nicht nutzen kannst, um Änderungen an den Ergebnissen vorzunehmen.

4. Snippets hinzufügen #

Dies geschieht mit Snippets, die deinem Element zugeordnet sind.

Im Frontend einfügen #

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

Clerk.js durchsucht den Quellcode nach Snippets mit der Klasse clerk und verwendet die Data-Attribute, um API-Aufrufe zu tätigen.

Es verweist auf deine Element-Einstellungen einschließlich des API-Endpunkts/der Element-Logik, Design, Anzahl zurückzugebender 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 entsprechend der Logik deines Webshops zum Datenabruf konfiguriert werden sollten.

Ein Beispiel dafür ist das Best Alternatives Recommendations-Snippet, das eine Produkt-ID als Ergänzung im Snippet benötigt:

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

Andere Snippets müssen einfach auf der Seite eingefügt werden, mit wenigen Konfigurationsmöglichkeiten hinsichtlich ihres Verhaltens.

Ein Beispiel ist das Instant Search Snippet, das einen CSS-Selektor für das Suchfeld sowie 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 sind in neuen Stores in Clerk bereits unsere Best Practices als einzelne Element-Blocks angelegt, sodass der Start besonders einfach ist.

Das Snippet ändert sich je nach Product Logic, die für das Element gewählt wurde, sodass du immer sehen kannst, welche Data-Attribute für die Konfiguration erforderlich sind.

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