Recommendations

Clerk.io bietet mehr als 23 verschiedene Arten von Produktlogiken, sodass Sie vollständig automatisierte Produkte auf jeder Seite anzeigen können. Dieser Artikel erklärt, wie Sie beginnen, wenn Sie ein Clerk.js-Setup in VTEX verwenden.

Für unsere vollständigen Best Practices lesen Sie diesen Artikel, welche Recommendations Sie verwenden sollten.

Slider-Einrichtung #

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

Das Befolgen der Schritte in my.clerk.io > Settings > Setup Guides erstellt automatisch die Elements für unsere Best Practices.

Design erstellen #

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

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

Unter Setup Guide bei Recommendations - Create a design for your recommendations elements können Sie schnell ein Design erstellen, das das Farbkonzept und den Stil Ihres Webshops übernimmt.

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

Sie können dies später einfach unter Recommendations - Designs durch Klicken auf die Bearbeiten-Schaltfläche ändern.

Element erstellen #

Dies enthält alle Einstellungen, die zur Anzeige der Recommendations verwendet werden, und macht sie auf Ihrer Website einbettbar. 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 aussagekräftigen Namen. Wir empfehlen, ihn basierend auf der Seite und der zu verwendenden Logik zu benennen. Z. B. “Home Page / Visitor Recommendations”.
4. Wählen Sie unter Element type, die gewünschte Produktlogik aus dem Dropdown-Menü. Einen Überblick über alle Produktlogiken finden Sie hier.
5. Wählen Sie unter Design das erstellte Design im Dropdown-Menü und legen Sie die Anzahl der anzuzeigenden Produkte fest.
6. Klicken Sie oben auf dem Bildschirm auf Save.

Mit dem Setup Guide sehen Sie, auf welchen Seiten Recommendations installiert werden sollen und welche Typen für unsere Best Practice verwendet werden. 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 jeden Recommendation-Typ, den Sie verwenden möchten, und folgen Sie den Schritten.

Bitte beachten Sie: Durch nur Klicken auf jeden Block der Recommendations werden sie grün wie wenn sie installiert wären – sie sind es aber nicht – Sie müssen die Schritte immer noch klicken und befolgen.

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 peerDependency im manifest.json hinzu:

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

2. Fügen Sie den Block clerkio_recommendations an beliebiger Stelle im Shop 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, und auf der rechten Seite wird ein ClerkIO-Block angezeigt. Klicken Sie darauf.

4. Füllen Sie die erforderlichen Angaben im Block aus:

   • Block Class Name: Geben Sie eine eindeutige Kennung für den Block innerhalb 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: Wählen Sie die gleiche Recommendation-Logik wie im zuvor erstellten Element in Clerk.io. Die verfügbaren Optionen finden Sie unter product logics.

Seiten #

Im Folgenden finden Sie die spezifischen Seiten, auf denen Sie Recommendations einfügen sollten 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 clerkio_recommendations Block in Ihr Homepage-Layout im VTEX Site Editor ein.
3. Konfigurieren Sie jeden Block mit dem passenden 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 clerkio_recommendations Block in Ihr Kategorienseiten-Layout ein.
3. Konfigurieren Sie den Block mit dem Template Name und stellen Sie die Product Logic so ein, dass sie mit Ihrem Element übereinstimmt.

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 den clerkio_recommendations Block in Ihr Produktseiten-Layout ein.
3. Konfigurieren Sie jeden Block mit dem passenden 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”. Dies ist wichtig, damit der Embedcode richtig funktioniert.
3. Klicken Sie oben auf der Seite auf Save.
4. Fügen Sie den clerkio_recommendations Block zum Add-To-Basket Schritt/Seite hinzu.
5. Konfigurieren Sie den Block mit dem Template Name und der 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 clerkio_recommendations Block in das Layout Ihrer Warenkorb-Seite ein.
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 clerkio_recommendations Block in Ihr globales Layout ein.
3. Konfigurieren Sie den Block mit dem Template Name und der Product Logic und stellen Sie ihn so ein, dass er bei Exit Intent ausgelöst wird.

Einstiegsvorlagen #

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

Slider-Code #

Diese Vorlage rendert einen Standard-Slider mit verschiedenen Produktinformationen, den Sie nach Ihren Bedürfnissen anpassen können.