Een intelligente Abandoned Cart Pop-Up

Zelf een Abandoned Cart pop-up bouwen die rekening houdt met je klanten

Enkele weken geleden heb ik een blogpost compleet herschreven over het zelf bouwen van een Abandoned Cart pop-up met Elementor Pro. Omdat Elementor geen manier kent om te detecteren of er wel of geen sprake is van een gevulde winkelwagen in de geavanceerde settings voor je pop-up hebben we van de nood een deugd gemaakt, en bij exit-intent tonen we indien er sprake is van een gevulde winkelwagen de boodschap dat er nog producten in de winkelwagen zijn en in overige situaties de boodschap, dat de bezoeker zich in kan schrijven voor de nieuwsbrief.

En dit werkt allemaal uitstekend, tenminste… wanneer je Elementor Pro gebruikt. Maar wat, wanneer je Elementor Pro niet gebruikt. Wat wanneer je een andere pagebuilder, of helemaal geen pagebuilder gebruikt? Of wat wanneer je die ‘Meld je aan voor de nieuwsbrief’ dialoog helemaal niet als pop-up wilt tonen?

In de blogpost van vandaag laat ik je zien hoe je zelf een intelligente abandoned cart pop-up kan bouwen met behulp van de If-So plugin. Een plugin die rekening houdt met het gedrag van de klant om de juiste aanbieding op het juiste moment te doen, om de bezoeker alsnog tot een aankoop te verleiden.

Wat gaan we maken?

In dit artikel werken we samen aan het bouwen van een Abandoned Cart pop-up die met een aantal zaken rekening houdt. Die voorwaarden waar rekening mee wordt gehouden zijn min of meer door jouzelf te bepalen, maar voor het voorbeeld moeten we natuurlijk een aantal voorbeeldregels bedenken.

Nieuwe klanten krijgen korting

Wanneer je een klant eenmaal tot een eerste bestelling weet te verleiden is het altijd makkelijker om hem opnieuw te laten kopen. Die eerste bestelling wil je dus zeker binnen hebben. Daarom geef je een nieuwe klant een korting, in ons voorbeeld 10%, wanneer hij wel een gevulde winkelwagen heeft, maar niet eerder besteld heeft.

Een korting geven over een ‘abandoned cart’ houdt één groot risico in. Wanneer je standaard een bepaald percentage korting geeft, dan gaat de bezoeker van je website die dat door heeft daarop rekenen en zal dan iedere keer ‘zijn winkelwagen verlaten’ vóór een bestelling te plaatsen en op deze manier eigenlijk standaard een x percentage korting van je krijgen. Dat is niet de bedoeling.

Daarom krijgen mensen die eerder al besteld hebben geen extra korting, met echter enkele uitzonderingen.

Klanten met meer waarde in de winkelwagen dan jouw AOV krijgen korting

AOV staat voor ‘Average Order Value’. Deze Average Order Value is een kengetal wat je kan berekenen per klant of over jouw hele winkel. Die berekening is eigenlijk heel eenvoudig. Je neemt het totaalbedrag aan bestellingen, minus de verzendkosten en belastingen over een periode en deelt het door het aantal geplaatste bestellingen over die periode. Dat bedrag is de AOV van je shop.

En -je begrijpt het al- voor de AOV van je klant is dezelfde berekening over de bestellingen van je klant.

Wanneer een klant bij elkaar meer dan je AOV in de winkelwagen heeft, wil je natuurlijk graag, dat die bestelling geplaatst wordt. En dat is een goede reden om deze klant korting te geven. In ons voorbeeld geven we de klant 5% korting.

Klanten die een AOV hebben hoger dan de AOV van je winkel krijgen korting

Evenzogoed willen we de klanten die gemiddeld voor meer dan de AOV in je winkel kopen, maar vandaag even iets minder, ook belonen omdat ze trouwe klanten zijn. Deze klanten geven we ook een korting van 5%.

Klanten die meer dan een x bedrag in je winkel hebben uitgegeven krijgen korting

En tenslotte wil je natuurlijk de ‘big spenders’ ook niet teleurstellen. Laten we zeggen, dat we de klanten die in totaal 20x de AOV hebben uitgegeven -trouwe klanten dus- een korting van 7,5% geven.

Wanneer een klant niet is ingelogd, krijgt hij alleen korting, indien hij meer dan de AOV in zijn winkelwagen heeft.

Omdat je aanbiedingen niet in wilt trekken (Je krijgt 10% korting, oh wacht, nadat je bent ingelogd, zie ik dat je alleen maar 5% krijgt) krijgt een niet-ingelogde klant alleen een korting, indien hij meer dan de AOV in de winkelwagen heeft.

En wat we gaan doen, is het bouwen van een Abandoned Cart pop-up die met al deze zaken rekening houdt.

Onze toolkit

Zoals ik in het begin al heb aangegeven, maken we voor het bouwen van deze pop-up gebruik van If-So. If-So is een plugin voor conditionele content. Ik heb hier in het verleden al het één en ander over geschreven, en enkele leuke voorbeelden laten zien, maar sinds die blogartikelen is If-So gegroeid en kan behoorlijk wat meer. Om te kunnen maken wat ik hier beschrijf hebben we overigens de betaalde versie van If-So nodig, de gratis versie biedt niet de mogelijkheden die we nodig hebben.

Naast If-So hebben we natuurlijk WooCommerce nodig en een aantal add-ons voor If-So. De WooCommerce integratie voor If-So en de Trigger Events.

De WooCommerce integratie voor If-So

De WooCommerce integratie maakt het mogelijk om onze ‘Abandoned Cart pop-up’ informatie uit WooCommerce op te halen.

Trigger Events

De ‘Trigger Events’ plugin voor If-So zorgt ervoor dat we conditionele content niet alleen binnen een pagina, maar ook in een plugin kunnen gebruiken.

De If-So trigger

In mijn artikel over conditional content en If-So stond ik vooral stil bij hoe je If-So voor conditionele content binnen een pagebuilder kunt gebruiken. If-So kan echter veel meer.

De basis van vrijwel alle ‘gevorderde’ mogelijkheden is een zogenaamde ’trigger’. Een voorwaarde waaraan voldaan moet worden om bepaalde content te tonen. We kunnen vervolgens die ’trigger’ als shortcode invoegen in een pagina, template of als trigger voor de gehele site.

We gaan dus naar If-So -> Add New Trigger, en daar krijgen we een scherm als hieronder te zien

Het principe hier is eenvoudig. Wanneer er wordt voldaan aan een bepaalde voorwaarde, wordt de inhoud van de ‘Versie’ van de content getoond. In het veld voor de inhoud kan je ‘standaard’ WordPress content en shortcodes gebruiken.

Eén voor één wordt gekeken of er aan een voorwaarde wordt voldaan, en bij de eerste keer dat er aan een voorwaarde wordt voldaan, wordt de bijbehorende code getoond. Daarna stopt de uitvoering.

Hoewel If-So wel de AOV per klant kan vergelijken, maar niet de AOV van de hele shop op kan halen, moeten we zelf een bedrag voor de AOV van de shop instellen. Gelukkig is WooCommerce hier behulpzaam in. Wanneer je naar ‘Rapporten’ gaat en kiest voor de periode waarover je de AOV wilt berekenen, dan krijg je een bedrag voor de bruto verkoop en het aantal geplaatste bestellingen. Nu hoef je alleen die twee bedragen nog door elkaar te delen.

In ons voorbeeld nemen we 500 euro als voorbeeld de AOV.

Om het proces goed te doorlopen is het belangrijk, dat je eerst nadenkt over de juiste volgorde van het afhandelen van de verschillende voorwaarden.

Niets tonen, indien er niets in de winkelwagen is

Omdat we geen pop-up willen tonen indien er niets in de winkelwagen is, is onze eerste voorwaarde, dat er 0 producten in de winkelwagen voorkomen. Als dat zo is, laten we het content veld leeg. Dan zal er niets gebeuren. Dus ook geen pop-up zonder inhoud.

Ingelogde klanten met een totaal orderbedrag boven 5000 euro krijgen altijd 7,5% korting

De tweede voorwaarde heeft betrekking op degenen met een totale orderwaarde van 10*AOV. Voor het gemak van het voorbeeld laten we hier even de BTW buiten beschouwing en gaan we ervan uit dat alle bedragen ex BTW zijn. Als dat niet zo zou zijn, zou je het bedrag nog door 1,21 moeten delen.

We klikken op de knop + Add Another Version en Versie B wordt toegevoegd, die vullen we als volgt in:

Voorlopig vullen we hier even wat algemene tekst in (‘Hey Big Spender’), maar straks is het natuurlijk de bedoeling dat hier een mooi opgemaakte template in komt te staan.

De regels voor de AOV

Wanneer we de AOV’s als regel implementeren, moeten we even nadenken over de juiste volgorde. Wil je eerst de AOV van de winkelwagen met de grenswaarde vergelijken, of de AOV van de klant zelf. Wat hier van belang is, is de hoogte van de korting. In ons voorbeeld hebben we de hoogte van de korting gelijk gehouden, maar als we verschillende kortingspercentages zouden hebben gekozen, wat zou er dan gebeuren?

Stel, we zouden hebben gesteld, dat iemand met een gemiddelde AOV geen 5, maar 6% zou krijgen. En ik zou iemand zijn die nu een bedrag lager dan de AOV in de winkelmand zou hebben, maar gemiddeld hoger dan de AOV bestellen.

Wanneer de winkelmand eerst getest zou worden, zou de test falen. Daarna wordt de gemiddelde bestelwaarde van de klant getest, en de test slaagt. Ik krijg dus de bedoelde 6% korting.

Wanneer ik echter wel meer dan de AOV in de winkelmand zou hebben, zou de eerste test slagen, en zou ik 5% korting krijgen, niet de bedoelde 6%.

Omdat het de bedoeling is, dat degene met een eigen AOV hoger dan de shop AOV de hogere korting krijgt, komt de ‘meest voordelige regel’ voor een doelgroep die aan beide voorwaarden voldoet altijd als eerste.

Bezoeker is niet ingelogd

We hebben nu alle voorwaarden gehad, waarbij de bezoeker recht heeft op een bepaalde korting, behalve één. De ‘Nieuwe klant’.

Nu is het probleem, dat wanneer iemand niet ingelogd is, het ‘Aantal bestellingen’ 0 is. Hetzelfde aantal voor een nieuwe klant, die wel ingelogd is. Dus de eerste test die we nu moeten doen, is of de klant is ingelogd. Is hij niet ingelogd, dan krijgt hij wel een pop-up, maar geen korting.

Bezoeker is ingelogd, niet eerder gekocht

We hebben nu nog twee groepen over. We weten nu, dat het allemaal ingelogde gebruikers zijn. Sommigen hebben al bestellingen geplaatst, anderen niet. En degenen die nog geen bestelling hebben geplaatst krijgen een korting van 10%.

Bezoeker ingelogd, heeft al eerder gekocht

En dan houden we nog één situatie over, de situatie waarbij iemand al een bestaande klant is, maar aan geen van de andere voorwaarden voldoet. Net zoals de niet-ingelogde gebruikers, krijgt hij wel een pop-up te zien, maar geen extra korting.

Omdat dit de ‘laatste voorwaarde’ is, hoeven we die niet te benoemen en kunnen dit invullen bij de laatste, ‘Default content’ versie.

Opslaan… en verder gaan

Om onze Trigger te kunnen gebruiken zullen we deze eerst op moeten slaan. Bij het opslaan wordt een shortcode gegenereerd die we kunnen gebruiken.

Wanneer we deze code invoegen in een pagina, dan zien we wel de tekst die we verwachtten, maar niet in een pop up.

Hoe maken we van onze Intelligente Abandoned Cart een pop-up?

De reden waarom we de Trigger Events plugin hebben geïnstalleerd, is omdat we met behulp van deze plugin een ‘shortcode’ van If-So om kunnen toveren tot een pop-up.

We hebben nu een ‘intelligente abandoned cart’ waarschuwing, maar hij ‘popt-niet-up’. Dat komt omdat we aan de shortcode nog een aantal extra parameters toe moeten voegen. Dat hoef je overigens niet met de hand te doen. Op de pagina van je trigger staat in de rechter kolom een ‘shortcode builder’ die je hierbij helpt. Klik ik op de link ‘Display Trigger as pop-up’ dan krijg ik een aantal extra instellingen te zien.

Hierboven staan alvast de keuzes die ik hier heb ingevuld. Ik wil namelijk dat de pop-up getoond wordt bij ‘Exit intent’, en de bezoeker deze kan sluiten door op de ‘X’ te klikken, of op de achtergrond naast de popup. Heb je dat gedaan, dan wordt de volgende shortcode gegenereerd:

[ ifso id="322" ajax="yes" display="modal" eventType="exit-intent" openbtn=""]

Het id-nummer van de trigger is afhankelijk van de daadwerkelijke trigger, die moet je gewoon overnemen vanuit je pagina. De andere waarden:

• ajax: Dit heeft niets de maken met voetbalclubs of schoonmaakmiddelen, maar geeft aan, dat de inhoud niet als ‘gewone HTML’ geladen moet worden, maar via een protocol wat ‘AJAX’ heet. Dit zorgt ervoor dat je content ook daadwerkelijk ‘dynamisch’ is, en niet afhankelijk van je caching plugin. (Als je deze waarde niet in zou vullen of op ‘no’ zou zetten zou de pagina helemaal vanuit Cache geladen worden, en zou je altijd de ‘Default content’ te zien krijgen.
• display: Wanneer je hier ‘modal’ aangeeft, wordt de content als pop-up getoond. Dit is dus de ‘magie’ die er een pop-up van heeft gemaakt.
• eventType: Geeft het type event aan, waarop de pop-up getoond moet worden.
• openbtn: Wanneer je niet via een exit-event’, maar via een muisklik een pop-up zou willen tonen, heef je hier de CSS-selector aan om de pop-up te openen.

De volledige beschrijving van de Trigger Event parameters vind je hier

De pop-up op alle pagina’s activeren

Natuurlijk willen we, dat de pop-up op alle pagina’s actief is. Want waar je ook van de site weg wilt gaan, zodra er iets in de winkelwagen is, wil je de bezoeker hier op attent maken. Nu kan je natuurlijk shortcodes in headers of footers toe willen voegen, maar wanneer een trigger voor alle -of bijna alle- pagina’s van toepassing zou moeten zijn, kan dit ook makkelijker en sneller.

Hiervoor ga je naar If-So -> Settings en scroll je door tot het kopje ‘Trigger Events’. In het veld ‘Load Triggers on all pages’ kopieer je de shortcodes die je op alle pagina’s ingevoegd wilt hebben. Wil je de code op bepaalde pagina’s niet hebben, voeg dan de URL naar die pagina’s toe in het veld ‘Exclude the content from appearing on specific pages’ wat hier direct onder staat.

Meten is weten!

Een ander voordeel van If-So is dat het met If-So relatief makkelijk is om de conversie te meten. Wat je uiteindelijk wil, is dat je bezoeker klikt en naar de winkelwagen pagina gaat. En het zou leuk zijn om te zien hoeveel mensen klikken, en op welke versie ze hebben geklikt.

If-So heeft een eenvoudig systeem om dit te kunnen meten. In de rechter sidebar van de trigger zie je een widget met de conversiegegevens.

Op dit moment gebeurt er nog niets met ‘conversie’ omdat If-So niet weet hoe jij conversie wilt meten. Maar wanneer je klikt op ‘Set up a conversion’ zie je een veld met de volgende shortcode:

[ ifso_conversion triggers="322"]

Wanneer je deze shortcode aan een pagina toevoegt, zal If-So bijhouden door welke versie van de trigger jouw bezoeker naar die pagina is gestuurd. Heb je meerdere triggers die allemaal bedoeld zijn om een klant naar een pagina te krijgen, kan je meerdere ID’s tussen de quotes invullen, dus

[ ifso_conversion triggers="322,456,789"]

wil zeggen, dat voor de triggers 322, 456 en 789 statistieken bij moeten worden gehouden.

Omdat we vanuit de pop-ups naar de winkelwagen pagina verwijzen, voegen we deze shortcode toe aan de winkelwagen pagina.

De inhoud van de Versies

We hebben nu een werkende, pop-up, maar aan de inhoud laat nog heel wat te wensen over. Wanneer ik nu de pop-up trigger krijg ik een witte pop-up met een wat wezenloze tekst. Omdat verschillende lezers verschillende tools voor de vormgeving zullen gebruiken, zal ik niet ingaan op hoe je de templates maakt voor iedere denkbare editor, maar ga ik er liever op in, welke inhoud in de templates moet komen te staan.

De meeste pagebuilders hebben een mogelijkheid om een sectie / container / template of hoe het ook binnen jouw pagebuilder wordt genoemd als shortcode op te nemen. Die shortcodes kun je plakken in de ‘Versie velden’ van If-So.

Mocht je overigens geen page- of templatebuilder gebruiken, en het allemaal in HTML willen doen, kan het ook. Vergeet dan alleen niet bij iedere versie de HTML in te voegen, wanneer de tab ‘Tekst’ is gekozen. Probeer je het onder ‘Visueel’ dan krijgt je bezoeker de HTML te zien, niet de bedoelde layout.

Een pakkende titel

Allereerst wil je natuurlijk dat je bezoeker de pop-up ook direct ziet! Dus je begint met een titel die opvalt.

Een afbeelding

Hoewel niet strikt noodzakelijk, is het altijd goed om ook een afbeelding als eye-catcher te gebruiken.

Zoals hier bijvoorbeeld:

De kortingscode

Wanneer je een korting aan wilt bieden, dan kan dat door een kortingscode aan te maken, en die code in de plugin pop-up te tonen. Hier loop je echter tegen een aantal uitdagingen aan. De belangrijkste uitdaging is echter wel, dat je de coupon een beperkte levensduur wilt geven.

De beste manier is om gebruik te maken van een speciale shortcode, die per keer dat hij getoond wordt een nieuwe coupon aanmaakt.

Een voorbeeld van deze code zie je hier.

Een tweede belangrijk punt is dat veel van deze kortingscodes nooit gebruikt zullen worden. Het is dus zaak regelmatig die ‘ongebruikte codes’ op te ruimen. In het blogartikel ‘Automatisch je WooCommerce Kortingsbonnen opruimen’ lees je hoe je dit doet.

Links naar de winkelwagen pagina

En natuurlijk moeten er in je templates links naar de winkelwagen pagina voorkomen. Het is een goede gewoonte om de afbeelding en titel klikbaar te maken, en voor de duidelijkheid er ook een knop met een link naar de winkelwagen in te plaatsen.

Maatwerk voor je webshop?

Heb jij iets voor je WooCommerce webshop nodig, wat je niet kan vinden in standaard plugins? Sinds 2012 help ik ondernemers met hun WooCommerce webshops. Hierbij kijk ik niet alleen naar het design, maar vooral ook naar de marketing kant en marketing mogelijkheden voor de webshops. Wil jij een keer met mij van gedachten wisselen hoe jouw webshop meer omzet zou kunnen behalen, neem dan contact op voor een vrijblijvende videocall.