Integraties

Google Tag Manager en ConsentCookie

393 views 19 april 2018 24 oktober 2018 Ramon Rockx 2

Google Tag Manager (GTM) wordt veelal gebruikt om externe webapplicaties, zoals Google Analytics, Adwords etc. te integrereren in een website. Externe webapplicaties die op hun beurt ook weer gegevens van de bezoekers bewaren, waar toestemming voor nodig is.
Ook ConsentCookie is een externe webapplicatie. Dit artikel beschrijft niet alleen hoe je ConsentCookie kunt integreren in je website met GTM, maar ook hoe je kunt voorkomen dat andere externe applicaties worden uitgevoerd als je bezoeker hier geen toestemming voor heeft gegeven met ConsentCookie. Als voorbeeld in dit artikel laten we ConsentCookie bepalen of de Google Analytics tag uitgevoerd mag worden.

Heb je hulp bij de implementatie? Neem dan contact met ons op.

ConsentCookie aanbieden via GTM

ConsentCookie bestaat in de basis uit een JavaScript waarin de applicatie logica staat en een stukje configuratie dat per website zal verschillen. Zo zul je moeten opgeven voor welke applicaties ConsentCookie toestemming moet vragen aan de bezoekers en wil je misschien ook nog de stijl van de widget aanpassen naar de stijl van de website. De eerste stap is om de ConsentCookie configuratie op te nemen in GTM.

ConsentCookie configureren

De configuratie van ConsentCookie is feitelijk een JavaScript object. De broncode van dit object, kun je eenvoudig laten genereren met de ConsentCookie configuratietool:

ConsentCookie Configuratie selecteren applicaties voorbeeld

In dit voorbeeld zijn de applicaties ConsentCookie en Google Analytics geselecteerd. De volgende stap is om met de tool het script te genereren.

ConsentCookie Configuratietool voorbeeld

Ook in het script zien we ConsentCookie (cc) zelf en Google Analytics (ga) als applicaties terugkomen. Helaas is het script niet letterlijk over te nemen in Google Tag Manager. We hebben enkel het configuratie-object nodig. In het bovenstaande voorbeeld wordt het ConsentCookie configuratie-object als argument meegegeven aan de functie window.ConsentCookie.init(<ConsentCookie configuratie object>).
De reden dat we enkel het configuratie-object nodig hebben is dat we de configuratie van ConsentCookie in een GTM variabele met als naam ConsentCookie configuration onderbrengen. Feitelijk is een GTM variabele een JavaScript functie. Het resultaat van de functie bepaalt de waarde van de variabele. Zo ook voor onze ConsentCookie configuration variabele. Deze functie kent de volgende opbouw:

Dus uitgaande van bovenstaand voorbeeld wordt nu de functie die we gaan gebruiken in de GTM variabele alsvolgt:

Nu we de functie hebben kunnen we de GTM variabele gaan aanmaken in GTM:

  1. ga naar Variabelen en klik op Nieuw;
  2. vul bij “Naamloze variabele” de naam “ConsentCookie configuration” in;
  3. klik in het vak Variabele configuratie om het type variabele te kiezen;
  4. kies Aangepaste JavaScript-macro (Custom Javascript in Engelse weergave);
  5. plak je configuratie functie in het tekstveld;
  6. klik op Opslaan.

GTM variabele ‘ConsentCookie configuration’

Vanaf nu wordt het eenvoudig, de ConsentCookie tag aanmaken.

ConsentCookie tag

De ConsentCookie GTM tag is een zogenaamde Aangepaste HTML Tag, een tag die we zelf voorzien van de volgende HTML en (JavaScript) logica:

Doorloop in GTM de volgende stappen om deze tag aan te maken:

  1. ga naar Tags en klik op Nieuw;
  2. vul bij “Naamloze tag” de naam “ConsentCookie” in;
  3. klik in het vak Tagconfiguratie om het type tag te selecteren;
  4. kies het type Aangepaste HTML;
  5. kopieer bovenstaand script en plak het in het veld HTML;
    1. Let op: {{ConsentCookie configuration}} in het script refereert naar de naam van de variabele die eerder is aangemaakt. Als je een andere naam hebt gegeven dan moet je dit in het script aanpassen.
  6. selecteer Geavanceerde instellingen;
  7. selecteer bij Tagactiveringsopties de optie Eenmaal per pagina;
  8. klik nu in het vak Triggers;
  9. selecteer de trigger All Pages;
  10. klik op Opslaan.

GTM tag ‘ConsentCookie’

GTM is nu klaar om ConsentCookie aan te bieden op je website. Test eerst of alles goed werkt door de Voorbeeld knop te gebruiken van GTM:

  1. controleer in het Debug paneel of de tag ConsentCookie vermeld staat bij Tags Fired On This Page;
  2. klap het debug venster dicht (let op: het Debug paneel verbergt het ConsentCookie logo!);
  3. controleer of rechtsonderin het ConsentCookie logo staat.

Als alles naar behoren werkt, kunnen de wijzigingen doorgevoerd worden door op de knop Verzenden te klikken. ConsentCookie is nu voor iedereen actief op je website.

Tags triggeren op basis van ConsentCookie applicatie toestemming

(Applicatie template)

Nu ConsentCookie op de website actief is, kunnen we tags zodanig gaan aanpassen, dat deze alleen uitgevoerd worden, als de bezoeker via ConsentCookie hiervoor toestemming heeft gegeven. Dit doen we door gebruik te maken van triggers op basis van een “Aangepaste gebeurtenis”. Iedere keer als een pagina wordt opgevraagd, zal de ConsentCookie tag voor alle applicaties waarvoor de bezoeker toestemming heeft gegeven een “Aangepaste gebeurtenis” afvuren. De naam van de gebeurtenis kent het volgende formaat:

ccConsent-<applicatie id>

De applicatie ids zijn terug te vinden in het eerdere genoemde configuratie object. In geval van Google Analytics is de applicatie id ga. Dus de naam van de gebeurtenis voor Google Analytics is ccConsent-ga. Als volgende stap gaan we daarom een Google Analytics tag aanmaken welke reageert op een aangepaste gebeurtenis met als naam ccConsent-ga.
Als voorbeeld gebruiken we niet een bestaande tag, maar zullen we een nieuwe Google Analytics tag aanmaken:

  1. ga naar Tags en klik op Nieuw;
  2. vul bij “Naamloze tag” de naam “Universal Analytics” in;
  3. klik in het vak Tagconfiguratie om het type tag te selecteren;
  4. selecteer het type Universal Analytics;
  5. kies bij Google Analytics-instellingen voor Nieuwe variabele;
  6. vul je Google Analytics id (beginned met “UA-“) in bij Tracking-ID;
  7. klik twee maal op Opslaan;
  8. klik in het vak Triggers;
  9. klik op de + knop;
  10. klik in het vak Triggerconfiguratie;
  11. selecteer Aangepaste gebeurtenis;
  12. vul “ccConsent-ga” in bij Naam van gebeurtenis;
  13. klik op Opslaan;
  14. vul “ConsentCookie granted consent GA” in bij Naam trigger;
  15. klik twee maal op Opslaan.

Ook hier geldt weer dat het verstandig is om eerst de functionaliteit te testen met de Voorbeeld functionaliteit. Testen kan door zelf de website te bezoeken en in de ConsentCookie widget Google Analytics uit te schakelen. Ververs het scherm en controleer of de Universal Analytics tag niet wordt uitgevoerd. Zet vervolgens Google Analytics aan in ConsentCookie en controleer of de Universal Analytics tag wèl uitgevoerd is.
Als dit klopt is ook deze stap succesvol afgerond en kun je ook andere tags voorzien op dezelfde manier voorzien van deze triggers.

Tags triggeren op basis van ConsentCookie verwerkingsdoel toestemming

(Verwerkingsdoel template)

Nu ConsentCookie op de website actief is, kunnen we tags zodanig gaan aanpassen, dat deze alleen uitgevoerd worden, als de bezoeker via ConsentCookie hiervoor toestemming heeft gegeven. Dit doen we door gebruik te maken van triggers op basis van een “Aangepaste gebeurtenis”. Iedere keer als een pagina wordt opgevraagd, zal de ConsentCookie tag voor alle applicaties waarvoor de bezoeker toestemming heeft gegeven een “Aangepaste gebeurtenis” afvuren. De naam van de gebeurtenis kent het volgende formaat:

ccConsent-<purpose id>

De verwerkingsdoel ids zijn terug te vinden in het eerdere genoemde configuratie object.

De standaard van ConsentCookie is:

id name
ccp-1 Advertenties
ccp-2 Opmerkingen
ccp-3 Communicatie
ccp-4 Functioneel
ccp-5 18+ advertenties
ccp-6 Analyse
ccp-7 Social media
ccp-8 Audio en Video

Als volgende stap gaan we daarom een Google Analytics tag aanmaken welke reageert op een aangepaste gebeurtenis met als naam ccConsent-ccp-6.
Als voorbeeld gebruiken we niet een bestaande tag, maar zullen we een nieuwe Google Analytics tag aanmaken:

  1. ga naar Tags en klik op Nieuw;
  2. vul bij “Naamloze tag” de naam “Universal Analytics” in;
  3. klik in het vak Tagconfiguratie om het type tag te selecteren;
  4. selecteer het type Universal Analytics;
  5. kies bij Google Analytics-instellingen voor Nieuwe variabele;
  6. vul je Google Analytics id (beginned met “UA-“) in bij Tracking-ID;
  7. klik twee maal op Opslaan;
  8. klik in het vak Triggers;
  9. klik op de + knop;
  10. klik in het vak Triggerconfiguratie;
  11. selecteer Aangepaste gebeurtenis;

  1. vul “ccConsent-ccp-6” in bij Naam van gebeurtenis;
  2. klik op Opslaan;
  3. vul “ccConsent-analyse” in bij Naam trigger;
  4. klik twee maal op Opslaan.

Ook hier geldt weer dat het verstandig is om eerst de functionaliteit te testen met de Voorbeeld functionaliteit. Testen kan door zelf de website te bezoeken en in de ConsentCookie widget Google Analytics uit te schakelen. Ververs het scherm en controleer of de Universal Analytics tag niet wordt uitgevoerd. Zet vervolgens Google Analytics aan in ConsentCookie en controleer of de Universal Analytics tag wèl uitgevoerd is.
Als dit klopt is ook deze stap succesvol afgerond en kun je ook andere tags voorzien op dezelfde manier voorzien van deze triggers.

Hergebruik trigger

Deze trigger kun je hergebruiken bij andere tags in de google tagmanager. In het voorbeeld wordt ‘Analyse’ gebruikt. Dus alleen bij akkoord voor ‘analyse’ worden deze tags dan uitgevoerd.

Heeft dit geholpen?