Überblick

Das Empfehlungs-Widget rendert eine oder mehrere Empfehlungszeilen in deinen Shop. Das Skript wird pro Seite einmal geladen, jede Zeile ist ein eigener Block mit eigenem Typ, eigener Überschrift und eigener Platzierung.

Die Produktkarten sind dieselben wie in der Suche: Sie übernehmen dein UI-Design, deine Farben, Badges, Bewertungen und die Varianten-Auswahl aus der Projektkonfiguration. Du pflegst das Aussehen also nur an einer Stelle.

Hat eine Zeile keine Produkte – oder schlägt die Anfrage fehl – rendert sie nichts: keine Überschrift, kein leerer Platzhalter. Das Layout deiner Seite bleibt unverändert.

Blocktypen

Vier Typen, jeder einzeln platzierbar. Ähnliche und passende Produkte brauchen ein Ausgangsprodukt, die beiden anderen nicht.

similar Produktseite: Produkte, die dem aktuellen Produkt inhaltlich ähnlich sind, also Alternativen für dieselbe Kaufabsicht.
complementary Produktseite: Produkte, die zum aktuellen Produkt passen und typischerweise zusammen gekauft werden, also Zubehör und Ergänzungen.
bestseller Jede Seite: Die Produkte mit den meisten Conversions im Projekt, in der jeweiligen Sprache.
recently_viewed Jede Seite: Die zuletzt im Browser des Besuchers aufgerufenen Produkte, neueste zuerst. Benötigt die Analytics-Zustimmung des Besuchers.

Shopify

Für Shopify liefert die Mandelbaum-App zwei Theme-Blöcke, ein Snippet musst du nicht einbauen.

Mandelbaum-App im Shop installieren und das Projekt verbinden.
Im Theme-Editor auf der Produktseite den Block „Recommendations“ hinzufügen. Er zeigt ähnliche und/oder passende Produkte zum aktuellen Produkt.
Auf allen anderen Seiten den Block „Recommendations (general)“ hinzufügen und dort Topseller oder Zuletzt angesehen auswählen.
Überschrift, Produktanzahl, sichtbare Karten und Überschriften-Stil direkt im Theme-Editor einstellen.

Einbindung

Ohne Shopify bindest du das Skript selbst ein. Es gibt zwei Varianten, beide lesen ihre Konfiguration aus Datenattributen und beide können auf derselben Seite kombiniert werden.

Variante 1 – per Selektor

Du legst leere Container in dein Template und verweist per data-similar-selector, data-bestseller-selector usw. darauf: ein Attribut pro Zeile, direkt am Skript-Tag. Das Widget rendert seine Zeile in das gefundene Element. Passt ein Selektor auf kein Element, wird die Zeile übersprungen.

html

<div id="pdp-similar"></div>
<div id="home-bestsellers"></div>

<script
  src="https://mandelbaum.ai/recommendations-ui.js"
  data-project-host="your-shop.example.com"
  data-project-language="de"
  data-product-url="https://your-shop.example.com/products/trail-shoe"
  data-similar-selector="#pdp-similar"
  data-similar-heading="Das könnte Ihnen auch gefallen"
  data-bestseller-selector="#home-bestsellers"
  data-bestseller-heading="Topseller"
  data-limit="8"
  data-columns="4"
  async
></script>

Variante 2 – per Container

Du platzierst ein div mit data-mandelbaum-recommendations genau dort, wo die Zeilen erscheinen sollen, und konfigurierst sie an diesem Container. Ein Container kann ähnliche und passende Produkte zusammen zeigen, für Topseller oder Zuletzt angesehen setzt du data-type.

html

<div
  data-mandelbaum-recommendations
  data-product-url="https://your-shop.example.com/products/trail-shoe"
  data-show-similar="true"
  data-show-complementary="true"
  data-heading="Das könnte Ihnen auch gefallen"
  data-limit="8"
  data-columns="4"
></div>

<script
  src="https://mandelbaum.ai/recommendations-ui.js"
  data-project-host="your-shop.example.com"
  data-project-language="de"
  async
></script>

Attribute

Alle Attribute sind optional, solange die Standardwerte passen. data-project-host und data-project-language stehen immer am Skript-Tag, alles andere dort, wo der jeweilige Block konfiguriert wird.

Attribut	Standard	Gelesen von	Beschreibung
data-project-host	location.origin	Skript-Tag	Wählt das Projekt aus. Nur nötig, wenn das Skript nicht auf der Domain des Shops läuft, zum Beispiel in einer Vorschau.
data-project-language	<html lang>	Skript-Tag	Sprache für Konfiguration und Produkte. Ohne Angabe wird sie aus dem lang-Attribut der Seite und danach aus der URL ermittelt.
data-product-url	location.href	beiden	Das Produkt, zu dem ähnliche und passende Produkte gesucht werden. Standard ist die aktuelle Seite, was auf Produktseiten in der Regel richtig ist.
data-<type>-selector	—	Skript-Tag	CSS-Selektor des Elements, in das die Zeile dieses Typs gerendert wird. Für <type> steht similar, complementary, bestseller oder recently-viewed.
data-<type>-heading	—	Skript-Tag	Überschrift der Zeile dieses Typs. Ohne Angabe wird keine Überschrift gerendert.
data-type	—	Container	Typ eines allgemeinen Container-Blocks, bestseller oder recently_viewed.
data-show-similar	false	Container	Auf true gesetzt zeigt der Container die Zeile mit ähnlichen Produkten.
data-show-complementary	false	Container	Auf true gesetzt zeigt der Container die Zeile mit passenden Produkten.
data-heading	—	Container	Überschrift der Zeilen dieses Containers.
data-block-id	—	Container	Wird in die id des erzeugten Elements übernommen, damit dein Theme eine einzelne Zeile ansprechen kann.
data-limit	10	beiden	Produkte pro Zeile.
data-columns	4	beiden	Karten, die bei voller Breite gleichzeitig sichtbar sind. Auf schmalen Bildschirmen sind es weniger und die Zeile scrollt horizontal.
data-heading-color	—	beiden	Farbe der Überschrift als Hex-Wert. Ohne Angabe erbt sie die Farbe deines Themes.
data-heading-font-size	20	beiden	Schriftgröße der Überschrift in Pixel.
data-heading-font-weight	600	beiden	Schriftstärke der Überschrift, zum Beispiel 400, 600 oder 700.

Ungültige oder nicht positive Zahlenwerte fallen auf den Standard zurück. Unbekannte Attribute werden ignoriert.

Styling

Empfehlungskarten sind dieselbe Komponente wie die Suchergebniskarten und holen ihr Aussehen aus derselben Projektkonfiguration.

Farben, Rundungen, Schriftgrößen, Badges, Bewertungen und Varianten-Auswahl kommen aus dem UI-Designer deines Projekts, jeweils passend zur Sprache der Seite.
Dein eigenes CSS aus dem UI-Designer wird auch in den Empfehlungszeilen angewendet, die Karten sehen also identisch zu den Suchkarten aus.
Pro Block einstellbar ist nur die Überschrift – Farbe, Schriftgröße und Schriftstärke – damit sie zu den übrigen Abschnittsüberschriften deines Shops passt.
Innerhalb einer Zeile sind alle Karten gleich hoch. Passen nicht alle Produkte in die Breite, scrollt die Zeile horizontal, mit Pfeilen an den Rändern.

Zuletzt angesehen

Diese Zeile basiert ausschließlich auf dem Browser des Besuchers. Aufgerufene Seiten werden lokal gespeichert, das Widget schickt diese URLs an Mandelbaum und erhält die passenden Produkte zurück. Alles, was kein Produkt des Projekts ist, wird ignoriert.

Gespeichert und gelesen wird nur mit Analytics-Zustimmung, erkennbar am Cookie mb_analytics_consent=1. Ohne Zustimmung bleibt die Zeile leer und rendert damit nichts.

Gespeichert werden maximal 20 Seiten für 30 Tage, neueste zuerst, im localStorage unter mb_recently_viewed. Das aktuell angesehene Produkt erscheint nicht in seiner eigenen Zeile.

Klick-Tracking

Klicks auf Empfehlungen werden wie Suchklicks gemessen und erscheinen in der Analyse als eigene Quelle, inklusive Blocktyp und dem Produkt, von dem aus geklickt wurde.

Die vom Widget gelieferten Produkt-URLs sind signierte Tracking-URLs und müssen unverändert verwendet werden. Baust du eigene Links, fehlt die Zuordnung.

Empfehlungsklicks zählen nicht in die Klickrate der Suche. Conversions werden über das Shopify-Pixel beziehungsweise die Tracking-API der Zeile zugeordnet, aus der der Besucher kam.

Regeln

Empfehlungen berücksichtigen die Regeln deines Projekts, damit dieselben Produkte ausgeschlossen und bevorzugt werden wie in der Suche.

Ausschlussregeln gelten für alle vier Blocktypen: ausgeschlossene Produkte erscheinen in keiner Empfehlungszeile.
Reranking-Regeln gelten für ähnliche und passende Produkte und verschieben die Reihenfolge innerhalb der Zeile. Regeln, die auf den Suchbegriff wirken, bleiben wirkungslos, weil es keinen Suchbegriff gibt.
Topseller und Zuletzt angesehen haben eine feste Reihenfolge, Conversions beziehungsweise Besuchshistorie, und werden nicht zusätzlich umsortiert.