Core Web Vitals meten in Google Analytics 4 via Google Tag Manager (Pure Video)

Wie het online marketing nieuws een beetje volgt weet dat Core Web Vitals een belangrijke factor wordt voor iedere website. De Core Web Vitals bestaan uit 3 metrics die de gebruikerservaring van jouw bezoeker meten. Vandaag legt Thijs uit wat Core Web Vitals zijn en hoe je ze kunt meten via Google Tag Manager om ze vervolgens terug te kunnen zien in Google Analytics 4! Lees je liever? Onder de video is een transcriptie van de video te vinden.

Transcriptie video

Als je het online marketing nieuws een beetje volgt heb je wel eens gehoord van de Core Web Vitals. Deze worden steeds belangrijker voor Google en gaan vanaf mei 2021 ook mee rekenen in de ranking in Google zelf. Vandaag ga ik iets meer vertellen over die Core Web Vitals en hoe je ze kunt meten in Google Analytics 4 met behulp van Google Tag Manager

Hoi mijn naam is Thijs van Hal en welkom bij deze gloednieuwe video op dit kanaal. Vandaag ga ik een beetje meer vertellen over Core Web Vitals en hoe je ze kunt meten in Google Analytics 4.

Wat zijn die Core Web Vitals?

Het zijn drie metrics waarmee de gebruikservaring op jouw website gemeten wordt. De metrics zijn ‘Largest Contentful Paint’, ‘First Input Delay’ en ‘Cumulative Layout Shift’. De Largest Contentful Paint heeft betrekking op de laadsnelheid, First Input Delay op het reactievermogen van de website en de Cumulative Layout Shift heeft te maken met de visuele stabiliteit van je website. Deze zijn belangrijk omdat het de gebruikservaring op de website beïnvloedt. Niet alleen wordt dus de content op je website belangrijk voor de ranking in Google maar ook de gebruikerservaring op de pagina zelf.

Om je een beetje een idee te geven waar je website aan moet voldoen:

• De LCP – Largest Contentful Paint – moet onder de twee en een half seconde zijn om goed te zijn en na 4 seconden wordt het echt slecht, dus dan is het in het rood.
• De FID – First Input Delay – moet onder 100 milliseconden zijn en na 300 milliseconden wordt het slecht.
• De CLS – Cumulative Layout Shift moet onder 0,1 zijn en na 0,25 dan wordt ie slecht.

De Core Web Vitals kun je op verschillende manieren meten. Dit kun je handmatig doen door naar bijvoorbeeld ‘Pagespeed Insights’ te gaan, je kan ze bekijken via Search Console en een derde methode die we vandaag gaan behandelen is het meten via Google Tag Manager zodat het automatisch in Google Analytics 4 komt.

Om dit in te stellen in Google Tag Manager hebben we verschillende dingen nodig:

• A, een website natuurlijk
• B, een Google Tag Manager account
• C, een Google Analytics 4 profiel.

Script inladen

We beginnen met het instellen in Google Tag Manager. De eerste stap in Google Tag Manager is het verkrijgen van het script die ervoor gaat zorgen dat de Core Web Vitals in de dataLayer worden gepusht. Vanuit deze dataLayer kunnen we ze vervolgens weer doorsturen naar Google Analytics 4. Om onszelf tijd te besparen kunnen we in plaats van de script zelf instellen een template gebruiken van Simo Ahava, deze video is gebaseerd op zijn blog die ik even in de beschrijving zal neerzetten.

Hiervoor moeten we in Google Tag Manager links onderin naar ’templates’, drukken vervolgens bij ’tag templates’ op ‘zoeken in galerij’ en als je vervolgens naar onder scrolt in de ’tag template importeren’ zie je hier Core Web Vitals, hier klik je op. Zoals de beschrijving aangeeft wordt de Core Web Vitals library vanaf een CDN geladen om vervolgens de Core Web Vitals in de dataLayer te pushen. Hiermee injecteer je dus het script van deze website en om je een idee te geven wat er dan geïnjecteerd wordt, dit is het script wat er uiteindelijk voor gaat zorgen dat de Core Web Vitals gemeten worden en in de dataLayer van Google Tag Manager worden gezet. We voegen deze toe aan onze werkruimte en als goed is zou hem dan nu hier bij ’tag templates’ moeten zien.

Tag 1 instellen

De volgende stap is het instellen van de tag voor de Core Web Vitals. Hiervoor ga je naar ’tag’, vervolgens aan de rechterkant naar ‘nieuw’ en voor de tag configuratie scroll je naar onder en zie je hier bij aangepast de Core Web Vitals tag. Deze tag gaat er uiteindelijk voor zorgen dat de Core Web Vitals ingeladen worden via het script en vervolgens in de dataLayer gezet worden. Vervolgens gaan we bij trigger en zetten we de ‘all pages trigger’ erbij. Vergeet deze ook niet een naam te geven ‘Core Web Vitals’ en rechts bovenin op te slaan.

Nu hebben we er voor gezorgd dat de Core Web Vitals in de dataLayer staan, om ze naar Google Analytics 4 te krijgen zullen we nog een aparte trigger moeten maken, verschillende variabelen en dat allemaal weer samenvoegen in nog een tag.

Trigger instellen

We beginnen met het aanmaken van een trigger. Hiervoor ga je aan de linkerkant naar ’triggers’, klik je vervolgens aan de rechterkant weer op ‘nieuw’, geven deze een naam: “Trigger – Core Web Vitals”. De trigger configuratie is een ‘aangepaste gebeurtenis’ en de naam van de gebeurtenis is ‘coreWebVitals’. Let hierbij goed op dat je exact deze naam overneemt. Vervolgens klik je op opslaan en nu gaan we nog enkele variabelen instellen.

DataLayer variabelen aanmaken

Hiervoor ga naar de linkerkant naar ‘variabele’, scroll je naar onder ‘door de gebruiker gedefinieerde variabelen’ en klik je op ‘nieuw’. We beginnen met het geven van een naam: “DLV – webVitalsMeasurement.name”. Dat is de eerste variabele, voor het gemak kunnen we deze alvast kopiëren. Bij ‘variabele configuratie’ klikken we op ‘variabele voor gegevenslaag’ omdat we het uit de gegevenslaag, uit de dataLayer halen. Vervolgens geven we een naam van deze variabele, nou dat is in dit geval webVitals.Measurement.name. Let er op dat je het weer exact overneemt en vervolgens klik je op opslaan.

Ik zou nu een lijstje in beeld zetten met de volgende dataLayer variabelen.  Zorg dat je deze allemaal instelt, exact hetzelfde zoals ik net heb gedaan alleen na de laatste punt andere namen.

Tag 2 instellen

Als het goed is heb je nu alle dataLayer variabelen ingesteld. De laatste stap is het instellen van de tag. Hiervoor gaan we in Google Tag Manager weer aan de linkerkant naar ’tags’, klikken we hier aan rechterkant op ‘nieuw’ en geven deze een naam: “GA4 – coreWebVitals”. De tag configuratie is uiteraard ‘Google Analytics: GA4 – gebeurtenis’. Je selecteert je GA4 tag. Voor de gebeurtenis naam klik we op het lego blokje hier en selecteren we de dataLayer variabele ‘DLV – webVitalsMeasurement.name’, er zijn immers drie verschillende Core Web Vitals die we naar Google Analytics 4 moeten pushen en hiermee wordt de naam variabel. Vervolgens klikken we op ‘gebeurtenis parameters’ en gaan we hier enkele parameters toevoegen, vier in totaal.

Als eerst opnieuw de naam: ‘web_vitals_measurement_name’ en koppel hier aan de dataLayer variabele ‘DLV – webVitalsMeasurement.name’ vervolgens kunnen we deze kopiëren en voegen we ‘web_vitals_measurement_id’ , ‘web_vitals_measurement_value’ en onderin als laatste ‘value’ los toe. Aan het ‘id’ koppelen we de dataLayer variabele ‘DLV – webVitalsMeasurement.id’. Aan de value koppelen we de dataLayer variabele ‘DLV – webVitalsMeasurement.value’.

Je hebt de keuze tussen ‘value’ en ‘value.Rounded’, mocht je een afgerond cijfer willen dan kun je ‘value.Rounded’ kiezen en mocht je gaan voor het komma cijfer dan kun je kiezen voor ‘value’ zelf. En bij laatste doen we de dataLayer variabele ‘DLV – webVitalsMeasurement.delta’. Vervolgens bij trigger kiezen we voor de aangepaste trigger die we hebben gemaakt ‘Trigger – coreWebVitals’ en dan is je tag klaar, vergeet dan ook niet op ‘opslaan’ te klikken.

Core Web Vitals testen

Om te testen of je het goed hebt gedaan kun je in ‘Google Tag Assistant’ jouw website invullen, vervolgens wordt deze geladen. Laat deze even helemaal laden, scroll een beetje door je website en ga na een seconde of 20 terug naar de Tag Assistant om te kijken wat er is gebeurd. We zien in dit geval aan de linkerkant in Google Tag Manager dat er drie keer een Core Web Vital is gemeten. Je ziet hier ook dat eerst al de scroll diepte wordt gemeten en daarna nog een keer de laatste Core Web Vital. Het kan dus ook zijn dat je straks in Google Analytics niet gelijke getallen ziet van alle drie de Core Web Vitals omdat niet alle drie altijd gemeten worden. Klik je vervolgens bovenin naar het analytics gedeelte zie je ook aan de linkerkant dat de CLS, LCP en FID gemeten worden.

In dat geval, Gefeliciteerd! Je hebt op de juiste manier de Core Web Vitals doorgezet naar Google Analytics 4, vervolgens kun je in Google Analytics 4 onder de gebeurtenissen zien hoe vaak de Core Web Vitals gemeten worden en vooral belangrijk wat de waarde is, dus je kunt precies zien of je website gedurende een periode voldoet aan de verwachtingen die Google stelt. Vergeet ook zeker niet om alle wijzigingen die je in Google Tag Manager hebt gedaan te publiceren, anders dan worden ze niet doorgezet in Google Analytics 4.

Ik hoop dat je inmiddels een beetje wijzer bent geworden over Core Web Vitals en heb je inmiddels een goed idee hoe je deze kunt instellen in Google Tag Manager om ze vervolgens weer te zien in Google Analytics 4, super waardevol! Ga er ook zeker mee aan de slag want ze gaan erg belangrijk worden. In ieder geval heb je ze nu in Google Analytics 4 waar de rest van je data over je website ook te vinden is. Bedankt voor het kijken naar deze video. Vond je hem leuk, geef dan zeker een duimpje omhoog op deze video en abonneer op ons kanaal. Mochten er vragen zijn laat het dan vooral zeker weten in de comments en ik zie jou in de volgende video weer, doei!