clerk.io

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

Der größte Unterschied ist, dass benutzerdefinierte Plattformen mit einem Daten-Feed synchronisieren und Clerk-Ergebnisse in das Frontend einfügen sollten.

Diese Anleitung 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 abnimmt.

Clerk.js ist eine leichtgewichtige Bibliothek, die es ermöglicht, Clerk mit einfachen HTML-Schnipseln im Quellcode einzurichten. Clerk.js durchsucht die Seite nach allen Snippets mit der Klasse “clerk” und verwendet sie für API-Aufrufe.

Dies sind die 4 Schritte, die Sie bei der Installation von Clerk durchlaufen werden:

Daten synchronisieren
Verhalten verfolgen
Ergebnisse visualisieren
Ergebnisse zum Frontend hinzufügen

1. Daten synchronisieren #

1.1 Einrichten eines Stores #

Jede Clerk-Einrichtung wird in einem Store unter my.clerk.io konfiguriert. Dieser enthält alle Daten, die Sie hochladen, und ermöglicht es Ihnen, über seinen öffentlichen API-Schlüssel mit ihm zu interagieren.
Wenn Sie mehrere Webshops oder Domains einrichten müssen, sollte jede ihren eigenen Store haben.
Sie können Ihre Konfiguration auf neue Stores kopieren, nachdem Sie die erste Einrichtung vorgenommen haben.

1.2 Erstellen von JSON-Datenfeeds #

Dies ist die Hauptquelle für Daten aus dem Webshop an Clerk. Sehen Sie sich die Spezifikation für die Feeds hier an.
- Die Feeds sollten idealerweise einmal pro Tag auf Ihrer Seite aktualisiert werden.
- Die Feeds sollten unter einer URL gehostet werden, unter der Clerks Importer 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 Seiten (Blogbeiträge/Artikel) und Kundendaten enthalten.
- Beim ersten Import sollten Sie alle historischen Bestellungen einbeziehen. Nach dem ersten Import können diese entfernt werden, da Clerk sie in der Datenbank behält.
- Für Produkte können Sie neben den erforderlichen Attributen auch alle anderen Attribute übermitteln, die für Ihr Unternehmen wichtig sind, wie Bewertungen, Farben, Etiketten, Splash-Images usw.
- Clerk verwendet Produktattribute zum Suchen, Filtern und Gestalten.
Standardmäßig importiert Clerk die Feeds mindestens einmal am Tag.
Sie können ein Fenster innerhalb von 1 Stunde konfigurieren (z. B. zwischen 2:59 und 3:59), wenn Sie möchten, dass der Importer zu einer bestimmten Zeit läuft.

1.3 Aktualisierungen in Echtzeit #

Dies ist optional, wird aber empfohlen.
Wenn der Webshop Aktualisierungen in Echtzeit erfordert, wie z. B. 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 #

2.1 Clerk.js installieren #

Clerk verfolgt Klicks, Suchen und Bestellungen im Frontend aus drei wichtigen Gründen:
- Die KI lernt durch die Bestellungen das Kundenverhalten in Echtzeit kennen
- Analysen, die zeigen, welche Bestellungen von Clerk beeinflusst wurden und wie viel mehr sie wert sind
- Personalisierung verschiedener Empfehlungen auf der Website
Das Skript Clerk.js sollte zusammen mit Ihren anderen Skripten im Abschnitt “” hinzugefügt und mit dem öffentlichen API-Schlüssel konfiguriert werden, den Sie unter my.clerk.io finden.
Damit wird die Bibliothek geladen, die kochfreie, anonyme Besucher-IDs generiert und Klicks auf Produkte verfolgt, die von Clerk über 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 -->

2.2 Verkaufsverfolgung hinzufügen #

Dies sollte zu Ihrer Bestellungserfolgsseite hinzugefügt werden.
Aktualisieren Sie die Platzhalter, um die richtigen Daten aus den Bestellungen zu holen.
Jedes Mal, wenn eine Bestellung aufgegeben wird, verwendet Clerk.js das Snippet, um einen API-Aufruf an Clerk zu tätigen, der die Bestellinformationen enthält.

 <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 protokolliert auch die von den Besuchern angesehenen Produkte, um sie in bestimmten Bannern zu personalisieren.
Wenn Sie Cross-Sell und/oder alternative Produkte auf Ihren Produktdetailseiten verwenden, wird Clerk diese verwenden, um das/die von den Besuchern angesehene(n) Produkt(e) zu protokollieren.
Andernfalls müssen Sie dieses Snippet auf der Produktdetailseite einfügen, um auch die Produktansichten 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 entweder mit unserem Design Editor oder Liquid Code
- Gehostet in Ihrem Quellcode als eingebettete Ergebnisse

Das Hosting von Designs in my.clerk.io bietet die größte Flexibilität, da Sie Designs, Logiken und Filter ändern können, ohne Ihren Code vor Ort nach der Einrichtung zu ändern. Der Nachteil ist, dass die Designs für jede Filiale einzeln behandelt werden.
Das Hosten von Designs in Ihrem Quellcode gibt Ihnen die Freiheit, Designs für mehrere Stores freizugeben, aber der Nachteil ist, dass Sie unser Content-System nicht verwenden können, um Änderungen an den Ergebnissen vorzunehmen.

4. Hinzufügen von Snippets zum Frontend #

Dies wird mit Content-Snippets in Clerk.js gemacht.
Um Clerk-Ergebnisse einzufügen, wählen Sie einen Inhalt in my.clerk.io, stellen Sie ein Design ein, das Sie erstellt haben, und kopieren Sie das Snippet auf die Seite, auf der es angezeigt werden soll. Beispiele:

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

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

Das Snippet verweist auf die Inhaltskonfiguration für die Produktlogik, die Anzahl der zurückzugebenden Produkte, das Design usw. und liefert einen vollständigen HTML-Block, der in das Snippet eingefügt wird.
Einige Snippets erfordern zusätzliche Daten wie Produkt-IDs oder Kategorie-IDs, die hinzugefügt werden sollten.
Standardmäßig werden neue Stores in Clerk mit unseren Best Practices bereits als einzelne Inhaltsblöcke erstellt, was den Einstieg erleichtert.

Andere Optionen #

Einen ausführlichen Überblick über unsere technische Plattform, einschließlich der direkten Integration mit der API, finden Sie unter in diesem Artikel

Es gibt einige Fälle, in denen eine serverseitige API-Integration besser für Sie ist, zum Beispiel wenn:

Ersetzen einer bestehenden API mit Clerk
Verwaltung komplexer Preisregeln und Kundenkataloge
Erstellen einer App

Wenn dies nicht auf Sie zutrifft, empfehlen wir die Verwendung von Clerk.js.

Mehrere Domains #

Auf diese Weise können Sie Produkte, Verkäufe, Währungen usw. trennen, um den Überblick über jede Sprache zu behalten.

Beginnen Sie mit der Erstellung Ihres Hauptshops und folgen Sie der Einrichtungsanleitung, um Ihren Shop mit Clerk.io zu verbinden und wählen Sie die Empfehlungen und/oder Suchergebnisse, die Sie in Ihrem Webshop anzeigen möchten.
Wenn Sie mit der Ersteinrichtung fertig sind, gehen Sie zurück zur Startseite von my.clerk.io (indem Sie auf das Clerk.io-Logo in der _oberen linken Ecke des Seitenmenüs klicken) und klicken Sie dann auf "+ Neuen Shop hinzufügen “, die letzte Option in der Scroll-Down-Liste (in der Regel unter Ihren bestehenden Shop(s) und Ihrem Firmennamen):

3. Klicken Sie auf der Seite Neuen Shop hinzufügen auf Erweitert, um alle Einstellungen anzuzeigen.

 4\. Geben Sie die Details Ihres Webshops ein, und wählen Sie Ihren Haupt-Shop aus der Liste

Inhalt aus bestehendem Shop kopieren und klicken Sie dann auf Shop hinzufügen.

     Dadurch werden die **Inhalte** und **Designs** aus Ihrem Haupt-Shop übernommen.

 5\. Nun können Sie wieder der Einrichtungsanleitung folgen, um [**Clerk.io**] (http://Clerk.io) zu **aktivieren**, indem Sie auf **Starten** klicken, um **Daten** für diese Sprache zu synchronisieren.

6\. Wenn die **Datensynchronisation** abgeschlossen ist, ist Ihr Webshop bereit und verwendet die gleiche

     Einrichtung wie Ihr Hauptgeschäft.

Denken Sie daran, die [Kopfzeilen] (http://help.clerk.io/de/platform/content/settings/#headlines) unter Inhalt-> Bearbeiten -> Design auswählen ebenfalls in die richtige Sprache zu übersetzen.

Sie können diesen Prozess für alle Sprachen des Webshops, mit dem Sie Clerk.io verwenden möchten, durchführen.

Get Started