Implementing CookieBot with GTM (Google Tag Manager)

Are you a Google Tag Manager (GTM) user? The Cookiebot solution works great with a GTM implementation.

Combine the use of Google Tag Manager with automated cookie blocking by Cookiebot to get the best of both worlds.

In the next steps we will show you how to:

  1. Implement the cookiebanner
  2. Implement Prior-consent
  3. Show the cookie statement on a specific page on your website

We are assuming you have created a GTM account, created a website container and implemented the GTM code on your website. More information: https://support.google.com/tagmanager/answer/6103696

Would you like to skip these steps? We have a GTM container you can import. Read here.

1. Implementing the cookiebanner with GTM

**** Would you like to use automatic cookie blocking? You can skip this step.

Create a new tag in your GTM container by clicking “new” > “Custom HTML TAG”.

Within the “HTML” field add the following code. Don’t forget to replace “00000000-0000-0000-0000-000000000000” with your personal Cookiebot code. (Which you will find in the Cookiebot manager , tab ‘Your scripts‘):

<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>

Choose “All pages” as the trigger and name your tag, e.g. “Cookie Consent” . Hit “save” to save your tag.

As a final step click “submit” to activate your newly added changes on your website. The cookiebanner will show on all pages of your website.


This is what your tag configuration should look like.

To make sure cookies are only loaded when a user submitted consent (so-called prior-consent) we need to create some logic.

2. Example: Google analytics Universal (GUA)

This example show you how to implement Google analytics Universal with GTM and force to make sure the cookies are loaded only when the user consented to analytical cookies.

In GTM click “triggers”, “new”.

Select “Custom event” and type “cookieconsent_statistics” in the “event name” field.

**** Would you like to use automatic cookieblocking mode? Name the trigger “cookie_consent_statistics”

Hit the ”save” button.


Your trigger should looke like this

You have to do this for all categories: “cookieconsent_preferences”, “cookieconsent_statistics” and “cookieconsent_marketing”.

**** Would you like to use automatic cookieblocking mode? Name the triggers“cookie_consent_preferences” and“cookie_consent_marketing”

Now we are ready to create the GUA tag. Click “New” within the tag list. If you already hae a GUA tag you can modify that one.

If you are creating a new tag select “Universal Analytics” in the “Choose tag type” field. Select ”New Variable” and enter your je GUA Tracking ID within the “Tracking-ID” field. Hit the “Save” button.
For the trigger, select the trigger you have just made:,”Cookieconsent_statistics” (or when using automatic cookieblocking mode “cookie_consent_statistics” ). Hit ”Save” again to save the tag.

As a final step click “submit” to activate your newly added changes on your website.
Google Analytics – Universal Analytics is activated on your website but cookies will ONLY be loaded when the user has consented to analytical cookies.


Your GUA should look like this.

Checking cookies with multiple triggers

Warning: This information is intended for advanced GTM users. Do you lack the knowledge about this? Ask your GTM-specialst or webbuilder for support.

The above example is useful when you only have one trigger for a tag. When you have multiple triggers we need to add some extra logic.

Don’t know if you are using multiple triggers or would you like to know more about the subject? Google created a YouTube video which contains a clear explanation on this subject.

In GTM a tag is being executed if one of the triggers translates to “True”. Since we would like to have the tag executed when both of the triggers translate to “True” we have to add an event to the existing trigger (instead of adding the cookie consent trigger to the tag itself). Trigger conditions all have to translate to true to be executed.

The value of the cookie consent trigger is : Event – equals – cookieconsent_marketing (or “cookieconsent_statistics”, dependant of the type of cookie that will be triggered).

**** Would you like to use automatic cookieblocking mode? The value will of the trigger is : Event – equals – cookie_consent_marketing.


Example of adding the cookie consent event to an existing 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.

Example:

Create a user-defined variable named “CookieConsent.consent.marketing”. In the “custom javascript” field add the following code:

function()
{ 
 return CookieConsent.consent.marketing.toString()
}

Repeat these steps for the “preferences” and “statistics” -cookies by replacing “marketing”in the name and code of the variable.

Return to your trigger configuration and add a new condition referring to one of the variables, for example “CookieConsent.consent.marketing” – Contains – true

Please note: if your existing trigger is a “page view” type convert it to event type “windows loaded” because the users prior consent is not yet avilable in GTM before the page is loaded.

3. Implementing the cookie statement

If you want to publish the full cookie statement on a subpage of your website, for example as part of your privacy policy, GTM can inject it on a page (within an empty placeholder element on the webpage identified by the “id” or classname attribute).

Example: on the page where you would like to show the statement add the following ID:

<div id=bodycontent></div>

First w have to create a new trigger containing the path to the page in question. For example “/privacypolicy”

Click ”New” in the Triggers list.


Click ”New” in the Triggers list.

and select “Pageview” as the trigger type.

Select “Some pageviews” and define the condition “Fire this trigger when an Event occurs and all of these conditions are true”

Be aware that the path you enter here is the true path the page resides. For example: is the path in your browser https://www.cookieinfo.net/cookie-statement/, in GTM use /cookie-statement/ . Is the statement still not injected on the page? Change the condition “Page URL” to “Page PATH”

Click “Save” and name your trigger, e.g. privacypolicy

Create a new tag “custom HTML” bij “Choose Tag Type”

Add the code (below) and replace the 00000000-0000-0000-0000-000000000000 with your own Cookiebot ID. Don’t forget to replace the variable “contentPlaceholder” with the ID you are using on your website. In this exaple we call it “bodycontent” . For example: Rename “bodycontent” to “body-main” if you call your <div ID> like that.

<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>

In the “Choose a trigger” field you select the trigger we’ve created earlier. Click Save to create the tag.

Click submit to publish your workspace. The page will now be injected with the cookie statement.

4. Automatic Cookieblocking Mode

If you are going to use Automatic cookieblocking mode in conjuction with GTM make sure that:

  1. The GTM script is loaded as the first script on your website. .
  2. Your GTM script contains the following tag: data-cookieconsent=“ignore”
    This will make sure GTM is always loaded on your website
  3. You add the Cookiebot script to your website right after the GTM script.

It should look like this:

<head>
<title>GTM and Automatic Cookieblocking
</title>
<link rel="stylesheet" type="text/css" href="style.css">

!-- Google Tag Manager -->
<script data-cookieconsent="ignore">
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

<script id="CookieConsent" src="https://consent.cookiebot.com/uc.js" 
 data-cbid="00000000-0000-0000-0000-000000000000" type="text/javascript" data-blockingmode="auto"></script>
.....
</head>

...
<body>

GTM and Cookiebot are now working together:

  • Tags and cookies are set based upon the users consent by means of triggers in GTM AND
  • The Cookiebot script on your website. The script makes sure that all cookies not set by GTM are blocked until the user has consented.
Was this article helpful?
3 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 100%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Inhoud