Interactieve componenten voor e-mailflows

Je verstuurt een verlaten-winkelwagen e-mail met drie verschillende producten. In plaats van de gebruiker te dwingen naar je website te klikken om andere kleurvarianten te bekijken, swipen ze direct in de e-mail naar rechts. Ze vinden de gewenste kleur en tikken op een knop om deze aan hun winkelmandje toe te voegen.

Interactieve componenten in een flow zijn ingebedde, functionele elementen zoals carrousels, accordeons en formulieren. Hiermee kunnen abonnees acties voltooien zonder hun inbox te verlaten.

Bij Flizz bouwen we dagelijks dit soort specifieke opstellingen voor e-commerce merken. De inbox is niet langer een statisch reclamebord waar je een link op plakt in de hoop op een klik. Door e-mails te veranderen in functionele mini-websites, neem je barrières in het koopproces weg. Wanneer je het aantal klikken vermindert dat nodig is om een beslissing te nemen, stijgt de omzet. Zo passen we interactieve elementen toe op geautomatiseerde flows om abonnees betrokken te houden.

Waarom acties in de e-mail zorgen voor een hogere conversie

Acties binnen de e-mail nemen de verplichte laadtijd weg tussen het lezen van een bericht en de interactie met een product. Dit vermindert de wrijving die normaal gesproken voor uitval zorgt.

Elke keer dat je een abonnee dwingt om op een link te klikken, te wachten tot een mobiele browser geladen is en hun weg te vinden op een nieuwe pagina, verlies je een deel van dat verkeer. Je hebt geen controle over de verbindingssnelheid van de gebruiker, maar wel over de plek waar de interactie plaatsvindt. Door de eerste stap van het besluitvormingsproces in de e-mailclient te houden, omzeil je de vertraging van het laden van een webpagina volledig.

Wanneer we een gemiddeld e-commerce e-mailprogramma auditen, zien we meestal click-through rates van rond de 1,5% tot 2,5% bij statische verlaten-winkelwagen flows. Bij de programma's die we in het eerste kwartaal van 2024 hebben beheerd, zorgde het vervangen van een statische lay-out door een interactieve selectie — waarbij de gebruiker direct in het bericht de gewenste schoenmaat kiest — consequent voor hogere engagement-cijfers. Gebruikers zijn simpelweg eerder geneigd om op een knop te tikken als het resultaat direct zichtbaar is op het scherm waar ze al naar kijken.

Ben je benieuwd hoe wij de code achter deze resultaten aanpakken? Lees dan meer over ons team van e-specialisten en hun ontwikkelmethoden. Het achterliggende principe is simpel: breng de website-ervaring naar de klant, in plaats van de klant naar de website te slepen.

3 componenten met hoog rendement voor e-commerce flows

Niet elk interactief element hoort thuis in elke e-mail. Te veel code activeert spamfilters en vertraagt het laadproces. Wij richten ons op componenten die barrières voor de aankoop daadwerkelijk wegnemen.

1. Swipebare productcarrousels in verlaten-winkelwagen flows

Wanneer een shopper een winkelmandje met meerdere artikelen achterlaat, toont een standaard e-mail deze in een lange verticale kolom. Op mobiele apparaten dwingt dit de gebruiker tot eindeloos scrollen. Een swipebare productcarrousel condenseert drie of vier producten in één horizontaal blok. De gebruiker swipet in eigen tempo door de artikelen. We zetten dit veelvuldig in voor e-commerce flows, omdat het schermruimte bespaart terwijl de visuele focus volledig op de achtergelaten producten blijft.

1. Accordeonmenu's voor informatieve productreeksen

Als je producten verkoopt in een hoger prijssegment of met technische specificaties, bevat je onboarding-flow na aankoop vaak veel informatie. Het versturen van een tekstblok van 800 woorden garandeert dat niemand het leest. Met accordeonmenu's kun je onderwerpen als "Onderhoudsinstructies", "Garantievoorwaarden" en "Installatiehandleiding" stapelen onder klikbare koppen. De abonnee tikt op de kop die relevant is, waarna de tekst naar beneden uitklapt. Dit houdt de e-mail visueel overzichtelijk terwijl alle details beschikbaar zijn.

1. Ingebedde sterbeoordelingen in review-flows

De traditionele e-mail voor een review-verzoek vraagt de koper om op een knop "Laat een review achter" te klikken, waarna een nieuw browsertabblad opent. Een interactieve versie plaatst de vijf lege sterren direct in de e-mail. De gebruiker tikt op de vierde ster, de e-mail registreert de keuze en pas daarna wordt de gebruiker doorgeleid naar een landingspagina om een tekstuele toelichting te schrijven. Het verkrijgen van die eerste micro-commitment in de inbox verhoogt het volume aan verzamelde beoordelingen aanzienlijk.

Bij de shops die we tussen oktober 2023 en maart 2024 hebben geoptimaliseerd, zorgde de overstap van een statische review-link naar een ingebed beoordelingssysteem voor een gemiddelde stijging van het aantal ingediende reviews met 18%.

Zero-party data verzamelen in de welcome series

Interactieve formulieren in welkomst-e-mails stellen abonnees in staat hun persoonlijke voorkeuren door te geven zonder de mail te verlaten. Dit verhoogt de snelheid waarmee data wordt verzameld.

Wanneer een nieuwe abonnee zich inschrijft, wil je weten wat zij echt willen kopen. Bij een kledingmerk moet je weten of ze winkelen voor heren- of dameskleding. De standaardaanpak is een welkomstmail met een link naar een voorkeurscentrum. Het probleem is dat maar weinig mensen op die links klikken.

Door direct een werkend HTML-formulier in de tweede e-mail van je welcome series te plaatsen, kan de abonnee met één tik de voorkeuren doorgeven en op "Verzenden" klikken. We maken hierbij gebruik van de resultaatgerichte aanpak van Flizz om deze methoden voor dataverzameling grondig te testen. Het verschil in voltooiingspercentages tussen statische links en interactieve formulieren is aanzienlijk.

Wanneer we deze interactieve polls implementeren voor kledingmerken, gebruiken we de verzamelde data om de rest van de geautomatiseerde flows te splitsen. Een gebruiker die in de welkomstmail op "Herenschoenen" klikt, ontvangt in de derde e-mail automatisch aanbevelingen voor herenschoeisel, waardoor algemene productfeeds volledig worden overgeslagen.

Omgaan met technische beperkingen en fallback-strategieën

Omdat e-mailclients interactieve code verschillend weergeven, moet elk interactief component een statische fallback-afbeelding of link bevatten. Deze wordt getoond als de geavanceerde code niet wordt ondersteund.

Apple Mail gaat uitstekend om met interactieve HTML en CSS-animaties. Gmail ondersteunt AMP for Email, maar verwijdert agressief specifieke CSS-checkboxen die worden gebruikt voor interactieve formulieren. Outlook-desktopclients staan erom bekend dat ze moeite hebben met moderne webcode en breken vrijwel elk interactief element dat je verstuurt.

---

Je kunt Outlook-gebruikers niet negeren, maar je moet Apple Mail-gebruikers ook niet straffen met een saaie ervaring puur om Microsoft tegemoet te komen. De oplossing die wij gebruiken voor ons ontwerp- en ontwikkelproces is conditionele logica.

We schrijven de code zo dat de e-mailclient het bericht leest en zelf beslist wat er getoond wordt. Als de client interactiviteit ondersteunt, verschijnt de swipebare carrousel. Is de client een oudere versie van Outlook? Dan wordt de carrousel verborgen en verschijnt er een statisch raster met productafbeeldingen.

Bouw altijd eerst je statische fallback.

Als de fallback niet goed oogt, is de campagne mislukt. De gebruiker die de statische versie ziet, mag geen idee hebben dat hij een interactieve versie mist. Het moet eruitzien als een hoogwaardige, normale promotionele e-mail.

De werkelijke impact van ingebedde elementen meten

Het bijhouden van interactieve componenten vereist aangepaste event-tagging. Standaard analyse-tools registreren interacties die niet leiden tot een websitebezoek vaak niet.

Als een abonnee vijf keer door een carrousel swipet maar niet op een link naar je website klikt, zal je e-mailmarketingplatform waarschijnlijk nul interactie registreren. Standaardplatformen vertrouwen namelijk op trackingpixels in links. Om dit op te lossen, plaatsen we trackingpixels in de specifieke CSS-triggers van de interactieve elementen. Zo zien we hoeveel mensen interactie hadden met het accordeonmenu of de carrousel, zelfs als ze de webshop uiteindelijk niet bezochten.

Voor ondernemers die deze statistieken beoordelen, is het essentieel om de tracking-instellingen af te stemmen op de gebouwde componenten. Wil je weten hoe wij aangepaste event-tracking inrichten voor onze partners? Bekijk dan onze volledige e-mailoplossingen op onze website. Door het werkelijke gedrag in de inbox te meten, kun je de componenten verfijnen. Je ontdekt bijvoorbeeld dat gebruikers wel langs de eerste drie producten swipen maar nooit bij het vierde product komen, wat een teken is dat je carrousels beter kunt beperken tot drie items.

FAQ

Werken interactieve e-mails op mobiele apparaten? Ja, interactieve e-mails werken uitstekend op mobiele apparaten, mits de touch-targets groot genoeg zijn. Mobiele gebruikers zijn gewend om te swipen en te tikken, waardoor carrousels en accordeonmenu's heel natuurlijk aanvoelen.

Welke e-mailclients ondersteunen interactieve carrousels? Apple Mail (zowel iOS als desktop) en Yahoo Mail bieden uitstekende ondersteuning voor interactieve CSS. Gmail ondersteunt interactiviteit voornamelijk via AMP, terwijl de meeste desktopversies van Outlook een statische fallback-afbeelding vereisen.

Wat is de invloed van interactieve componenten op de deliverability? Het toevoegen van interactieve code vergroot de bestandsgrootte van je e-mail. Als het HTML-bestand groter is dan 102KB, zal Gmail het bericht afbreken (clipping), waardoor je trackingpixels en afmeldlinks verborgen worden. Houd de code schoon en licht om een goede deliverability te behouden.

Kan ik een volledig afrekenproces in een e-mail plaatsen? Hoewel dit technisch mogelijk is met AMP for Email in specifieke clients, is het voor de meeste merken onpraktisch. We raden aan om interactieve elementen te gebruiken voor de selectiefase (zoals het kiezen van een maat of kleur) en de gebruiker vervolgens door te sturen naar een vooraf ingevulde checkout-pagina om veilig te betalen.

Hoeveel ontwikkeltijd kost een interactieve flow? Het opzetten van een interactief component kost ongeveer drie keer zoveel tijd als het ontwerpen van een statische e-mail. Je moet namelijk de interactieve versie, de fallback-versie en de mobiele weergaven bouwen en testen voor verschillende e-mailclients.

Je geautomatiseerde flows doen het zware werk, zodat jij je kunt concentreren op andere onderdelen van je bedrijf. Kijk eens naar je flow met het hoogste volume — meestal de verlaten-winkelwagen-serie — en test het vervangen van je statische productraster door een enkele interactieve carrousel om de impact op je conversieratio direct te meten.