Erste Schritte mit Onsite-Produktempfehlungen

Übersicht

Erfahre, wie du einen personalisierten Produktempfehlungsblock direkt zu Produktdetailseiten (PDPs) hinzufügst und die Onsite-Personalisierung von Klaviyo über das Customer-Hub-Seitenfenster hinaus ausweitest. In diesem Leitfaden erfährst du, was der eingebettete Block macht, wie er konfiguriert und gestaltet wird, wie die Funktion im Laufe der Zeit eingeführt wird und welche technischen Nachteile die Implementierung mit sich bringt.

Eingebettete Produktempfehlungen sind von Haus aus unabhängig von deiner Commerce-Plattform und können irgendwann auf jeder Seite deiner Website gehostet werden, mit einem anfänglichen Fokus auf der PDP. Wenn du Feedback zu dieser Funktion benötigst, wende dich an das Customer Hub-Produktteam.

Bevor du anfängst

• Voraussetzung: Für diesen Block muss der Customer Hub in Klaviyo aktiviert sein.
• Plattform-Support: Heute verfügbar bei Shopify (als Theme-App-Block), Shopify Plus (als eingebettetes Code-Fragment) und Salesforce Commerce Cloud (nur SFRA-Support). Unterstützung für weitere Plattformen ist für dich geplant.
• Engine-Abhängigkeit: Die Empfehlungsqualität basiert auf der Empfehlungsengine von Klaviyo. Wir senden Empfehlungen über unseren Empfehlungsservice der nächsten Generation – ein Upgrade von unserem vorherigen System, bei dem keine personalisierten Empfehlungen für anonyme Besucher*innen möglich waren.

Hinweis: Produktempfehlungen auf der Website waren bisher nur im Hub-Seitenfenster und nur für angemeldete Benutzer verfügbar. Diese Funktion bringt Empfehlungen aus dem Hub-Seitenfenster auf die PDP.

Was du mit eingebetteten Produktempfehlungen tun kannst

Mit dem eingebetteten Block für Produktempfehlungen kannst du relevante Produkte direkt auf deinen Produktdetailseiten anzeigen, damit jeder Besucher – bekannte oder anonyme – etwas für ihn Relevantes sieht.

• Passe den Stil deiner Website an: Passe Schriftarten, Farben, Layout und Schaltflächenstile an, damit sich der Block wie ein nativer Teil deines Themes anfühlt. Füge benutzerdefinierte CSS-Klassen hinzu, die alle Customer-Hub-Elemente, alle eingebetteten Blöcke oder den Empfehlungsblock gezielt ansprechen. Bearbeite den Block-Header (z. B. „Top-Auswahl für dich“ oder „Das könnte dir auch gefallen“) und wähle ein Layout im Karussellstil.
• Personalisierte Empfehlungen für bekannte Besucher*innen: Die Empfehlungen basieren auf dem, was Klaviyo über ein Profil weiß, und basieren auf dem NGPRS-Service (Next Gen Product Recommendations).
• Zeige allen Besucher*innen etwas: Anonyme Besucher*innen sehen standardmäßig allgemeine Produktempfehlungen, die über Shopify bezogen werden.
• Schnelles Laden ohne Beeinträchtigung der Seiten-Performance: Der Block wurde entwickelt, um von Anfang an schnell zu laden, ohne deine Seite mit zusätzlichem Code zu belasten. So wird er deine Website nicht verlangsamen oder deine Performance-Scores beeinträchtigen.
• Messung von Kundenengagement und Umsatz: Jeder Klick wird als Produkt angeklickt und auf die gleiche Weise wie ein Klick auf ein Produkt im Hub-Seitenfenster verfolgt, sodass du Aufrufe, Klicks und zuschreibbaren Umsatz messen kannst.
• Sorge für ein einheitliches Erlebnis: Bekannte oder identifizierte Besucher*innen können die gleichen Empfehlungen im Hub-Seitenfenster und auf der PDP sehen.
• Lass Kund*innen Produkte für später speichern: Kund*innen können ein empfohlenes Produkt direkt von der Karte zu ihren Favoriten hinzufügen oder in den Warenkorb legen, wenn sie noch nicht bereit sind, es zu kaufen.
• Vermeide es, Produkte zu empfehlen, die sich bereits im Warenkorb befinden: Produkte, die sich bereits im Warenkorb befinden, sind von den ihnen angezeigten Empfehlungen ausgeschlossen.

Erstelle einen neuen eingebetteten Produktempfehlungsblock

Dies ist ein neuer eingebettbarer Block, der genauso eingerichtet werden kann wie andere eingebettete Blöcke wie Favoriten und FAQs und nicht über das allgemeine Framework für eingebettete Inhaltsblöcke zur Personalisierung.

1. Rufe die Blockbibliothek auf:Navigiere in der linken Navigation von Klaviyo zu Service > Customer Hub. Klicke auf Design > Onsite-Blöcke. Suche Produktempfehlungen in der Blockbibliothek und füge sie zu deiner Produktseite hinzu.
   1. Navigate to Service > Customer Hub in Klaviyo's left-hand navigation. Click Design > Onsite blocks. Find Product recommendations in the block library and add it to your product page.
2. Konfiguriere deine Empfehlungsquelle:Wähle aus, wie die Empfehlungen basierend auf dem Besucherstatus ausgefüllt und gefiltert werden sollen:Angemeldete und identifizierte Besucher: Klaviyo (Standard) oder Shopify.Anonyme Besucher: Shopify (Standard und derzeit die einzige Option) Diese Quelle unterstützt auch Hub-Seitenfenster-Empfehlungen für anonyme Besucher.Filtere nicht vorrätige Produkte: Aktiviere/Deaktiviere diese Option.Produkte filtern, die sich bereits im Warenkorb befinden: Aktiviere/Deaktiviere die Option.
   1. Choose how recommendations will be populated and filtered based on the visitor state:
      1. Logged-in and identified visitors: Klaviyo (default) or Shopify.
      2. Anonymous visitors: Shopify (default, and currently the only option). This source also powers Hub drawer recommendations for anonymous visitors.
      3. Filter out-of-stock products: Toggle On / Off.
      4. Filter products already in the shopper's cart: Toggle On / Off.
3. Design und Anpassung:Passe die visuellen Einstellungen so an, dass sich der Block auf deiner Website einheitlich anfühlt:Elemente: Ein- oder Ausblenden des Preises (standardmäßig angezeigt), der Lieblingsschaltflächen (standardmäßig angezeigt), der Schaltflächen zum Hinzufügen zum Warenkorb (standardmäßig ausgeblendet) und der Produktvariante (standardmäßig ausgeblendet).Schaltflächen: Wähle einen Stil (abgerundet, quadratisch, gebogen), eine Farbe, eine Textfarbe und eine Groß-/Kleinschreibung aus.Layout: Lege die maximale Breite, die maximale Anzahl von Produkten (1–10, Standard 4), den Innenabstand (oben, links, rechts, unten) und die Ränder (zwischen dem Titel und der Produktzeile sowie zwischen Produkten) fest. Konfiguriere die Bildgröße (Breite, Höhe) und die Passform (Abdeckung, Inhalt, Füllung).Schriftarten: Wähle Familien und Größen für die Kopfzeilenschriftart, die Schriftart des Produktnamens, die Preisschriftart und die Variantenschriftart aus.Benutzerdefiniertes CSS: Füge Klassen hinzu, um alle Customer-Hub-Elemente, alle eingebetteten Blöcke oder den Empfehlungsblock gezielt anzusprechen.
   1. Adjust the visual settings so the block feels native to your site:
      1. Elements: Show or hide price (shown by default), favorite buttons (shown by default), add-to-cart buttons (hidden by default), and product variant (hidden by default).
      2. Buttons: Choose a style (rounded, square, curved), color, text color, and text case.
      3. Layout: Set the max width, max products (1–10, default 4), padding (top, left, right, bottom), and margins (between the title and the product row, and between products). Configure image size (width, height) and fit (cover, contain, fill).
      4. Fonts: Select families and sizes for the header font, product name font, price font, and variant font.
      5. Custom CSS: Add classes to target all Customer Hub elements, all embedded blocks, or the recommendations block specifically.

4. Schließe die Einrichtung deiner Plattform ab:Installiere den Block im Frontend deiner E-Commerce-Plattform:Shopify: Füge über den Theme-Editor einen App-Block hinzu.Shopify Plus: Als Code-Fragment hinzufügen (div) für Händler, die Kontrolle auf Theme-Ebene benötigen.
   1. Install the block on your e-commerce platform's frontend:
      1. Shopify: Add as an app block through the theme editor.
      2. Shopify Plus: Add as a code snippet (div) for merchants who need theme-level control.
5. Veröffentlichen:Speichere und veröffentliche deine Änderungen. Der Block wird auf deiner Live-PDP entsprechend der Quelle, den Filtern und den Designeinstellungen angezeigt, die du konfiguriert hast.
   1. Save and publish your changes. The block will appear on your live PDP according to the source, filters, and design settings you've configured.

Attribution und Auswertungen

• Jeder Klick auf ein empfohlenes Produkt wird als Ereignis Produkt angeklickt getrackt, das als „Eingebetteter Produktempfehlungsblock“ stammt.
• Klicks werden auf die gleiche Weise zugeschrieben wie ein Klick auf ein Produkt im Hub-Seitenfenster.
• Klaviyo protokolliert Aufrufe und Klicks, damit du die Akzeptanz (Konten mit mindestens einem Live-Empfehlungsblock), das Kundenengagement (Click-Through-Rate, Add-to-Cart-Rate nach einem Klick, Favoriten) und den Umsatz (zurechenbarer Umsatz pro 1.000 Block-Impressionen und Anteil der Bestellungen mit einem empfehlungsgestützten Klickpfad) verfolgen kannst.

Stilübereinstimmung

Passend zu deinem bestehenden Theme empfiehlt es sich, Shopify den Produktblock im Namen von Klaviyo rendern zu lassen. Shopify rendert jedoch keine Blöcke innerhalb der App-Erweiterung von Klaviyo mit dem Kontext des Produkts. Stattdessen erstellen wir einen neuen Abschnittsblock, der den Produktblock wiedergibt.