Any (webshop)

Get Started

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

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

Der größte Unterschied besteht darin, dass benutzerdefinierte Plattformen sich mit einem Datenfeed synchronisieren und die Ergebnisse von Clerk in das Frontend einfügen sollten.

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

Clerk.js ist eine leichtgewichtige Bibliothek, die es ermöglicht, Clerk mit einfachen HTML-Schnipsel 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 Shops #

Jedes Clerk Setup wird auf einem speichern in my.clerk.io konfiguriert. Dieser enthält alle Daten, die Sie hochladen, und ermöglicht Ihnen die Interaktion mit ihm über seinen öffentlichen API-Schlüssel.
Wenn Sie mehrere Webshops oder Domains einrichten müssen, sollte jeder seinen eigenen Store haben.
Sie können Ihre Konfiguration nach der Ersteinrichtung in neue Stores kopieren

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 am 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 Kunden Daten 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, z. B. Bewertungen, Farben, Etiketten, Splash-Bilder usw.
- Clerk verwendet Produktattribute zum Suchen, Filtern und Gestalten.
Standardmäßig importiert Clerk die Feeds mindestens einmal pro Tag.
Sie können ein Fenster innerhalb von 1 Stunde konfigurieren (z.B. zwischen 2:59-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 Installieren Sie Clerk.js #

Clerk verfolgt Klicks, Suchen und Bestellungen vom Frontend für drei Hauptgründe:
- 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 gesamten Website
Das Skript Clerk.js sollte zusammen mit den anderen Skripten im Abschnitt <head> hinzugefügt und mit dem Skript Öffentlicher API-Schlüssel konfiguriert werden, das sich in my.clerk.io befindet.
Damit wird die Bibliothek geladen, die kochfreie, anonyme Besucher-IDs generiert und Klicks auf Produkte nachverfolgt, 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 Auftragserfolgsseite hinzugefügt werden.
Aktualisieren Sie die Platzhalter, um die richtigen Daten aus den Bestellungen zu holen.
Immer 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 Ihrer Produkt-Detailseiten verwenden, wird Clerk diese verwenden, um die von den Besuchern angesehenen Produkte 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 unter Verwendung unseres Design Editors oder Liquid code
- In Ihrem Quellcode als eingebettete Ergebnissegehostet

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.
Wenn Sie die Designs in Ihrem Quellcode hosten, haben Sie die Freiheit, Designs für mehrere Stores freizugeben, aber der Nachteil ist, dass Sie unser Content-System nicht nutzen können, um Änderungen an den Ergebnissen vorzunehmen.

4. Snippets zum Frontend hinzufügen #

Dies geschieht mit Content-Snippets in Clerk.js.
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-ID, die hinzugefügt werden sollten.
Neue Stores in Clerk werden standardmäßig mit unseren Best Practices 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 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 Hauptspeicher 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 auf die Startseite von my.clerk.io (indem Sie auf das Clerk.io Logo im Linke obere Ecke des Seitenmenüs klicken) und klicken Sie dann auf "+ Neuen Shop hinzufügen" die letzte Option der Scroll-Down-Liste (in der Regel unter Ihren bestehenden Shop(s) und Ihrem Firmennamen):

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

Geben Sie die Details Ihres Webshops ein und wählen Sie Ihren Haupt-Shop aus dem Dropdown-Menü Inhalt aus bestehendem Shop kopieren und klicken Sie dann auf Shop hinzufügen. Dadurch werden die Daten Inhalt und Entwürfe aus Ihrem Hauptgeschäft übernommen.

Nun können Sie wieder der Setup-Anleitung folgen, um aktivieren Clerk.io durch Klicken auf Erste Schritte zu Daten synchronisieren für diese Sprache.

Wenn Daten-Synchronisation fertig ist, ist Ihr Webshop fertig und verwendet die gleichen Einstellungen wie Ihr Hauptgeschäft.

Denken Sie daran, Schlagzeilen, in Inhalt-> Bearbeiten -> Entwurf auswählen ebenfalls in die richtige Sprache zu übersetzen.

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