Kacper Drzewicz
Kacper Drzewicz
Senior Software Engineer

Manage User Cookie Consent with Google Tag Manager: Adapting to CookieConsent v3

May 23, 20243 min read


With the release of CookieConsent v3, we've decided to create this article to help you understand and adapt to the new version. This article builds on concepts and areas discussed in our previous post. For a deeper dive and to see the full adaptation process, please read our previous step-by-step guide.

Adding a Cookie Consent Banner

First, let's look at the changes in the default configuration of Cookie Consent. Here's an example of the code you need to paste into Custom HTML in Tag Configuration:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.0.1/dist/cookieconsent.css" /> <script src="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.0.1/dist/cookieconsent.umd.js"></script> <script> CookieConsent.run({ // https://cookieconsent.orestbida.com/reference/configuration-reference.html#guioptions guiOptions: { consentModal: { layout: 'cloud inline', position: 'bottom left', equalWeightButtons: true, flipButtons: false }, preferencesModal: { layout: 'box', equalWeightButtons: true, flipButtons: false } }, onFirstConsent: function(cookie) { // callback triggered only once on the first accept/reject action }, categories: { necessary: { enabled: true, // this category is enabled by default readOnly: true // this category cannot be disabled }, analytics: { autoClear: { cookies: [ { name: /^_ga/, // regex: match all cookies starting with '_ga' }, { name: '_gid', // string: exact cookie name } ] }, // https://cookieconsent.orestbida.com/reference/configuration-reference.html#category-services services: { ga: { label: 'Google Analytics', cookies: [ { name: /^(_ga|_gid)/ } ] } } }, targeting: {} }, language: { default: 'en', translations: { en: { consentModal: { title: 'We use cookies', description: 'Cookie modal description', acceptAllBtn: 'Accept all', acceptNecessaryBtn: 'Reject all', showPreferencesBtn: 'Manage Individual preferences' }, preferencesModal: { title: 'Manage cookie preferences', acceptAllBtn: 'Accept all', acceptNecessaryBtn: 'Reject all', savePreferencesBtn: 'Accept current selection', closeIconLabel: 'Close modal', sections: [ { title: "Cookie usage", description: "We use cookies to ensure the basic functionalities of the website and to enhance your online experience ..." }, { 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", linkedCategory: "necessary" }, { title: "Performance and Analytics cookies", description: "These cookies allow the website to remember the choices you have made in the past", linkedCategory: "analytics", cookieTable: { headers: { name: "Name", domain: "Service", description: "Description", expiration: "Expiration" }, body: [ { name: "_ga", domain: "Google Analytics", description: "Cookie set by <a href=\"#das\">Google Analytics</a>", expiration: "Expires after 12 days" }, { name: "_gid", domain: "Google Analytics", description: "Cookie set by <a href=\"#das\">Google Analytics</a>", expiration: "Session" } ] } }, { title: 'Targeting and Advertising', description: 'These cookies are used to make advertising messages more relevant to you and your interests. The intention is to display ads that are relevant and engaging for the individual user and thereby more valuable for publishers and third party advertisers.', linkedCategory: 'targeting', }, { title: 'More information', description: 'For any queries in relation to my policy on cookies and your choices, please <a href="#contact-page">contact us</a>' } ] } } } } }); </script>

Once you preview your application through the GTM panel, you should see a banner in the bottom left corner of the page:

Cookie Consent Banner in the User's Browser

Configuring GTM Variables

When reading a cookie, it's possible that you might receive a string instead of an object when trying to read it by name.

CC Cookie string problem

To prevent this, make sure to check the URI-decode cookie box when adding a 1st Party Cookie in Variable Configuration:

CC Cookie URI-decode cookie

Consent Variables

The script we presented earlier for reading the selected field in the banner works correctly for selecting an entire category.

function() { var cookie = {{CC Cookie}} if (!cookie) { return 'denied'; } var json = JSON.parse(cookie) if (json["categories"].includes("analytics")) { return "granted"; } else { return 'denied'; } }

In this article, we'll stick with this configuration. However, Cookie Consent also allows for the configuration of acceptance for individual services if they have been added to the configuration.

// https://cookieconsent.orestbida.com/reference/configuration-reference.html#category-services services: { ga: { label: 'Google Analytics', cookies: [ { name: /^(_ga|_gid)/ } ] } }

Cookie Consent Banner services

If you want to create variables for individual services, replace the condition in the script. For example json["categories"].includes("analytics") to json["services"]["analytics"].includes("ga").

💡 Tip: Note that even if there are no services in a given category, the services object will contain an array for that category, which will be empty.

Updating GTM Consents

Another update involves renaming fields in Consent Mode (Google tags). These fields now appear as follows:

Consent Mode Tags

💡 Tip: You can also utilize the functionality of services to assign the appropriate consent to individual fields.


Thank you for reading! For more detailed steps and additional information, make sure to check out our previous post. If you have any questions or need further assistance, feel free to reach out.

Tomasz Fidecki
Tomasz Fidecki
Managing Director | Technology

Maximizing Efficiency with Dev Containers: A Developer's Guide

Feb 22, 202419 min read
Article image
Tomasz Fidecki
Tomasz Fidecki
Managing Director | Technology

The cost of serverless application development on AWS: A Collector's Platform case study

Feb 08, 202420 min read
Article image
Bartłomiej Gałęzowski
Bartłomiej Gałęzowski
Software Engineer

Unleashing the power of serverless: a deep dive into web form deployment with our serverless plugin

Oct 12, 202313 min read
Article image