Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken an, was es Ihnen ermöglicht, vollständig automatisierte Produkte auf jeder Seite anzuzeigen. Dieser Artikel erklärt, wie Sie beginnen, wenn Sie ein Clerk.js Setup in VTEX verwenden.

Unsere vollständigen Best Practices finden Sie in diesem Artikel, in dem erklärt wird, welche Recommendations Sie verwenden sollten.

Slider-Setup #

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

Durch das Befolgen der Schritte in my.clerk.io > Einstellungen > Setup Guides werden die Elements für unsere Best Practices automatisch erstellt.

Design erstellen #

Recommendations werden standardmäßig als Slider angezeigt. Dadurch können Kunden mehr Produkte mit weniger Klicks sehen. Sie können entweder den Design Editor für die visuelle Konfiguration nutzen oder Code Designs verwenden.

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

Mit dem Setup Guide unter Recommendations - Erstellen Sie ein Design für Ihre Recommendation-Elemente können Sie schnell ein Design mit demselben Farbschema und Stil wie Ihr Webshop erstellen.

Klicken Sie auf Publish, wenn Sie mit dem Styling zufrieden sind.

Sie können dies später ganz einfach ändern unter Recommendations - Designs und dann auf den Bearbeiten-Button klicken.

Element erstellen #

Dies enthält alle Einstellungen zur Anzeige der Recommendations und macht sie auf Ihrer Website einbettbar. Folgen Sie diesen Schritten für jedes Recommendation-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, sie nach der Seite und Logik zu benennen, die Sie verwenden möchten. Zum Beispiel: “Home Page / Visitor Recommendations”.
4. Wählen Sie in Element type, die gewünschte Produktlogik aus der Dropdown-Liste. Eine Übersicht aller Produktlogiken finden Sie hier.
5. Wählen Sie in Design das erstellte Design aus der Dropdown-Liste und wählen Sie die Anzahl der anzuzeigenden Produkte.
6. Klicken Sie oben auf der Seite auf Save.

Mit dem Setup Guide sehen Sie, auf welchen Seiten Sie Recommendations installieren und welche Typen Sie verwenden sollten, um unsere Best Practice zu nutzen. 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 Sie verwenden sollten.
• Wo auf der Seite sie platziert werden sollten.

Klicken Sie jeweils für die Recommendation-Typen, die Sie verwenden möchten und folgen Sie den Schritten.

Bitte beachten Sie: Durch allein das Klicken auf jeden Block von Recommendations werden sie grün markiert, als wären sie installiert – das sind sie 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 Shop-Theme clerkiopartnerdk.integration-vtex 1.x als Theme peerDependency in die Datei manifest.json ein:

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

2. Fügen Sie den Block clerkio_recommendations an einer beliebigen Stelle in Ihrem Shop ein. 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 Seitenmenü wird ein ClerkIO Block angezeigt. Klicken Sie darauf.

4. Füllen Sie die erforderlichen Informationen im Block aus:
   • Block Class Name: Geben Sie eine eindeutige Kennung für den Block auf der Seite ein, auf der er verwendet wird. Z. B. clerk-product-page-alternatives
   • Template Name: Geben Sie die von Clerk im zuvor erstellten Element bereitgestellte ID ein.
   • Product Logic: Stimmen Sie die Recommendation-Logik auf die im zuvor erstellten Element auf Clerk angegebene ab. Die verfügbaren Produktlogiken sind:

Seiten #

Nachfolgend finden Sie die speziellen Seiten, auf denen Sie Recommendations einsetzen und welche Typen Sie verwenden sollten, um unseren Best Practices zu folgen.

Homepage #

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

Kategorieseite #

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

Produktseite #

1. Erstellen Sie in my.clerk.io 2 Elements mit den folgenden Logiken:
   • Best Alternative Products
   • Best Cross-Sell Products
2. Fügen Sie auf Ihrer Produktseite den Block clerkio_recommendations ein.
3. Konfigurieren Sie jeden Block mit dem jeweiligen Template Name und der 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”. Das ist wichtig, damit der Embedcode korrekt funktioniert.
3. Klicken Sie auf Save oben auf der Seite.
4. Fügen Sie den Block clerkio_recommendations zu Ihrem Add-To-Basket-Schritt/Seite hinzu.
5. Konfigurieren Sie den Block mit dem Template Name und der Product Logic.

Warenkorbseite #

1. Erstellen Sie in my.clerk.io ein Element mit der Logik Best Cross-Sell Products.
2. Fügen Sie den Block clerkio_recommendations zum Warenkorbseiten-Layout hinzu.
3. Konfigurieren Sie den Block mit dem Template Name und der 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 zu Ihrem globalen Layout hinzu.
3. Konfigurieren Sie den Block mit Template Name und Product Logic und stellen Sie ein, dass dieser bei Exit Intent ausgelöst wird.

Startvorlagen #

Wenn Sie Code Designs verwenden möchten, können Ihnen diese Vorlagen helfen.

Slider Code #

Diese Vorlage rendert einen Standardslider mit verschiedenen Produktinformationen, den Sie nach Ihren Anforderungen anpassen können.