Google Tag Manager and automatic cookie blocking

Laatst bijgewerkt opFebruary 27, 2024

Combine the use of Google Tag Manager with automated cookie blocking by Cookiebot to get the best of both worlds. Implementation is quick and easy and allows you to:

Control tags and cookies based on the user’s consent, using triggers and Consent Mode in Google Tag Manager AND
Let Cookiebot automatically control all other cookies not set by Google Tag Manager, based on the consent given.

To achieve this, make sure that the Cookiebot script is not executed by Google Tag Manager. So either remove the Cookiebot CMP tag, pause it, or remove the “All Pages” trigger assigned to it. Furthermore:

Make sure that Google Tag Manager is the very first script to load on your website.
Mark your Google Tag Manager script tag with: data-cookieconsent=“ignore” This will ensure that Google Tag manager will always be allowed load.
Insert the Cookiebot script with automatic cookie blocking immediately after Google Tag Manager script.

Here’s an example of how this could look:

<html>
<head>
<title>GTM & automatic cookie blocking </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>

If you have renamed the dataLayer, you need to add the data-layer-name attribute to the Cookiebot script tag, with the new dataLayer name as its value.
For example: data-layer-name=”gtmDataLayer”.

For tags that support built-in consent checks, like Google Ads Conversion Tracking and Remarketing, Floodlight, Google Analytics and Conversion Linker, we recommend using Google Consent Mode V2, which can be activated by inserting the following snippet before the Google Tag Manager script in your header:

<script data-cookieconsent="ignore">
    window.dataLayer = window.dataLayer || [];
    function gtag() {
        dataLayer.push(arguments);
    }
    gtag("consent", "default", {
        ad_user_data: "denied",
        ad_personalization: "denied",
        ad_storage: "denied",
        analytics_storage: "denied",
        functionality_storage: "denied",
        personalization_storage: "denied",
        security_storage: "granted",
        wait_for_update: 500,
    });
    gtag("set", "ads_data_redaction", true);
    gtag("set", "url_passthrough", true);
</script>

It is vital that this script loads before the Google Tag Manager script, otherwise the instructions to deny the use of cookies and to redact data will come too late!
Furthermore, if you have renamed the dataLayer, ensure that you replace window.dataLayer with the actual name of the dataLayer. For example: window.gtmDataLayer = window.gtmDataLayer || [];

Here’s an example of how this could look all togheter:

<html>
<head>
<title>GTM & automatic cookie blocking </title>
<link rel="stylesheet" type="text/css" href="style.css">

<script data-cookieconsent="ignore">
    window.dataLayer = window.dataLayer || [];
    function gtag() {
        dataLayer.push(arguments);
    }
    gtag("consent", "default", {
        ad_user_data: "denied",
        ad_personalization: "denied",
        ad_storage: "denied",
        analytics_storage: "denied",
        functionality_storage: "denied",
        personalization_storage: "denied",
        security_storage: "granted",
        wait_for_update: 500,
    });
    gtag("set", "ads_data_redaction", true);
    gtag("set", "url_passthrough", true);
</script>

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

1. Controlling cookies

Google Tag Manager includes several features that work together with Cookiebot to help you manage how tags behave in response to the end user’s consent choices.

Tags with built-in consent checks (such as Google Ads, Analytics, Floodlight and Conversion Linker) include logic that automatically changes the tag’s execution behavior based on the user’s consent state. No consent configuration is needed for this type of tags.
Google refers to this as Advanced Consent Mode

If a tag doesn’t support built-in consent checks, you can add Additional Consent Checks for the tag as described below. If a user does not give consent to the specific consent types you’ve selected for the tag, the tag will not run. This tag will only be executed once permission has been given.
Google refers to this as Basic Consent Mode.

GTM by default supports 5 different consent types that are automatically mapped by Cookiebot to the 4 categories used in Cookiebot CMP:

GTM Consent Type	Mapped Cookiebot Type	Description
ad_user_data	marketing	Controls whether personal data is sent to a Google core platform service.
ad_personalization	marketing	Controls whether data can be used for ads personalization (e.g. remarketing).
ad_storage	marketing	Enables storage (such as cookies) related to advertising
analytics_storage	statistics	Enables storage (such as cookies) related to analytics e.g. visit duration
functionality_storage	preferences	Enables storage that supports the functionality of the website or app e.g. language settings
personalization_storage	preferences	Enables storage related to personalization e.g. video recommendations
security_storage	necessary	Enables storage related to security such as authentication functionality, fraud prevention, and other user protection. Users will be informed about the specific storage purposes in the cookie declaration, but this type does not require consent from the end user.

1.1. Setting up Additional Consent Checks

1. In your GTM container, create the following trigger, to be used in your GTM configuration:

Event Name: cookie_consent_update,
Event Type: Custom Event,
Fires On: All Custom Events

You trigger should look similar to this:

2. Tags that do not support built-in consent checks and set cookies should specify the types of cookies using the Additional Consent setting under Tag Editor > Advanced Settings with the categories that the tag requires (see the scan report from Cookiebot if you are in doubt).

In this example the tag requires consent for ad_storage:

3. To achieve this, update any cookie-setting tags to replace the existing trigger (e.g. “All Pages”) with the new consent update trigger, e.g. for your Facebook Pixel Code tag. This will fire your tag when the user has opted in on the required consent type.

If multiple conditions are necessary you can use a trigger group to join those conditions into one trigger. (https://support.google.com/tagmanager/answer/9164222?hl=en)

4. For a complete view of the consent settings across all the tags in your container, you can enable the Consent Overview from your container settings.

This script is inserted in the HTML of the page where your cookie declaration has to be visible. If you don’t have such a page create a new page for it. Replace the green code below for the code from the cookiemanager. (Which you will find in the Cookiebot manager , tab ‘Your scripts‘):

<html>
<head>
...
</head>
<body>
<h1>Cookie verklaring</h1>
<script id="CookiePolicy" src="https://consent.cookiebot.com/00000000-0000-0000-0000-000000000000/cd.js" type="text/javascript" async></script>
</body>
</html>

You can let your webdeveloper implement these scripts. Just send him/her the scripts and the information on this page.