Vollständige Installation der benutzerdefinierten Plattform - Komplettlösung

Hier finden Sie alle notwendigen Schritte für die Installation von Clerk auf jeder Plattform

Platforms:

Custom Platform

Übersicht

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 eines JSON-Feeds

Dies ist die Hauptquelle für Daten aus dem Webshop an Clerk. Prüfen Sie die Spezifikation für den Feed hier.
- Der Feed sollte idealerweise einmal pro Tag auf Ihrer Seite aktualisiert werden.
- Der Feed sollte unter einer URL gehostet werden, unter der Clerks Importer ihn abrufen kann, z. B. https://awesomestore.com/feed/clerk.json.
- Grundsätzlich sollte der Feed immer alle verfügbaren Produkte und Kategorien enthalten, kann 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 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 den Feed mindestens einmal am 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 (optional)

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=(d.location.protocol=='https:'?'https':'http')+'://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_PUBLIC_API_KEY_HERE'
    });
  </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-ID, 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 Eine ausführliche Beschreibung unserer technischen 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.