How do you set up a cookie banner using Google Tag Manager in conjunction with Server-Side Tagging?

Online privacy is a hot topic. With Google Consent Mode v2 and GDPR regulations, more and more sites are transitioning to a functional cookie banner. Sites need to be transparent about their data collection and ensure they comply with current privacy legislation. To do this, as a site, you use a Consent Management Platform (CMP). However, a functional cookie banner can also lead to complications with your tracking setup. There are now additional components that can throw a spanner in the works for your tracking setup, including your Server-Side Tagging setup. In this blog article, we delve deeper into the theory behind setting up a CMP via Google Tag Manager (GTM) in combination with Server-Side Tagging.

Consent Management Platform

Why do you need a Consent Management Platform?

A CMP allows users to maintain control over their personal data. Through a cookie banner, users can indicate their preferences for different types of cookies, such as analytical, functional, and marketing cookies. This is not only important for transparency, but also for complying with laws and regulations such as the GDPR (General Data Protection Regulation).

How to set up a cookie banner?

A cookie banner is what a visitor sees on a website. It is a simple tool that informs website visitors about the use of cookies and asks them if they wish to accept certain cookies. Technically speaking, a cookie banner is the front-end of your CMP. Visitors must be able to refuse cookies via the cookie banner. Additionally, visitors must be given a choice between different cookie categories, such as marketing cookies, analytical cookies, and functional cookies. You can find an explanation of the legal requirements at The Netherlands Authority for Consumers and Markets (ACM).

Additionally, there is one important aspect of the cookie banner that is often overlooked because this section is not a requirement. Cookie banners are often too easy to ignore. Visitors can use all the site's functionalities and browse different pages without having given their consent. Your tracking setup is blocked until this consent is given, so it is of great importance that someone gives this consent on the first page of the first session so that the UTM parameters and referrer can be read, among other things.

Please note that you must not use nudging when adapting your cookie banner. Nudging is the influencing of the choice provided. Changing the environment of the choice to unconsciously guide your site visitors towards a (desired) outcome is not permissible. If you make the ‘accept all cookies’ button bright green and make the ‘decline all cookies’ button almost the same colour as the background, also making the text virtually unreadable, you are engaging in nudging. See below for an example of a cookie banner that uses nudging. If your cookie banner looks like this, it is time to consider a new design.

Read it the following article from the Dutch Data Protection Authority about the formatting of your cookie banner.

The role of Google Tag Manager

A tag management system is an indispensable tool nowadays if you want to accurately track your site visitors via Server-Side Tagging. With a tag management system like Google Tag Manager, you are responsible for managing your tags and scripts yourself without having to adapt parts of the site code or possess HTML knowledge. This simplifies implementing changes and ensures better organisation and control of your tracking setup.

In the context of a Consent Management Platform, Google Tag Manager plays a crucial role. Via GTM, you manage your tracking setup and will need to configure what parts of your tracking setup are allowed to be activated based on your visitors' consent. If a website visitor refuses marketing cookies but allows analytical cookies, you can therefore activate tags for analytical platforms such as Hotjar or Google Analytics 4, but not for marketing platforms such as Meta Ads or LinkedIn Ads. Setting up these configurations, the consent overview settings within Google Tag Manager, is simple, but correctly continuing to measure your visitors with these new consent settings is a more difficult puzzle.

For some CMPs, it is possible to load them from Google Tag Manager. This is possible for Cookiebot and Cookiecode, among others. In Google Tag Manager, there is a specific page load trigger intended for loading a CMP and cookie banner. This is the ‘Consent Initialization’ trigger. This step in the loading process is the very first step of every page and is specifically reserved for loading a CMP or cookie banner so that no other tags can be fired until a visitor has given their consent.

1. De browser vraagt de URL op. 2. De DNS-server zoekt het IP-adres van de server. 3. De browser maakt verbinding met de server. 4. De server stuurt het HTML-bestand terug. 5. De browser rendert de HTML. 6. De browser zoekt naar links naar CSS- en JavaScript-bestanden. 7. De browser vraagt deze bestanden op en voegt ze toe aan de pagina. 8. De browser rendert de pagina opnieuw met de toegevoegde stijlen en scripts.

1. Initializing consent -> to load a CMP
2. Initialisation -> before the page begins to load
3. Pageview -> when the browser begins to load the page
4. DOM ready -> when the HTML is finished loading
5. Window loaded -> when all scripts and images are loaded

GTM Consent Overview settings

When you load your CMP at the very first step of a page load, you will therefore need to set it up to block all other tags (partially) for as long as consent has not yet been given. You can easily do this within Google Tag Manager with the Consent Overview settings.

These settings allow you to specify for each different tag what data consent is required from the visitor for that tag to fire. The different consent types you can specify this for are:

• ad_storage
• analytics_storage
• functionality_storage
• personalisation_storage
• security_storage

In addition to the above additional consent that requires a tag to fire, Google Tag Manager also uses Built-In Consent Checks. These are set by default for all Google tags such as the Google Tag, GA4 Event Tags, Conversion Linker, and Google Ads Conversion Tracking Tags. These built-in consent checks mean that Google's tags are consent-aware. These tags have built-in checks for analytics_storage, ad_storage, ad_user_data, and ad_personalization.

Why your unassigned traffic in GA4 is increasing after setting up Consent Overview settings

When someone lands on your site for the very first time, they haven't given consent yet. Among other things, the Google Tag and the page_view event tags will most likely already be activated the moment the page loads. Because no consent has been given on that first page, these tags are not (fully) activated. In the visualisation below, you can see why 'unassigned' increases when you have set up a cookie banner, but haven't adjusted the triggers accordingly. The referrer and the UTM parameters from the first page are not recorded, and on the second page, you lose that information.

Thanks to Built-In Consent Checks, Google can send a cookieless ping to Google Analytics 4 for their own Google Tag and GA4 event tags, such as the page_view event. These cookieless pings are an anonymised and non-identifiable Google Analytics event. Cookieless pings, as part of regular HTTP/browser communication, can only contain the following visitor-identifying information: user agent, screen resolution, IP address. This allows GA4, through its behavioural modelling, to still make a good estimation of how many users visited your site, what steps they took, and where all your visitors likely came from.

But if you want certainty about your visitors and where they come from, you will need to ensure that the Google Tag and the GA4 page_view event tag are fired on the first page of the first session after the visitor's consent has been given.

Adjust triggers based on the consent interaction

There are two ways to adjust your triggers in your tracking setup based on consent interaction (accepting or rejecting cookies via the cookie banner). This varies per cookie banner and Consent Management Platform. Below, two different methods for resolving this will be explained.

• Only fire all tags after the consent update on every page
• Re-trigger all necessary tags after cookie banner interaction

Set up triggers on consent_update

With the CMP Cookiebot, a DataLayer event named “cookie_consent_update” occurs on every page, even on the first page of the first session, but only after the visitor has given their consent. So, if you were to have all triggers wait for this DataLayer event or for after this DataLayer event, you would always be able to retrieve and forward the necessary user and marketing information, provided the cookies are accepted.

Follow these steps to set up your triggers within the GTM web container for Cookiebot:

1. Create a Custom Event trigger named cookie_consent_update.

2. Replace the triggers of all tags that should fire on every page load with this trigger. These are tags such as the Google Tag, the page_view event tag and the Conversion Linker.

2a. Ensure the Google Tag has priority over all other tags. To do this, in the tag configuration, under ‘more settings’, set the Tag Firing Priority to 1000.

3. Replace the triggers for all tags that can also occur during a page load, for example all triggers based on thank-you pages or based on DataLayer events such as view_item or purchase.

3a. For thank you pages, you can adjust the trigger configuration to the DataLayer event ‘cookie_consent_update’ on a specific Page URL.

3b. For other DataLayer events, you can use a Trigger Group. In a Trigger Group, you can add two different triggers so that the trigger can only be activated if both triggers have occurred.

Create an extra trigger on cookie banner interaction

With some CMPs, such as Cookiecode, a one-off DataLayer event occurs after interaction with the cookie banner. Therefore, you could add an extra trigger to all tags that fire on a standard pageload, so that these tags are only activated twice on the first page of the first session.

Follow these steps to set up your triggers within the GTM web container for Cookiecode:

1. Create a new trigger for a Custom Event. Name it: “cookiecode.consent_all|cookiecode.consent_update”. Ensure that ‘Use regex matching’ is enabled.

Ensure the options below are checked within your Cookiecode tag.

3. Add this new consent update trigger to the Google Tag, page_view event tags, and all other tags that trigger on a page load.

3a. Ensure that these tags that you are giving an extra trigger are not set to ‘once per page’, but to ‘once per event’.

3b. Set your Google Tag's tag firing priority to 1000.

Check how to set up your own cookie banner

With all other CMPs, you will have to check yourself how to set up your triggers so that visitors on the first page of the first session are tracked correctly. But how do you find out how to set up and adjust these triggers?

Custom cookie banner where a DataLayer event occurs on every page

1. Open your site in GTM preview mode and make sure you clear your cookies.

2. Accept all cookies and check in GTM what happens after you do this

2a. You could view it as follows:

3. In this situation, you could therefore set this trigger:

Custom cookie banner with an additional trigger based on cookie banner interaction

1. Open your site in GTM preview mode and make sure you clear your cookies.

2. Accept all cookies and check in GTM what happens after you do this

2a. You could view it as follows:

3. In this scenario, you could add the following trigger to all tags on pageload triggers:

This trigger group consists of the following 2 triggers:

A trigger group is used to ensure that this trigger can never fire based on a DataLayer event without the cookie banner button also being clicked on that page.

Conclusion

Setting up a CMP in combination with Google Tag Manager and Server-Side Tagging can be a challenging task, but it's essential for ensuring your visitors' privacy and collecting data about the origin of your site visitors. If you find yourself stuck at this point or just want to be sure everything is set up correctly, don't hesitate to get in touch with us. We are most easily reached via support@adpage.io.