Any (webshop)

Get Started

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

Der größte Unterschied besteht darin, dass benutzerdefinierte Plattformen mit einem Datenfeed synchronisiert werden sollten und Clerk.io-Ergebnisse in das Frontend einfügen.

Dieser Leitfaden erklärt, wie man Clerk auf einer benutzerdefinierten Plattform mit Clerk.js installiert. Dies ist der empfohlene Ansatz, da er einen Großteil der schweren Arbeit in Bezug auf Tracking und API-Aufrufe übernimmt.

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

Clerk.js ist eine leichte Bibliothek, die es ermöglicht, Clerk mit einfachen HTML-Snippets im Quellcode einzurichten. Clerk.js scannt die Seite nach Snippets mit der Klasse „clerk“ und verwendet diese, um API-Aufrufe zu tätigen.

Im Folgenden sind die Schritte aufgeführt, die Sie bei der Installation von Clerk durchlaufen werden.

1. Daten synchronisieren #

Zuerst müssen Sie Daten einfügen, damit die KI von Clerk.io Ihren Webshop versteht und beginnen kann, Ergebnisse vorherzusagen.

Store erstellen #

Jede Clerk-Installation wird auf einem Store in my.clerk.io konfiguriert. Dies wird alle Daten enthalten, die Sie hochladen, und Ihnen ermöglichen, über den öffentlichen API-Schlüssel damit zu interagieren.

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

Sie können Ihre Konfiguration auf neue Stores kopieren, nachdem Sie die erste Einrichtung vorgenommen haben.

Feeds erstellen #

Dies ist die Hauptquelle für Daten vom Webshop zu Clerk. Überprüfen Sie die Spezifikation für die Feeds hier.

Dies sind unsere besten Praktiken für die Erstellung der Feeds:

Sie sollten idealerweise einmal täglich auf Ihrer Seite aktualisiert werden.
Sie sollten unter einer URL gehostet werden, von der Clerk.io’s Importeur sie abrufen kann, z.B. https://awesomestore.com/feed/clerk.json
Als Basis sollten die Feeds immer alle verfügbaren Produkte und Kategorien enthalten, können aber auch Seiten (Blogbeiträge / Artikel) und Kundendaten enthalten.
Clerk verwendet Produktattribute zum Suchen, Filtern und Stylen.
Beim ersten Import sollten Sie alle historischen Bestellungen einbeziehen. Nach dem ersten Import können diese entfernt werden, da Clerk sie in der Datenbank speichert.
Für Produkte können Sie neben den erforderlichen Attributen auch andere Attribute senden, die für Ihr Geschäft wichtig sind, wie Bewertungen, Farben, Etiketten, Splash-Bilder usw.
Standardmäßig importiert Clerk die Feeds mindestens einmal täglich.
Sie können ein Zeitfenster innerhalb von 1 Stunde konfigurieren (z.B. zwischen 2:59-3:59), wenn Sie möchten, dass der Importeur zu einer bestimmten Zeit ausgeführt wird.

Echtzeit-Synchronisierung verwenden #

Dies ist optional, wird jedoch empfohlen.

Wenn der Webshop Aktualisierungen in Echtzeit erfordert, wie das Entfernen von nicht vorrätigen Produkten oder das Aktualisieren von Preisen, kann unsere CRUD-API verwendet werden, um Produkte zwischen den Feed-Importen hinzuzufügen, zu aktualisieren oder zu entfernen.

2. Verhalten verfolgen #

Die KI von Clerk.io lernt über das Kundenverhalten durch Bestellungen und Website-Aktivitäten. Das Verfolgen dieses Verhaltens ist entscheidend, damit die KI genaue Vorhersagen treffen kann und um die Statistiken anzuzeigen, die beweisen, wie gut es funktioniert.

Clerk.js installieren #

Clerk.io verfolgt Klicks, Suchen und Bestellungen aus dem Frontend aus drei Hauptgründen:

Damit die KI in Echtzeit über das Kundenverhalten durch die Bestellungen lernen kann.
Analysen, die zeigen, wie Bestellungen durch Clerk verbessert werden.
Personalisierung verschiedener Empfehlungen auf der gesamten Website.

Das Clerk.js-Skript sollte zusammen mit Ihren anderen Skripten im <head>-Bereich hinzugefügt und mit dem öffentlichen API-Schlüssel konfiguriert werden, der in my.clerk.io zu finden ist.

Dies lädt die Bibliothek, die cookielose, anonyme Besucher-IDs generiert, und sie wird Klicks auf alle von Clerk durch die Snippets angezeigten Produkte verfolgen.

<!-- Start des Clerk.io E-Commerce-Personalisierungstools - 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>
<!-- Ende des Clerk.io E-Commerce-Personalisierungstools - www.clerk.io -->

Verkaufsverfolgung hinzufügen #

Dies sollte zu Ihrer Bestellbestätigungsseite hinzugefügt werden. Immer wenn eine Bestellung aufgegeben wird, verwendet Clerk.js das Snippet, um einen API-Aufruf mit den Bestellinformationen zu tätigen, einschließlich dessen, was der Besucher in der Sitzung vor der Bestellung angeklickt hat.

Stellen Sie sicher, dass Sie die Platzhalter aktualisieren, um die richtigen Daten aus den Bestellungen abzurufen.

 <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 auch die von Besuchern angesehenen Produkte, um in bestimmten Bannern zu personalisieren.

Wenn Sie Cross-Sell- und/oder Alternativprodukte auf Ihren Produktdetailseiten verwenden, wird Clerk diese verwenden, um die von Besuchern angesehenen Produkte zu protokollieren.

Andernfalls müssen Sie 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 #

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

Gehostet in my.clerk.io unter Verwendung entweder unseres Design-Editors oder Liquid-Codes.
Gehostet in Ihrem Quellcode als eingebettete Ergebnisse

In Clerk.io hosten #

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

Ergebnisse einbetten #

Das Hosten von Designs in Ihrem Quellcode gibt Ihnen die Freiheit, Designs über mehrere Stores hinweg zu teilen. Der Nachteil ist, dass Sie unser Content System nicht verwenden können, um Änderungen an den Ergebnissen vorzunehmen.

4. Snippets hinzufügen #

Dies geschieht mit Snippets, die mit Ihrem Content verbunden sind.

In das Frontend einfügen #

Um Clerk-Ergebnisse einzufügen, wählen Sie einen Content in my.clerk.io, konfigurieren Sie ihn so, dass er ein von Ihnen erstelltes Design verwendet, und kopieren Sie das Snippet auf eine Seite, auf der die Ergebnisse angezeigt werden sollen.

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

Es verweist auf Ihre Content-Einstellungen, einschließlich des API-Endpunkts / der Inhaltslogik, des Designs, der 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-IDs, die basierend auf der Logik Ihres Webshops zum Abrufen von Daten konfiguriert werden sollten.

Ein Beispiel dafür ist das Snippet für die besten Alternativen-Empfehlungen, das eine Produkt-ID benötigt, die zum Snippet hinzugefügt werden muss:

<!--Beste Alternativen Empfehlungen-->
<span 
    class="clerk"
    data-template="@product-page-alternatives"
    data-products="[INSERT_PRODUCT_ID]">
</span>

Andere erfordern einfach, dass das Snippet zur Seite hinzugefügt wird, mit einigen geringfügigen Konfigurationsoptionen, basierend darauf, wie es sich verhalten soll.

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

<!--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 kommen neue Stores in Clerk mit unseren Best Practices, die bereits als individuelle Content-Blöcke erstellt wurden, was den Einstieg erleichtert.

Das Snippet ändert sich je nach gewählter Produktlogik für den Content, sodass Sie immer sehen können, welche Datenattribute für Sie 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.