Hulp nodig bij de implementatie van deze scripts met Google Tag Manager? Neem contact op met onze implementatiepartner Digital Power.

Websites die gebruik maken van Google Tag Manager (GTM) kunnen de CookieInfo oplossing eenvoudig implementeren met deze stap-voor-stap instructies.

In de volgende stappen laten we je zien hoe je

  1. De cookiebanner implementeert
  2. Hoe je de cookie instellingen tag aanpast
  3. De cookieverklaring op een pagina kan weergeven

We gaan er van uit dat je al een GTM account hebt aangemaakt, een website container gemaakt hebt in GTM en de GTM code op je website hebt geplaatst. Meer info: https://support.google.com/tagmanager/answer/6103696

Mocht je deze stappen willen overslaan, we hebben ook een container klaargezet zodat je de settings kan importeren. Lees hier meer.

De cookiebanner implementeren in GTM

Maak in je GTM container een nieuwe Tag door te klikken op ” Nieuw” > ” Aangepaste HTML TAG”.

In het ”HTML” veld voeg je de volgende code toe. Vervang het serienummer “00000000-0000-0000-0000-000000000000” met je eigen serienummer uit de code die door ons aan jou geleverd is:

<script id="CookieConsent" src="https://consent.cookiebot.com/uc.js?cbid=00000000-0000-0000-0000-000000000000" type="text/javascript" async></script>
<script>
function CookieConsentCallback_OnAccept() {
if (CookieConsent.consent.preferences)
dataLayer.push({'event':'cookieconsent_preferences'});
if (CookieConsent.consent.statistics)
dataLayer.push({'event':'cookieconsent_statistics'});
if (CookieConsent.consent.marketing)
dataLayer.push({'event':'cookieconsent_marketing'});
}
</script>

Kies ”All pages” als trigger en geef een naam aan je tag, bijvoorbeeld ” Cookie Consent” . Klik ”Save” om de tag op te slaan.

Dit is zoals je tag configuratie er uit zou moeten zien (met uitzondering van het serienummer)

Klik als laatste stap op ”publish” om je aanpassingen live te zetten.
De cookiebanner is nu actief op je website.

Om ervoor te zorgen dat cookies pas worden geladen als de gebruiker zijn consent heeft gegeven dient er logica gecreerd te worden die het gedrag van je cookie instellingen controleerd.

Voorbeeld: Google analytics Universal (GUA) implementeren in GTM

In dit voorbeeld laten we zien hoe je Google analystics Universal (GUA) kan implementeren in GTM ’en kan afdwingen dat de cookie pas wordt geplaatst als de bezoeker statistische cookies heeft geaccepteerd.

Klik bij GTM ”triggers” op ”nieuw” .

Selecteer “Custom Event” en geef de trigger de naam “cookieconsent_statistics”, in het veld “Event name”.

Klik op ”Save”

Je trigger zou er zo uit moeten zien:

Doe dit voor alle type cookies zodat je drie triggers hebt: “cookieconsent_preferences”, “cookieconsent_statistics” en “cookieconsent_marketing”.

Nu kunnen we de GAU tag aanmaken. Klik op ” new” in de Tag lijst. Indien je al een GAU tag hebt kan je deze aanpassen.

Als je een nieuwe tag aanmaakt selecteer je ” Universal Analytics” bij ” Choose tag type” . Selecteer ” New Variable” en voer je GAU Tracking ID in bij het veld ” Tracking-ID). Klik op Save.
Als trigger selecteer je de trigger die je zojuist hebt gemaakt, ” Cookieconsent_statistics”. Klik ” Save” om de tag op te slaan

Je GAU zou er zo uit moeten zien:

Als laatste stap, klik op puliceer om het live te zetten.
Google Analystics Universal is nu ingeschakeld op je website. De cookie zal echter pas geladen worden als de gebruiker toestemming heeft gegeven voor het plaatsen van Analytische cookies.

Het controleren van cookies met meerdere triggers

Bovenstaande aanpak is afdoende wanneer je maar één trigger gebruikt op een tag. Als je meerdere triggers hebt moeten we het iets anders aanpakken.
In GTM word een tag uitgevoerd als any van de triggers ”waar” is. Aangezien we alleen de tag uitgevoerd willen hebben als de bestaande trigger en de cookie consent event beide ” waar” zijn moeten we een event toevoegen aan de bestaande trigger in plaats van het toevoegen van de cookie consent trigger aan de tag zelf. Trigger voorwaarden moeten allemaal waar zijn om de trigger uit te voeren.

De waarde van de cookie consent trigger is : Event – equals – cookieconsent_marketing

Vervang ” cookieconsent_marketing” door “cookieconsent_statistics”, afhankelijk vank het type cookie dat getriggerd word.

Voorbeeld van het toevoegen van de cookie consent event aan een bestaande trigger:

Als je trigger een ander type is dan “Custom Event”, bijvoorbeeld “Click – Just Links”, is het niet mogelijk om een trigger conditie gebaseerd op een event aan te maken. In dit geval dien je een nieuwe “user-defined variable” van het type “custom javascript” te maken voor iedere Cookie categorie.

Bijvoorbeeld:

Maak een user-defined variable en noem deze “CookieConsent.consent.marketing”. In het veld “custom javascript” voer je de volgende code in:

function()

{

return CookieConsent.consent.marketing.toString()

}

Herhaal deze stappen voor “preferences” en “statistics” -cookies door “marketing” te vervangen in de variable naam een JavaScript.

Ga nu terug naar je trigger configuratie en voeg een nieuwe conditie toe die verwijst naar één van de bovenstaande variabelen, bijvoorbeeld “CookieConsent.consent.marketing” – Contains – true

Opmerking: als je bestaande trigger van het type “Page View” is moet je deze aanpassen aan het event type “Windows Loaded” aangezien de bezoekers voorafgaande toestemming niet beschikbaar is in GTM voordat de windows is geladen.

Implementeren van de cookie verklaring

Als je de volledige cookie verklaring wil weergeven op een subpagina van je website, bijvoorbeeld als onderdeel van je privacy policy, dan kan GTM de verklaring real-time injecteren in een lege html placeholder element op de subpagina, geidentificeerd door het attribuut ”id” of een classname.

Eerst moeten we een nieuwe trigger maken met het pad naar de pagina in kwestie, bijvoorbeeld ”/cookiebeleid”

Klik ”New” op de Triggers lijst

en selecteer “Paginaweergave” als type bij “Choose trigger type”

Selecteer “Sommige paginaweergaven” en definieer deze conditie om de trigger uit te voeren:

Klik op “Save” en geef de trigger een naam.

Maak een nieuwe tag en selecteer ”Aangepaste HTML” bij ” Choose Tag Type”

<script>

var contentPlaceholder = document.getElementById("bodycontent");

var cookieDeclarationScript = document.createElement("script");

cookieDeclarationScript.type = "text/javascript";

cookieDeclarationScript.id = "CookiePolicy";

cookieDeclarationScript.src = "https://consent.cookiebot.com/00000000-0000-0000-0000-000000000000/cd.js";

contentPlaceholder.appendChild(cookieDeclarationScript);

</script>

Voer bovenstaande code in en vervang het serienummer door het unieke nummer van jouw website.Vergeet ook niet de variabele ” contentPlaceholder” te vervangen zodat deze overeenkomt met de ID die je gebruikt op je pagina. Hernoem ”bodycontent” naar bijvoorbeeld ”body-main” als je <div ID> hierop is ingesteld.

Bij ” Choose a trigger” selecteer je de trigger die je eerder hebt aangemaakt. Klik op opslaan om de tag te maken.

Zo zou je tag er uit moeten zien.
Klik op publiceer om de tag live te brengen op je website. Je pagina word nu geinjecteerd met de cookie verklaring

Delen