De Core Web Vitals worden vanaf Q1 2021 een belangrijke UX rankingfactor voor Google. De drie nieuwe rankingfactoren; Largest Contentful Paint (CLP), Cumulative Layout Shift (CLS) en First Input Delay (FID) heb ik uitgebreid behandeld in mijn “Wat zijn de Core Web Vitals?” blog. Helaas is het nog niet mogelijk om dit real-time of in Google Analytics door te meten. Hiervoor heb ik een tool ontwikkeld.
Waarom wil je de Core Web Vitals doormeten in Google Analytics?
Ten eerste, momenteel is het nog niet mogelijk om alle aspecten van de Core Web Vitals door te meten in de tools van Google. Het is mogelijk om waardevolle inzichten te halen uit de Google Search Console maar hier is het nog niet mogelijk om de First Input Delay (FID) te berekenen. Ten tweede, door deze gegevens naar Google Analytics te sturen krijg je inzicht in het effect van deze Core Web Vitals op je Bouncerate, Time on Site en Conversiepercentage. Je kunt deze drie metrics gebruiken als 0-meting voordat je verbeteringen op je website gaat doorvoeren. Zodra je deze pagina’s of je website hebt geoptimaliseerd kun je bekijken of dit ook effect heeft gehad op het Conversiepercentage of Bouncerate.
1. Core Web Vitals Script in Google Tag Manager (GTM)
Om deze gegevens naar Google Analytics te versturen maken we gebruik van een Google API. In dit voorbeeld maken we gebruik van Google Tag Manager om de metingen in te stellen. Maak in Google Tag Manager een “Custom HTML” tag aan en voeg de onderstaande code toe.
Credits: Philip Walton & Google/web.dev.
2. De waarden ophalen uit de Data Layer
Zodra deze code wordt gepubliceerd zullen er scores worden verstuurd naar de DataLayer van je website. Deze scores gaan we ophalen en versturen naar Google Analytics. Creëer drie verschillende DataLayer variabelen onder “Variabelen” in Google Tag Manager met de volgende waarden:
- event_category
- event_action
- event_value
- event_label (optioneel)
Controleer of het event “Core Web Vitals” terugkomt in de debugger van Google Tag Manager en bekijk of de eerdere genoemde waarden; event_category, event_action, event_value, event_label worden voorzien van een waarde.
3. Een leesbare syntax (optioneel)
Persoonlijk vind ik de gegevens die het script naar de Data Layer verstuurt niet zo netjes. Deze geeft alleen waarden als “FID” of “LCP” weer. Voor werknemers of andere gebruikers van het Google Anlaytics account is dit moeilijk te begrijpen. Daarom maak ik gebruik van een RegEx tabel om dit om te zetten naar een leesbaar formaat. Zo wordt “FID” omgezet naar “First Input Delay (FID)”.
4. Voorkom een wildgroei
We zijn bijna zover om de gegevens naar Google Analytics te versturen. Het huidige script verstuurd alle gegevens van de Core Web Vitals naar Google Analytics. Dus ook als je veilig zit qua score dan vind je dit alsnog terug in Google Analytics. Dit wordt zeer onoverzichtelijk en daarom heb ik een tweede script aangemaakt. Dit script stuurt enkel en alleen een signaal naar de DataLayer als de scores te hoog zijn!
Het onderstaande script dient te worden geplaatst in een “Custom Javascript” variabele in Google Tag Manager. Dus maak het niet aan als een “Custom HTML” Tag wat we bij het eerste script wel hebben gedaan.
5. De Core Web Vitals naar Google Analytics versturen
Nu is het tijd om het bovenstaande te verpakken in één Google Analaytics Tag. Vul de volgende velden in:
- Category: De categorie die we opgehaald hebben uit de DataLayer (stap 2)
- Action: De verbeterde syntax (stap 3)
- Label: De restrictie/waarde die we hebben aangemaakt om de hoeveelheid te beperken (stap 4)
- Value: De score van de desbetreffende Web Vital (Stap 2)
Waar in Google Analytics kan je de Core Web Vitals terugvinden?
Zodra je het bovenstaande hebt geïmplementeerd en gepubliceerd worden er gegevens naar Google Analytics verstuurd. Het kan enkele uren duren voordat je deze gegevens ziet verschijnen.
Onder Gedrag > Gebeurtenissen > Overzicht zie je een nieuwe categorie “Core Web Vitals” staan. Door hierop te klikken en te filteren op “Event Action” of “Event Label” is te zien of je website een te hoge score heeft met betrekking tot de Core Web Vitals. Gebruik het “Secundaire Dimensie” filter om dit verder te segmenteren op een pagina niveau. Zie je nu een aantal pagina’s naar boven komen? Tijd om te gaan optimaliseren! Bekijk na de optimalisaties of dit effect heeft op je conversiepercentage of bouncerate!
Heb je een vraag hierover? Laat een reactie achter of neem contact met me op!
