Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, sodass Sie vollkommen automatisierte Produkte auf jeder Seite anzeigen können. Dieser Artikel erklärt, wie Sie mit einem Clerk.js setup in VTEX starten.

Unsere vollständigen Best Practices finden Sie in diesem Artikel darüber, welche Recommendations zu verwenden sind.

Slider Setup #

Recommendations werden mit Elements erstellt, die auf ein Design verweisen. Nachfolgend finden Sie eine grundlegende Anleitung zum Einrichten eines Elements.

Wenn Sie die Schritte in my.clerk.io > Settings > Setup Guides ausführen, werden automatisch die Elements gemäß unseren Best Practices erstellt.

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. Dies ermöglicht es Kunden, mehr Produkte mit weniger Klicks zu sehen. Sie können entweder den Design Editor verwenden, um es visuell zu konfigurieren, oder Code Designs verwenden.

Ein Design kann für beliebig viele Recommendations-Elemente wiederverwendet werden, die Sie erstellen.

Sie können den Setup Guide unter Recommendations - Create a design for your recommendations elements verwenden, um schnell ein Design zu erstellen, das das gleiche Farbschema und den gleichen Stil wie Ihr Webshop hat.

Klicken Sie auf Publish, wenn Ihnen das Styling gefällt.

Sie können dies später jederzeit unter Recommendations - Designs ändern, indem Sie auf die Schaltfläche zum Bearbeiten klicken.

Element erstellen #

Dies enthält alle Einstellungen, die verwendet werden, um die Recommendations anzuzeigen und sie auf Ihrer Website einbettbar zu machen. Folgen Sie diesen Schritten für jedes Recommendations-Banner, das Sie erstellen möchten.

1. Gehen Sie zu Recommendations > Elements.
2. Klicken Sie auf New Element.
3. Geben Sie ihm einen beschreibenden Namen. Wir empfehlen, ihn nach Seite und Logik zu benennen, die Sie verwenden möchten. Z.B. “Home Page / Visitor Recommendations”.
4. Wählen Sie unter Element type, die Produktlogik, die Sie verwenden möchten, aus dem Dropdown-Menü. Eine Übersicht aller Product Logics finden Sie hier.
5. Unter Design wählen Sie das Design aus, das Sie aus dem Dropdown-Menü erstellt haben, und bestimmen die Anzahl der anzuzeigenden Produkte.
6. Klicken Sie oben auf dem Bildschirm auf Save.

Mit dem Setup Guide sehen Sie, auf welchen Seiten Recommendations installiert werden sollten und welche Typen verwendet werden müssen, um unsere Best Practice zu erhalten. Jeder Schritt des Setup Guides konzentriert sich auf eine bestimmte Seite des Webshops und enthält Informationen über:

• Warum Recommendations auf der Seite wichtig sind.
• Welche Recommendation-Typen verwendet werden sollen.
• Wo auf der Seite sie platziert werden sollen.

Klicken Sie für jede Art von Recommendations, die Sie verwenden möchten, und folgen Sie den Schritten.

Bitte beachten Sie: Durch das bloße Anklicken jedes Blocks von Recommendations werden sie grün angezeigt, als ob sie installiert wären – sie sind es aber nicht – Sie müssen trotzdem klicken und die Schritte ausführen.

Zur Website hinzufügen #

Um Clerk Recommendations auf Ihrer Website hinzuzufügen, müssen Sie die VTEX-Integration konfigurieren.

1. Fügen Sie in Ihrem Store Theme clerkiopartnerdk.integration-vtex 1.x als Theme peerDependency in der Datei manifest.json hinzu:

"peerDependencies": {
"clerkiopartnerdk.integration-vtex": "1.x"
}

2. Fügen Sie den Block clerkio_recommendations an einer beliebigen Stelle in Ihrem Store hinzu. Beispiel: in home.json

{
  "store.home": {
    "blocks": [
      "responsive-layout.desktop#homepage",
      "responsive-layout.mobile#homepage"
    ]
  },
  "responsive-layout.desktop#homepage": {
    "children": ["clerkio_recommendations"]
  }
}

3. Gehen Sie zum VTEX Site Editor. Im rechten Menü erscheint ein ClerkIO-Block. Klicken Sie darauf.

4. Füllen Sie die im Block erforderlichen Informationen aus:
   • Block Class Name: Tragen Sie einen eindeutigen Bezeichner für den Block auf der jeweiligen Seite ein. Z.B. clerk-product-page-alternatives
   • Template Name: Tragen Sie die von Clerk für das zuvor erstellte Element bereitgestellte ID ein.
   • Product Logic: Wählen Sie die Recommendation-Logik entsprechend dem zuvor in Clerk erstellten Element aus. Die verfügbaren Produktlogiken sind:

Seiten #

Nachfolgend sind die spezifischen Seiten aufgeführt, auf denen Sie Recommendations einfügen sollten und welche Typen Sie verwenden müssen, um unseren Best Practices zu folgen.

Homepage #

1. Erstellen Sie in my.clerk.io 3 Elements mit den folgenden Logics:
   • Visitor Recommendations
   • Bestsellers
   • Hot Products
2. Fügen Sie den Block clerkio_recommendations Ihrem Homepage-Layout im VTEX Site Editor hinzu.
3. Konfigurieren Sie jeden Block mit dem passenden Template Name und Product Logic.

Kategorie-Seite #

1. Erstellen Sie in my.clerk.io ein Element mit der Logik Bestsellers In Category.
2. Fügen Sie den Block clerkio_recommendations dem Layout der Kategorie-Seite hinzu.
3. Konfigurieren Sie den Block mit dem Template Name und stellen Sie Product Logic passend zu Ihrem Element ein.

Produktseite #

1. Erstellen Sie in my.clerk.io 2 Elements mit den folgenden Logics:
   • Best Alternative Products
   • Best Cross-Sell Products
2. Fügen Sie den Block clerkio_recommendations dem Produktseiten-Layout hinzu.
3. Konfigurieren Sie jeden Block mit dem entsprechenden Template Name und Product Logic.

Add-To-Basket Schritt #

1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
2. Geben Sie ihm den Namen “Add-To-Basket / Others Also Bought”. Dies ist wichtig, damit der Embedcode richtig funktioniert.
3. Klicken Sie oben auf der Seite auf Save.
4. Fügen Sie den Block clerkio_recommendations Ihrem Add-To-Basket-Schritt/Seite hinzu.
5. Konfigurieren Sie den Block mit dem Template Name und Product Logic.

Warenkorb-Seite #

1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
2. Fügen Sie den Block clerkio_recommendations dem Warenkorb-Layout hinzu.
3. Konfigurieren Sie den Block mit dem Template Name und Product Logic.

Exit Intent #

1. Erstellen Sie in my.clerk.io ein Element mit der Logik Visitor Recommendations.
2. Fügen Sie den Block clerkio_recommendations dem globalen Layout hinzu.
3. Konfigurieren Sie den Block mit Template Name und Product Logic, und setzen Sie ihn so, dass er bei Exit Intent ausgelöst wird.

Startvorlagen #

Wenn Sie Code-Designs verwenden möchten, können Sie mit diesen Templates starten.

Slider Code #

Mit diesem Template wird ein Standard-Slider mit verschiedenen Produktinformationen gerendert, den Sie nach Ihren Bedürfnissen anpassen können.