paulkaufman.nl

Zo configureer je een cookiemelding met Google Tag Manager

Een cookiemelding installeren via Google Tag Manager? Is dat niet enorm ingewikkeld?

Nee hoor! Zelfs zonder programmeertalent kun je eenvoudig zelf een cookiemelding implementeren die:

  1. jouw bezoekers de keuze geeft over welke cookies ze accepteren
  2. bepaalt welke tags op basis van die keuze actief worden
  3. en ervoor zorgt dat jouw bezoekers hun voorkeur altijd kunnen aanpassen

En het beste van het verhaal: het is helemaal gratis!

Volg het onderstaande recept om de gratis cookiemelding te installeren en je bent weer een stapje dichterbij een website die helemaal AVG/GDPR-proof is.

Ingrediënten cookiemelding

De ingrediënten voor de gratis cookiemelding zijn simpel:

  1. Een website
  2. Google Tag Manager (GTM)
  3. Een cookiemelding voor op je website

Er zijn veel gratis cookiemeldingen beschikbaar. Sommigen installeer je als plugin op je website, anderen kun je eenvoudig via GTM implementeren. Voorbeelden hiervan zijn cookieBar en cookiegenerator, maar je vindt er ongetwijfeld meer op het web.

Kies er een die bij je huisstijl past en stel hem vervolgens naar eigen inzicht in. Voor de onderstaande methode maakt het niet uit hoe de melding eruit ziet of welke opties hij biedt.

De korte versie

Met behulp van Google Tag Manager kun je cookiewaardes uitlezen. Vervolgens kun je die waardes gebruiken om triggers in te stellen en tags te activeren. Zo kun je bijvoorbeeld een Facebook-pixel pas actief laten worden als “Alle cookies” geaccepteerd zijn.

Hoe dat precies werkt, leg ik hieronder in vier stappen uit.

1. Cookiewaardes uitlezen

Raar maar waar: cookiemeldingen plaatsen cookies. Dat doen ze om de voorkeuren van een bezoeker te bewaren, zodat hij niet steeds opnieuw zijn cookievoorkeur hoeft door te geven. Deze cookies hebben verschillende waardes en die waardes gaan ons helpen om de cookiemelding in te stellen.

Allereerst moeten we de waardes uitlezen. Je kunt deze waardes vaak ook in de documentatie van de cookiemelding vinden, maar de onderstaande methode is meestal sneller.

Plaats de cookiemelding op je website en open Chrome DevTools of het equivalent van een andere browser. In Chrome open je dit door op F12 of Ctrl+shift+i te drukken. Of klik op de rechtermuisknop en selecteer “inspecteren”.

Ga daarna naar het tabblad Application, selecteer Cookies en klik in het drop down menu op je domein. Nu zie je een overzicht van alle cookies op je website en de waarde van die cookies.

Cookiewaardes uitlezen via Chrome devtools
Een overzicht van alle cookies op het domein https://cookie-bar.eu

Accepteer nu de cookies via de cookiemelding en kijk wat er verandert. Als het goed is, zie je een nieuwe cookie van de cookiemelding met daarnaast de waarde. Als je bij cookieBar alle cookies accepteert verschijnt bijvoorbeeld de cookie cookiebar in het overzicht, met de waarde CookieAllowed.

Cookiewaardes uitlezen via Chrome devtools
De cookies en cookiewaardes na het accepteren van alle cookies

Doe dit vervolgens voor alle opties in jouw cookiemelding (geen cookies, alleen functionele cookies, marketing cookies, etc.) en noteer de waardes. Zelf gebruik ik hiervoor de Chrome-extensie Clear Cookie and Reload om sneller te testen.

Let op dat je soms moet refreshen om de nieuwe waarde uit te lezen. Dit levert soms ook problemen op met het afvuren van tags in GTM, maar daar kom ik later op terug.

2. Een variabele bouwen

Nu gaan we de cookiewaardes via Google Tag Manager uitlezen en daar hebben we een speciale variabele voor nodig.

Open GTM en maak een nieuwe variabele aan. Selecteer Directe cookie en vul de naam van de cookie uit stap 1 in. Nu kun je de verschillende cookiewaardes uitlezen en triggers instellen.

3. Een trigger instellen

We zijn er bijna! De variabele met cookiewaardes kunnen we gebruiken om een trigger in te stellen.

Maak een trigger aan en noem die “Alle cookies geaccepteerd”. Selecteer Paginaweergave en klik op Sommige paginaweergaven. Hier kun je de variabele die je eerder hebt ingesteld terugvinden en bepalen bij welke cookiewaarde de trigger af gaat.

In dit geval kies ik voor de waarde CookieAllowed, omdat ik in dit geval cookieBar gebruik en een tag wil activeren zodra een bezoeker alle cookies geaccepteerd heeft.

Google Tag Manager trigger om cookiewaardes uit te lezen

3.1 Nog een trigger instellen

Omdat een pagina niet altijd gerefresht wordt na het opgeven van een cookievoorkeur, oftewel het klikken op Geen/Alle Cookies, worden marketingcookies pas actief zodra de bezoeker naar een nieuwe pagina gaat of zelf refresht. 

Dat is zonde, want je wilt die bezoeker eerder tracken. Vooral als hij hiervoor toestemming heeft gegeven!

Daarom stel ik vaak een extra trigger in die afgaat zodra de bezoeker op de cookiemelding klikt

De trigger van bijvoorbeeld een Facebook-pixel gaat dan af zodra de bezoeker op de knop “Alle cookies” klikt. Op die manier ben ik er zeker van dat de pixel direct afgevuurd wordt en niet pas bij de volgende pageload.

Er zijn verschillende manieren om zo’n kliktrigger in te stellen. Vaak stel ik de trigger in op de Click Class van de button, maar dit is afhankelijk van de cookiemelding.

4. Fire away!

Nu de triggers uit stap 3 en 3.1 ingesteld zijn, hoef je die alleen nog maar aan de juiste tag te koppelen.

Daarna even Google Tag Manager refreshen, de pagina refreshen en voilà: je hebt met GTM een perfect werkende en bovenal gratis cookiemelding geconfigureerd.

Cookievoorkeur aanpassen

Nu kun je stoppen, maar ik vind het altijd netjes om bezoekers de mogelijkheid te geven om hun cookievoorkeuren later nog aan te passen. En ook dit kan eenvoudig via Google Tag Manager.

Volg hiervoor de volgende stappen:

  1. Plaats een button op een pagina naar keuze. Meestal is dit de pagina waar jouw privacy- of cookieverklaring op staat.
  2. Maak in Google Tag Manager een trigger die afgaat zodra je op de button klikt.
  3. Koppel de trigger aan een custom HTML-tag met het onderstaande script en vervang cookienaam voor de naam van de cookie die verwijderd moet worden.
  4. Refresh de pagina en klaar! De cookie is verwijderd en de bezoeker kan opnieuw zijn voorkeuren opgeven.
  1. function delete_cookie(name) {
  2. document.cookie = name +‘=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;’;
  3. }
  4. delete_cookie(‘cookienaam’);

Meer tips voor Google Tag Manager

Ben je op zoek naar meer GTM tips ’n tricks? Bekijk dan dit overzicht met handige javascripts macro’s.

Of leer hoe je de niet-interactietreffer goed instelt.

Bekijk meer blogs