Manage user cookie consent with Google Tag Manager: a step-by-step guide
Intro
Google Tag Manager (GTM) is a highly useful tool that can assist in managing website's tags and pixels with ease. However, with increased privacy regulations such as the GDPR and equivalents, it is essential to ensure that your website's cookie policy is fully compliant. GTM introduced a built-in cookie consent feature in 2018, which enables website owners to manage User consent for cookies and tracking technologies, but it's not enabled by default.
In this blog post, I will walk through the cookie consent feature and discuss the advantages of using Google Tag Manager, the significance of configuring it properly to comply with actual cookie policy requirements, and provide a comprehensive guide on how to do it correctly. Let's get started.
Advantages of Google Tag Manager
Out of all the benefits offered by Google Tag Manager, I have identified four key advantages that I consider to be the most significant.
-
Google Tag Manager provides the advantage of easily managing tags and pixels without relying on the development team to attach additional scripts to a product. This saves time and resources, allowing marketers and non-technical Users to take control of tag management after a proper configuration.
-
Another advantage is the ability to customize the cookie banner without making changes to a product. With GTM, you can easily modify the cookie banner to comply with privacy regulations and reflect your branding as well as providing a seamless User experience.
-
GTM offers the flexibility to switch between previous versions and publish any of them at any time. This version control feature allows you to make changes and experiment with different configurations, ensuring smooth transitions and reducing the risk of errors.
-
The ability to export and import the container configuration is yet another benefit. This functionality enables you to use the same configuration across different company websites, streamlining the deployment process and maintaining consistency in your tracking and analytics setup.
How to configure Google Tag Manager properly?
By default, GTM uses the "Page View" trigger to fire tags when a page loads. This means that any tags that are added to a Google Tag Manager container will be automatically triggered when a User lands on the page. Unfortunately nowadays it cannot work like that. Because of the latest privacy regulations the User should be able to decide whether he want to give its consent to manage the cookies or not.
To help ensure compliance with cookie policy regulations, website owners should follow these key steps to configure their Google Tag Manager scripts:
- Add a cookie consent banner: Before any cookies can be set, Users must give their consent. A cookie consent banner should be added to your website that clearly explains what cookies are being used and why. The banner should also give Users the option to accept or reject cookies.
- Enable Google Tag Manager's built-in consent features: Google Tag Manager has built-in consent features that can be enabled to ensure that tags are only fired once Users have given their consent. This can be done by setting up consent triggers and conditions within Google Tag Manager.
- Configure tags to honor cookie consent: Once consent has been given, you'll need to configure your tags to honor the User's choice. This can be done by setting up tag firing triggers and conditions within Google Tag Manager that only fire when the User has given their consent.
By following these steps, you can configure your Google Tag Manager scripts to meet cookie policy regulations and ensure that you are respecting Users' privacy while still delivering a great User Experience.
✏️ Note: Remember to regularly review and update your cookie policy. Regulations may change over time, so it's important to regularly review and update your cookie policy to ensure that it remains compliant.
Adding a Cookie Consent Banner
To implement the cookie banner, I have selected Cookie Consent, one of the most popular open-source projects on GitHub. It allows us to customize its design, content, and even add custom logic after the User accepts the selected options.
To add a custom banner to Google Tag Manager, follow these steps:
Open Google Tag Manager and select your preferred container. If you don't have a configured account in GTM or you don't have an open container, you can click on this link to learn how to set it up.
Select the Tags option from the left-side menu and click on the New button.
Then, click on Tag Configuration and choose Custom HTML.
The code below contains the default configuration of the Cookie Consent. You can customize various aspects, such as the placement of the banner, button settings (including roles and labels), titles, and section descriptions. If you wish to personalize the banner's design, you can visit the Playground. In the Playground, you'll find a section explaining "How to use custom themes" along with a few example themes provided above it.
Now, paste the provided example code for the cookie banner into the HTML field.
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.9.1/dist/cookieconsent.css" /> <script src="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.9.1/dist/cookieconsent.js"></script> <script> var cc = initCookieConsent(); cc.run({ current_lang: 'en', autoclear_cookies: true, onFirstAction: function (user_preferences, cookie) { // callback triggered only once on the first accept/reject action }, gui_options: { consent_modal: { layout: 'cloud', // box/cloud/bar position: 'bottom left', // bottom/middle/top + left/right/center transition: 'slide', // zoom/slide swap_buttons: false // enable to invert buttons }, settings_modal: { layout: 'box', // box/bar // position: 'left', // left/right transition: 'slide' // zoom/slide } }, languages: { 'en': { consent_modal: { title: 'We use cookies!', description: 'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <button type="button" data-cc="c-settings" class="cc-link">Let me choose</button>', primary_btn: { text: 'Accept all', role: 'accept_all' // 'accept_selected' or 'accept_all' }, secondary_btn: { text: 'Reject all', role: 'accept_necessary' // 'settings' or 'accept_necessary' } }, settings_modal: { title: 'Cookie preferences', save_settings_btn: 'Save settings', accept_all_btn: 'Accept all', reject_all_btn: 'Reject all', close_btn_label: 'Close', // cookie_table_caption: 'Cookie list', cookie_table_headers: [ { col1: 'Name' }, { col2: 'Domain' }, { col3: 'Expiration' }, { col4: 'Description' } ], blocks: [ { title: 'Cookie usage 📢', description: 'I use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="#" class="cc-link">privacy policy</a>.' }, { title: 'Strictly necessary cookies', description: 'These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly', toggle: { value: 'necessary', enabled: true, readonly: true // cookie categories with readonly=true are all treated as "necessary cookies" } }, { title: 'Performance and Analytics cookies', description: 'These cookies allow the website to remember the choices you have made in the past', toggle: { value: 'analytics', // your cookie category enabled: false, readonly: false }, cookie_table: [ // list of all expected cookies { col1: '^_ga', // match all cookies starting with "_ga" col2: 'google.com', col3: '2 years', col4: 'description ...', is_regex: true }, { col1: '_gid', col2: 'google.com', col3: '1 day', col4: 'description ...', } ] }, { title: 'Advertisement and Targeting cookies', description: 'These cookies collect information about how you use the website, which pages you visited and which links you clicked on. All of the data is anonymized and cannot be used to identify you', toggle: { value: 'targeting', enabled: false, readonly: false } }, { title: 'More information', description: 'For any queries in relation to our policy on cookies and your choices, please <a class="cc-link" href="#yourcontactpage">contact us</a>.', } ] } } } }); </script>
Scroll to the bottom and select the trigger labeled Initialization - All Pages.
Rename the "Untitled Tag" to Custom Cookie Banner and click Save.
Finally, your tags list should look similar to this:
To verify that everything is working correctly so far, you need to add the Google Tag Manager script to your webpage. Click on GTM-[your_id] next to the "Preview" and "Submit" buttons. A modal window will appear with instructions on how to proceed.
After adding the script, click on Preview and provide a link to your website where you have added the Google Tag Manager script. For example, I have added it to index.html on my local server, so I will use the http://127.0.0.1:8080 URL. Then, click Connect.
If the Tag Manager Assistant is successfully connected, you will see the following message:
Additionally, a new browser window will open with the provided URL. If you have followed the same steps, you shall see the Cookie Banner at the bottom of the browser window.
The selected cookie banner provides the User with all the necessary options. Users can accept all cookies, reject all cookies, or choose from the available choices.
Once the User makes a choice, the cookie consent will add a technical cookie (default name: cc_cookie) to the User's browser.
💡 Tip: The
__TAG_ASSISTANTtechnical cookie will exclusively appear for individuals using the Tag Assistant tool for debugging purposes.
Here is the complete content of the cc_cookie:
{ "categories": [ "necessary", // Always present "analytics", // Appears only if the user accepts all cookies or selects analytics "targeting" // Appears only if the user accepts all cookies or selects targeting ], "level": [ "necessary", "analytics", "targeting" ], "revision": 0, "data": null, "rfc_cookie": false, "consent_date": "2023-04-25T14:09:48.764Z", "consent_uuid": "e9eb8459-7a72-4cc7-8251-31f581c78727", "last_consent_update": "2023-04-25T14:09:48.764Z" }
GTM Variable Configuration
In order to capture the User's technical cookie containing consent information, we need to add variables to Google Tag Manager.
Open the Variables section from the left-side menu and click on New in the "User-Defined Variables" section.
Click on Variable Configuration and select 1st Party Cookie.
Enter your cookie name (default: cc_cookie) in the cookie name field. Then, rename the variable from "Untitled Variable" to CC Cookie and click Save.
To verify if Google Tag Manager is capturing the cookie and its values, you can check the preview mode once again.
⚠️ Warning: Remember to close and reopen the Tag Assistant tab every time you make changes to the configuration. This is necessary because the previously opened tab won't sync with the latest changes.
💡 Tip: If you don't see the cookie banner in the newly opened tab, go to the developer tools in your browser, remove cc_cookie, and refresh the page.
Initially, when a new User opens your page, the status of the CC Cookie (GTM Variable) will be set to undefined. You can check this in Tag Assistant.
After clicking the Accept All button in the cookie banner, the User's browser will receive a technical cookie that complies with GDPR. When the page is refreshed, Tag Assistant will show us the values of the accepted consents.
💡 Tip: Note that every time the page is refreshed, Tag Assistant will display new entries in the left menu. Remember to select the new entry if you want to check for any changes.
After adding User's technical cookie handling to GTM Variables, let's add a few more variables to help us manage User's consent related to specific categories.
Open the Variables menu once again and click New. This time, select the Custom JavaScript option.
The code snippet below checks the value of the CC Cookie. If the cookie is not present, it returns 'denied'. If the cookie is present and the 'analytics' category is included in the cookie, it returns 'granted'. Otherwise, it returns 'denied'.
Paste the provided code below into the editor.
function() { var cookie = {{CC Cookie}} if (!cookie) { return 'denied'; } var json = JSON.parse(cookie) if (json["categories"].includes("analytics")) { return "granted"; } else { return 'denied'; } }
Rename this new variable to Consent - Analytics and click Save.
This variable will essentially return a value of granted if the User accepts all or analytical cookies, and denied otherwise.
Let's add one more variable. Once again, copy the variable code, but this time change the conditional statement:
- from
json["categories"].includes("analytics") - to
json["categories"].includes("targeting")
Rename the variable to Consent - Targeting and click Save. After completing this operation, the list of variables should look like this:
Let's check if everything is working correctly. Click on the Preview button and open Tag Assistant.
⚠️ Warning: Remember to close and reopen the Tag Assistant tab every time you make changes to the configuration. This is necessary because the previously opened tab won't sync with the latest changes.
💡 Tip: If you don't see the cookie banner in the newly opened tab, go to the developer tools in your browser, remove cc_cookie, and refresh the page.
When a new User visits our site, the CC Cookie variable will return undefined, and both the Consent - Analytics and Consent - Targeting variables will return denied.
Now, let's accept only Performance and Analytical cookies in our consent banner and click Save Settings.
After saving the settings, refresh the page, and you'll see new entries in Tag Assistant.
Now you can see that Tag Manager shows the value of CC Cookie instead of undefined, and the value of Consent - Analytics has changed from denied to granted.
Setting up Triggers
Next, let's set up triggers that will notify GTM about consent updates. Additionally, we'll configure another trigger (to be used later) to activate consent blocked tags specifically for users who have accepted certain consents.
Open the Triggers menu from the left-side menu and click New. Choose a trigger type of Custom Event.
In the event name field, enter client-consent-update and select the All custom events radio button option.
Rename it to Client Consent Update and click Save.
We will add this trigger to our consent banner, so that every time the User clicks on any button, this trigger will be fired.
Now, let's add one more trigger. This one will be needed after GTM updates the consent data on its side.
Once again, click the New button and select Custom Event.
Fill the event name field with the value of gtm-consent-updated and select the All custom events radio button option.
Rename the trigger to GTM Consent Updated and click Save.
Finally, let's add the code that will trigger the "Client Consent Update" to the previously added Custom Cookie Banner.
Go to Tags and click on Custom Cookie Banner. Modify the onFirstAction function:
From:
onFirstAction: function (user_preferences, cookie) { // callback triggered only once on the first accept/reject action },
To:
onFirstAction: function () { window.dataLayer.push({ 'event': 'client-consent-update' }); },
Save the latest changes.
Update GTM Consents
Now, I will show you how to enable GTM Consent Overview mode and how to automatically update User consent.
To enable GTM Consent Overview mode, follow these steps:
Click on the Admin tab below the Tag Manager logo, and then open Container Settings from the menu on the right.
Select the Enable consent overview checkbox and click Save.
With this option enabled, you'll be able to display an overview of all tags and their associated consents.
I'll show you how it works a little later. Now, let's add a tag that will automatically update GTM Consent settings after the User's click without the need to refresh the page.
Click on the Workspace tab below the Tag Manager logo, open the Tags menu on the left, and click on the New button inside the "Tags" table.
Click on Tag Configuration and select Discover more tag types in the Community Template Gallery.
Next, click on the search icon and type Consent Mode Select Consent Mode (Google tags) by gtm-templates-simo-ahava. If you'd like to check out the code for this plugin, it is available in Simo Ahava's GitHub repository.
Click on Add to workspace.
Since this is a Google Community Plugin, you'll need to accept adding this plugin to your workspace. Remember, you can always review the source code in the plugin repository.
If you agree, click on the Add button.
You will then be presented with the Tag Configuration menu.
In the Consent Command select field, choose Update.
Now, we can select which consent settings we want to update after the User's approval.
Cookie Consent gives us the option to select "Performance and Analytics" cookies and "Advertisement and Targeting" cookies. To accomplish this, we created two GTM Variables called "Consent - Analytics" and "Consent - Targeting". Now, we can use them in this plugin to determine whether a specific consent was denied or granted.
Click on the "Advertising" select field and choose {{Consent - Targeting}}. Then click on "Analytics" and choose {{Consent - Analytics}}. Set the rest of the fields to denied.
After making these changes, the settings should look like this:
Scroll down and select triggers. We need to select Client Consent Update and Consent Initialization - All Pages.
💡 Tip: To add multiple triggers to one tag, click on the "+" (plus) icon that appears after selecting the first one.
The final result should look like this:
Finally, rename this tag to Consent Mode | Update Consent and click Save.
Now, if we go to the Tag Assistant to test it out, we will see that after clicking on any consent-related button on our page, a new event will be displayed.
However, please note that the consent itself will be updated after a short delay. In this example, you may observe that the Consent event (which handles consent updates in GTM) is labeled as number 20, whereas the client-consent-update event is number 18.
This is why we need the previously added "GTM Consent Updated" trigger.
Once again, open the Tags menu and click on the New button. Then click on Tag Configuration and select Custom HTML.
This tag will be activated whenever the user clicks on any button within our Cookie Consent. After a brief delay of half a second (value: 500), it will trigger an additional event named gtm-consent-updated. We will link this trigger to our "consent blocked" tags, such as Google Analytics or Facebook Pixel. This step is necessary because GTM consent updates occur slightly later and not immediately after our client-consent-update event.
Paste the code below into the HTML field:
<script> (function() { window.setTimeout(function () { window.dataLayer.push({ 'event': 'gtm-consent-updated' }); }, 500); })(); </script>
After that, select Client Consent Update in the trigger section below.
Rename the newly created tag to GTM Consent Update and click Save.
That covers the GTM configuration. Now, let's add an example that uses Google Analytics tag, and see if it will be added to the User's session only after the cookie consent.
Ready to enhance user trust and privacy?
Stay ahead of privacy regulations with Google Tag Manager's Consent Mode. Start managing User consent effortlessly! If you need guidance in this area, we are here to provide expert consultation.
Configuring Tags to Comply with Cookie Consent
In this chapter, it's important to note that Google has introduced Tags with built-in support for consent mode, and Google Analytics is one such product. This means that you don't need to add an additional consent check. To read more about Google products' consent mode behavior, check out this link.
In this chapter, I'll also show you how to configure consent checks for third-party Tags, so only Users who have given their consent will receive tracking cookies.
Google Analytics 4 Built-in Consent Mode
Let's start by adding the Google Analytics 4 Tag to the GTM Demo Container and seeing how the built-in consent checks work.
First, select the Tags option from the left-side menu and click the New button.
Then choose Tag Configuration and select Google Analytics GA4 Configuration.
Enter your GA Measurement ID into the input field.
Next, navigate to the Advanced Settings section and access the Consent Settings.
As you can see below, the Google Analytics 4 Tag has built-in consent checks for ad_storage and analytics_storage. This means that we don't need to add anything more to this tag, and the Google Analytics 4 cookie will not be added to the User's page unless they provide the necessary consents.
Because we've just checked consent settings, we can select the No additional consent required option. Google added this option to help Users distinguish if the specific tag consents were reviewed or not.
Now let's configure the triggers that will activate this tag.
Click on Triggering and select both All pages and GTM Consent Updated.
Finally, click the Save button. After performing this action, GTM will suggest a new name, such as "Google Analytics GA4 Configuration." Let's accept it as is.
To test the setup, let's enter "Preview" mode.
If you clear your browser cookies, refresh the page with the GTM Tag, and closely inspect the Tag Assistant, you will notice that the Google Analytics Tag was fired after the Container loaded, but because the consent status was denied, no tracking cookies were added to the User's browser.
Checking the cookies on the User's side will reveal that nothing except the __TAG_ASSISTANT cookie is added to the User's browser.
Now let's refresh the page and click on the Accept all button in the consent banner, and you will observe new entries in the Tag Manager.
After the User clicks the button, GTM will receive the client-consent-update trigger, and after a short delay, the consents will be updated. Subsequently, the gtm-consent-updated trigger will once again fire the Google Analytics tag.
But this time, the Consent State of ad_storage and analytics_storage will be equal to granted. This means that Google Analytics 4 will add tracking cookies to the User's browser.
Refreshing the cookie list without refreshing the page will confirm that everything is functioning properly.
Let's explore another scenario: what happens if a User previously accepted all cookies and revisits the site? To answer this question refresh the browser window and examine the new entries in the Tag Manager.
As shown in the screenshot below, this time the Google Analytics Tag will be automatically activated because both needed consents were granted.
Great! We have successfully tested out Google's built-in consent configuration. Now, only Users who accept our analytical cookies will be tracked, respecting the privacy of others.
Configuration of 3rd Party Tag Consent Mode
To illustrate the use of 3rd party tags, we will take the example of Hotjar, which doesn't have built-in consent checks.
First, click on Tags from the left-side menu and then click on New.
Next, select Tag Configuration and click on the search icon at the top right corner. Type Hotjar and select Hotjar Tracking Code.
Enter the Hotjar Site ID.
Then navigate to the Advanced Settings section and access the Consent Settings.
Choose the Require additional consent for tag to fire option, click on Add required consent, and select the analytics_storage option from the select field.
This ensures that Hotjar will only be added to the User's page after they provide the necessary analytics consent.
Similarly, you can configure the consent check for any other third-party Tag you add to GTM.
Now, let's configure the triggers that will activate this tag.
Click on Triggering and select both All pages and GTM Consent Updated.
Finally, click the Save button. After performing this action, GTM will suggest a new name, such as "Hotjar Tracking Code." Let's accept it as is.
To test the setup, let's enter "Preview" mode.
If you clear your browser cookies and refresh the page with the GTM Tag, you'll notice that the Hotjar Tracking Code is blocked by the Consent Settings once the Container is loaded. Although this behavior differs slightly from the built-in consent checks, the end result remains the same. The Hotjar Tracking Cookie will only be added to the User's browser after their consent is given.
Now, click on the Accept all button in the consent banner, and you will see new entries in the Tag Manager. After selecting the gtm-consent-updated entry, you'll see that this time the Hotjar Tag was fired.
Refreshing the cookie list without refreshing the page will confirm that Hotjar tracking cookies were received only after the User's consent.
⚠️ Warning: For security reasons, Hotjar only operates and adds its cookies to the User's browser when accessed over HTTPS.
Consent Overview
Consent Overview is the feature that helps confirm whether all added Tags are compliant with cookie policies. To access the GTM Consent Overview menu, select Tags from the menu on the left-hand side and click on the Shield Icon.
When you access the GTM Consent Overview menu, you'll see a view that displays all the Tags you've added to your container.
The first table shows the Tags for which consent hasn't been configured. In this case, the table shows only technical Tags that help receive and update User consents, and do not require any specific configuration.
The second table lists all Tags with configured consents. In the previous steps, we selected "No additional consent required" for the Google Analytics Tag and "analytics_storage" for Hotjar, which is why these two tags appear in this list.
To simplify things, we can choose the "No additional consent required" option in the "Advanced settings/Consent settings" menu for every tag that doesn't require additional consent. This will make it easier for us to identify any new Tags without configured consent in the future.
The final result will look as follows:
Publishing Your GTM Container
Once you've completed your review, you can close the window and proceed to submit the container configuration.
Click the Submit button available at the top right corner.
Enter a "Version Name", in this example I will use 1.0.0 semantic versioning compliant string, and then click Publish.
From this point on, every page with this specific Google Tag Manager script will display a cookie consent banner and add Google Analytics and Hotjar only for Users who have given their consent.
Thanks to the version control feature, you'll be able to easily publish new versions with the latest changes and revert to previous versions if needed, without any hassle.
Conclusion
I hope that the amount of effort needed to configure GTM Consent Mode would not discourage you from using this method of handling User's consent.
Note that once properly setup, management of a large number of Tags through the GTM UI is simplified, without the need to modify the code or rely on your technical team for assistance. Adding a new Tag to the existing configuration is a very straightforward process. Simply select the Tag from the existing options or choose a Custom HTML Tag, provide the necessary identifier or script, and specify the required consents for the Tag to be activated. That's it!
Also remember that you can always export this container configuration as a .json file and reuse it in your future projects.
