[CASE] Personaliseren op basis van type device

| 9 september 2017 | 0 Comments

Websites worden tegenwoordig steeds meer bezocht vanaf mobiele apparaten. Waar er voorheen bij een design vanuit de desktop werd gedacht, is Mobile First nu de trend. Je begint met Design & UX voor de website op het mobiele device en maakt de website vervolgens ook geschikt voor desktop. Mobile First gaat dus veel verder dan het hebben van een responsive website. Het meest belangrijke verschil tussen een website op mobiel versus desktop is de hoeveelheid beschikbare ruimte op het scherm. Als je het gedrag van bezoekers op je website analyseert, dan zie je duidelijke verschillen qua gebruik op mobiel en desktop. Bij Omrekenen.nl heb ik op basis van Web Analyse de homepagina gepersonaliseerd voor mobiele gebruikers. In dit artikel lees je hoe ik dat precies gedaan heb.

Aanleiding Personalisatiecase mobiele gebruikers

Een goede personalisatie case begint met het bekijken van de kwantitatieve en kwalitatieve data.

 Soort gedrag  Desktop gebruikers  Mobiele gebruikers
 Scrollgedrag  Bereiken vaker einde van de pagina  Bereiken minder vaak einde pagina
 Klikgedrag  Klikken direct door naar juiste pagina  Klikken via categorie naar juiste pagina
 Bounce %  Bounce% is relatief gezien laag  Bounce% is relatief gezien hoog

Op basis van deze data weet je dat mobiele gebruikers een groot gedeelte van de pagina niet zien. Ook komen ze via een omweg bij de pagina terecht die ze zoeken. Een deel van de mobiele gebruikers ziet de uiteindelijke pagina niet eens, omdat ze dan de website al verlaten hebben.

Doel van de personalisatie

Het optimaliseren van de customer journey van mobiele gebruikers op Omrekenen.nl, zodat ze sneller en eenvoudiger bij de juiste omrekentool terecht komen.

Inrichten van de personalisatie

Deze personalisatie heb ik ingericht via Google Tag Manager. Het stappenplan is concreet:

  1. Variabele maken om te detecteren of het gaat om een mobiele gebruiker;
  2. Trigger maken die ervoor zorgt dat de personalisatie plaatsvindt;
  3. Inhoud van de daadwerkelijke personalisatie bepalen.

Detecteren of het gaat om een mobiele gebruiker

Dit doe je door een custom variabele aan te maken binnen Google Tag Manager. Wat deze variable doet is op basis van de inhoud van de variabele navigator.userAgent bepalen of het gaat om een mobiel device. Als je op een mobiel zit dan is de inhoud van de variabele isMobile true en als dit niet het geval is dan is de inhoud false.

Zo zie het er visueel uit in Google Tag Manager.

De onderstaande code kun je kopiëren naar Google Tag Manager.

function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
{
return 'true';
}
else
{
return 'false';
}
}

In een trigger geef je aan onder welke conditie een tag geladen moet worden. In dit geval willen we de tag alleen laden op de homepagina (page URL) en als de gebruiker op een mobiel device zit. Daarvoor moet de inhoud van de variabele isMobile gelijk zijn aan true.

Tag die zorgt voor personalisatie

De personalisatie zorgt ervoor dat onnodige informatie van de homepagina wordt verwijderd. In dit geval halen we de thumbnails weg en de inleidende tekst voor iedere calculator.

Impact van de personalisatie

Gebruikers hoeven minder ver te scrollen door het weglaten van de thumbnail en de inleidende tekst. Daardoor vinden ze op een makkelijkere manier de specifieke calculator die ze nodig hebben.


[Totaal: 3    Gemiddelde: 5/5]

Tags:

Categorie: Cases

Over de auteur ()

Ik heb een passie voor interessante online concepten. Zo maak, beheer en optimaliseer ik zelf diverse websites. Bovendien werk ik bij Centraal Beheer als Online Specialist aan het optimaliseren van de website van deze creatieve verzekeraar. Mijn specialisme is personalisatie. Vandaar ook deze website.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *