Aan de slag met productaanbevelingen op je site

Wat je leert

Leer hoe je een gepersonaliseerd blok met productaanbevelingen rechtstreeks kunt toevoegen aan productdetailpagina's (PDP's), zodat Klaviyo's personalisatie op de site verder gaat dan de lade van Klaviyo Customer Hub. Deze gids behandelt wat het ingesloten blok doet, hoe je het configureert en ontwerpt, hoe de functies in de loop van de tijd worden uitgerold en welke technische afwegingen er achter de implementatie zitten.

Ingebedde productaanbevelingen zijn van ontwerp af aan onafhankelijk van een commerceplatform en kunnen uiteindelijk worden gehost op elke pagina van je site, met een eerste focus op de PDP. Neem voor feedback over deze functies contact op met het productteam van Klaviyo Customer Hub.

Voordat je van start gaat

• Vereiste: dit blok vereist dat Klaviyo Customer Hub is ingeschakeld in Klaviyo.
• Platformondersteuning: Vandaag beschikbaar op Shopify (als een thema-appblok), Shopify Plus (als een insluitbaar codefragment) en Salesforce Commerce Cloud (alleen SFRA-ondersteuning). Ondersteuning voor extra platforms staat gepland.
• Engine-afhankelijkheid: De kwaliteit van aanbevelingen wordt aangedreven door de aanbevelingsengine van Klaviyo. We bieden aanbevelingen aan via onze next-generation aanbevelingsservice – een upgrade van ons vorige systeem, dat aanbevelingen niet kon personaliseren voor anonieme bezoekers.

Opmerking: onsite productaanbevelingen waren eerder alleen beschikbaar in de Hub-lade en alleen voor ingelogde gebruikers. Deze functie haalt aanbevelingen uit de Hub-lade en plaatst ze op de PDP.

Wat je kunt doen met ingesloten productaanbevelingen

Met het ingesloten blok met productaanbevelingen kun je relevante producten direct op je productdetailpagina’s tonen, zodat elke bezoeker – bekend of anoniem – iets ziet dat relevant voor ze is.

• Laat het blok aansluiten op de stijl van je site: Pas lettertypen, kleuren, lay-out en knopstijlen aan zodat het blok aanvoelt als een native onderdeel van je thema. Voeg aangepaste CSS-klassen toe die gericht zijn op alle elementen van Klaviyo Customer Hub, alle ingesloten blokken of specifiek het aanbevelingenblok. Bewerk de blokkop (bijv. "Topkeuzes voor jou" of "Dit vind je misschien ook leuk") en kies een carrouselachtige lay-out.
• Personaliseer aanbevelingen voor bekende bezoekers: Aanbevelingen zijn gebaseerd op wat Klaviyo over een profiel weet, mogelijk gemaakt door de Next Gen Product Recommendations (NGPRS)-service.
• Laat elke bezoeker iets zien: Anonieme bezoekers zien standaard algemene productaanbevelingen, afkomstig van Shopify.
• Snel laden zonder de paginaprestaties te schaden: het blok is ontworpen om vanaf het begin snel te laden, zonder je pagina te verzwaren met extra code – zodat je site niet trager wordt en je prestatiescores niet worden beïnvloed.
• Meet betrokkenheid en omzet: Elke klik wordt bijgehouden als een Clicked Product -event en op dezelfde manier toegewezen als een klik op een product in de Hub-lade, zodat je weergaven, klikken en toe te wijzen omzet kunt meten.
• Houd de ervaring consistent: Bekende of geïdentificeerde bezoekers kunnen dezelfde aanbevelingen zien in de Hub-lade en op de PDP.
• Laat shoppers producten opslaan voor later: Shoppers kunnen een aanbevolen product rechtstreeks vanaf de kaart aan hun favorieten toevoegen of aan hun winkelwagen als ze nog niet klaar zijn om te kopen.
• Voorkom dat je aanbeveelt wat al in de winkelwagen zit: Producten die al in de winkelwagen van een shopper zitten, worden uitgesloten van de aanbevelingen die aan diegene worden getoond.

Maak een nieuw ingesloten productaanbevelingenblok aan

Dit is een nieuw insluitbaar blok – stel het op dezelfde manier in als andere ingesloten blokken zoals Favorieten en FAQ, in plaats van via het bredere framework Embedded Personalization Content Blocks.

1. Open de blokbibliotheek:
   1. Navigeer in Klaviyo’s linkernavigatie naar Service > Klaviyo Customer Hub. Klik op Design > Onsite blocks. Zoek Product recommendations in de blokbibliotheek en voeg het toe aan je productpagina.
2. Configureer je aanbevelingsbron:
   1. Kies hoe aanbevelingen worden ingevuld en gefilterd op basis van de status van de bezoeker:
      1. Ingelogde en geïdentificeerde bezoekers: Klaviyo (standaard) of Shopify.
      2. Anonieme bezoekers: Shopify (standaard en momenteel de enige optie). Deze bron ondersteunt ook aanbevelingen in de Hub-lade voor anonieme bezoekers.
      3. Producten die niet op voorraad zijn filteren: Schakel Aan/Uit.
      4. Filter producten die al in de winkelwagen van de shopper zitten: Schakel Aan/Uit in.
3. Ontwerp en pas aan:
   1. Pas de visuele instellingen aan zodat het blok native aanvoelt op je site:
      1. Elementen: prijs tonen of verbergen (standaard weergegeven), favorietenknoppen (standaard weergegeven), aan winkelwagen toevoegen-knoppen (standaard verborgen) en productvariatie (standaard verborgen).
      2. Knoppen: Kies een stijl (afgerond, vierkant, gebogen), kleur, tekstkleur en hoofdlettergebruik.
      3. Indeling: Stel de maximale breedte, het maximumaantal producten (1–10, standaard 4), opvulling (boven, links, rechts, onder) en marges in (tussen de titel en de productrij en tussen producten). Configureer de afbeeldingsgrootte (breedte, hoogte) en de pasvorm (bedekken, bevatten, vullen).
      4. Lettertypen: Selecteer families en groottes voor het lettertype van de koptekst, lettertype van de productnaam, lettertype van de prijs en lettertype van de variatie.
      5. Aangepaste CSS: Voeg classes toe om je te richten op alle Klaviyo Customer Hub-elementen, alle ingesloten blokken of specifiek het aanbevelingenblok.

4. Platforminstallatie voltooien:
   1. Installeer het blok in de frontend van je e-commerceplatform:
      1. Shopify: Voeg toe als een app-block via de thema-editor.
      2. Shopify Plus: Voeg toe als codefragment (div) voor merchants die controle op themaniveau nodig hebben.
5. Publiceren:
   1. Sla je wijzigingen op en publiceer ze. Het blok verschijnt op je live PDP op basis van de bron-, filter- en ontwerpinstellingen die je hebt geconfigureerd.

Attributie en analytics

• Elke klik op een aanbevolen product wordt bijgehouden als een Geklikt product -gebeurtenis, met als bron "Ingesloten productaanbevelingsblok".
• Klikken worden op dezelfde manier toegewezen als een klik op een product in de Hub-lade.
• Klaviyo registreert weergaven en klikken, zodat je adoptie (accounts met minstens één live aanbevelingenblok), betrokkenheid (doorklikpercentage (CTR), percentage toegevoegde producten aan winkelwagen na een klik, favorieten) en omzet (toerekenbare omzet per 1.000 blokimpressies en aandeel van bestellingen met een door aanbevelingen ondersteund klikpad) kunt volgen.

Stijlmatching

Om aan te sluiten op je bestaande thema, is de ideale aanpak dat Shopify het productblok namens Klaviyo rendert. Shopify rendert echter geen blokken binnen Klaviyo's app-extensie met de context van het product, dus maken we in plaats daarvan een nieuw sectieblok dat het productblok rendert.