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

Intro

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:

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.

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

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)/
      }
    ]
  }
}

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:

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

Conclusion

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.