Jeder (Webshop)

Get Started

Clerk.js

Wenn Clerk keine vorgefertigte Erweiterung oder Integration für eine bestimmte Webshop-Plattform hat, sprechen wir von einer benutzerdefinierten Plattform.

Der größte Unterschied besteht darin, dass benutzerdefinierte Plattformen mit einem Data Feed synchronisiert werden sollten und die Clerk.io-Ergebnisse in das Frontend eingefügt werden müssen.

Diese Anleitung erklärt, wie Clerk auf einer benutzerdefinierten Plattform mit Clerk.js installiert wird. Dies ist der empfohlene Ansatz, da viele Aufgaben wie Tracking und API-Aufrufe damit automatisch erledigt werden.

Falls du Clerk.io lieber über unsere API einrichten möchtest, lies stattdessen diesen Artikel.

Clerk.js ist eine leichtgewichtige Bibliothek, mit der Clerk mithilfe einfacher HTML-Snippets im Quellcode installiert werden kann. Clerk.js durchsucht die Seite nach Snippets mit der Klasse „clerk“ und verwendet diese, um API-Aufrufe zu tätigen.

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

1. Daten synchronisieren #

Zuerst müssen die Daten importiert werden, damit die KI von Clerk.io deinen Webshop versteht und Ergebnisse vorhersagen kann.

Store erstellen #

Jede Clerk-Konfiguration wird in einem Store auf my.clerk.io eingerichtet. Dieser enthält alle hochgeladenen Daten und ermöglicht die Interaktion per Public API Key.

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

Du kannst deine Konfiguration auf neue Stores kopieren, nachdem du das erste Setup durchgeführt hast.

Feeds erstellen #

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

Das sind unsere Best Practices zur Erstellung der Feeds:

  • Sie sollten idealerweise einmal täglich bei dir aktualisiert werden.
  • Sie sollten unter einer URL gehostet werden, von der der Clerk.io-Importer sie abrufen kann, z. B. https://awesomestore.com/feed/clerk.json
  • Als Minimum sollten die Feeds immer alle verfügbaren Produkte und Kategorien enthalten, können aber auch Seiten (Blog-Beiträge/Artikel) und Kundendaten umfassen.
  • Clerk verwendet Produktattribute für Suche, Filterung und Styling.
  • Beim ersten Import sollten alle historischen Bestellungen enthalten sein. Nach dem ersten Import können diese entfernt werden, da Clerk sie in der Datenbank speichert.
  • Für Produkte können neben den erforderlichen auch alle anderen Attribute mitgesendet werden, die wichtig für dein Geschäft sind, wie Bewertungen, Farben, Labels, Splash-Bilder usw.
  • Standardmäßig importiert Clerk die Feeds mindestens einmal am Tag.
  • Du kannst ein Zeitfenster von einer Stunde konfigurieren (z. B. zwischen 2:59–3:59), wenn der Importer zu einer bestimmten Zeit laufen soll.

Realtime Sync nutzen #

Das ist optional, aber empfohlen.

Falls der Webshop Echtzeit-Updates benötigt, wie das Entfernen ausverkaufter Produkte oder die Aktualisierung der Preise, kann unsere CRUD API genutzt werden, um zwischen den Feed-Importen Produkte hinzuzufügen, zu aktualisieren oder zu entfernen.

2. Verhalten tracken #

Die KI von Clerk.io lernt das Verhalten der Kunden durch Bestellungen und Website-Aktivitäten. Dieses Tracking ist entscheidend, damit die KI genaue Vorhersagen treffen und die Statistiken anzeigen kann, die die Wirksamkeit belegen.

Clerk.js installieren #

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

  • Ermöglichen, dass die KI in Echtzeit aus den Bestellungen das Kundenverhalten lernt.
  • Analysen, die zeigen, wie Bestellungen durch Clerk verbessert werden.
  • Personalisierung verschiedener Recommendations über die Website hinweg.

Das Clerk.js-Skript sollte mit deinen anderen Skripten im <head>-Bereich eingebunden und mit dem Public API Key aus my.clerk.io konfiguriert werden.

Dadurch wird die Bibliothek geladen, die cookielose, anonyme Besucher-IDs generiert und Klicks auf alle von Clerk angezeigten Produkte über die Snippets hinweg 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 -->

Sales-Tracking hinzufügen #

Dies sollte auf deiner Bestellbestätigungsseite eingebunden werden. Immer wenn eine Bestellung abgeschlossen wird, nutzt Clerk.js das Snippet, um einen API-Aufruf mit den Bestelldaten zu senden; darin ist auch enthalten, was der Besucher in der Sitzung vor der Bestellung angeklickt hat.

Stelle sicher, die Platzhalter so zu aktualisieren, dass die korrekten Daten aus den Bestellungen eingetragen 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 trackt auch die von Besuchern angesehenen Produkte, um diese in bestimmten Bannern zu personalisieren.

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

Falls nicht, musst du dieses Snippet auf der Produktdetailseite einfügen, um Produktansichten ebenfalls 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 Layouts auf zwei Arten gehandhabt werden:

Hosting in Clerk.io #

Das Hosting der Designs in my.clerk.io bietet die größte Flexibilität, da du Layouts, Logiken und Filter jederzeit anpassen kannst, ohne den Code auf deiner Website zu ändern. Der Nachteil ist, dass die Designs jeweils pro Store gehandhabt werden.

Ergebnisse einbetten #

Wenn die Layouts in deinem Quellcode gehostet werden, kannst du sie für mehrere Stores gemeinsam nutzen. Der Nachteil ist, dass das Content System von Clerk dafür nicht genutzt werden kann, um Änderungen an den Ergebnissen vorzunehmen.

4. Snippets hinzufügen #

Dies geschieht anhand von Snippets, die deinem Content zugeordnet sind.

Im Frontend einfügen #

Um Clerk-Ergebnisse einzufügen, wählst du einen Content auf my.clerk.io, weist diesem ein gewünschtes Design zu und kopierst das Snippet auf die Seite, auf der Ergebnisse angezeigt werden sollen.

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

Dabei werden deine Content-Einstellungen wie API-Endpunkt/Logik, Design, Anzahl der anzuzeigenden Produkte usw. berücksichtigt und ein kompletter HTML-Block generiert, der in das Snippet eingefügt wird.

Konfigurieren #

Einige Snippets benötigen Zusatzdaten wie Produkt-IDs oder Kategorie-ID, die entsprechend deiner Webshop-Logik für das Laden der Daten konfiguriert werden sollten.

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>

Bei anderen Snippets reicht es, das Snippet mit wenigen Optionen abhängig vom gewünschten Verhalten einzufügen.

Ein Beispiel ist das Instant Search Snippet, das einen CSS-Selektor für das Suchfeld sowie die Anzahl vorgeschlagener Produkte 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 mit unseren Best Practices als einzelne Content-Blöcke angelegt, sodass der Einstieg leicht fällt.

Das Snippet ändert sich je nach Produkt-Logik des Contents, sodass du immer sehen kannst, welche Datenattribute 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.