Google Consent Mode v2

Sergey Labut - Apr 11 - - Dev Community

Why should this matter to you?

For those utilizing Google's offerings like Google Analytics, Google Ads Conversion Tracking, Google Ads Remarketing, and other marketing tools from Google, it's crucial to understand that data collection and processing regulations are tightening. Gaining explicit consent from users to gather and manage personal information is now a requirement. Adopting Google Consent Mode (GCM) represents a strategic approach to comply with these rules.

What is new in Google Consent Mode v2?

Google has updated its consent mode, introducing two new parameters. These parameters are to be used alongside ad_storage and analytics_storage
ad_user_data: sets consent for sending user data related to advertising to Google,
ad_personalization: sets consent for personalized advertising.

If you've been using Google services alongside Google Consent Mode, it's time for an update. Failing to integrate the new consent parameters could lead to your Google Ads and Google Remarketing ceasing to function.

How to set up Google Consent Mode?

There are several ways to implement Google Consent Mode: using gtag.js or Google Tag Manager (GTM), using basic or advanced mode, with or without Consent Management Platform (CMP). Gtag.js is only suitable for Google tags, not for all, while GTM provides a container suitable for any tags (eg gtag.js) where you can manage them all. Basic mode operates on an all-or-nothing principle, while Advanced mode offers more granular control.
Here is the visual difference between the modes.

basic vs advanced mode

Here is a visual representation of key implementation steps.

gtag vs GTM

Now the same thing, but in text form and with additional information.
First of all you can set default values for consents. Regardless of the mode, gtag.js and GTM are almost the same.

<script>
  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',
    'wait_for_update': 500,
  });
 // for gtag.js
  gtag('js', new Date());
  gtag('config', 'Google tag ID');
 // for GTM 
  dataLayer.push({'gtm.start': new Date().getTime(), 'event': 'gtm.js'});
  </script>
Enter fullscreen mode Exit fullscreen mode

Note: It's best not to overlook setting defaults. In the API, all of these options are set to "granted" but that's not what we usually want, we usually want them to be "denied".

Then a few words about modes. The basic mode works like a switch - accept all or deny all; only after consent is received, tags are loaded and data collection begins. To do this, you need to update all consents to "granted" when the user clicks "Accept" and then add a tag to the page. On the “Accept” button, add an onclick listener with the following function.

 localStorage.setItem('consentGranted', 'true');
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('consent', 'update', {
    ad_user_data: 'granted',
    ad_personalization: 'granted',
    ad_storage: 'granted',
    analytics_storage: 'granted',
  });

  // If you use gtag.js script
  var gtagScript = document.createElement('script');
  gtagScript.async = true;
  gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=Google tag ID';

  var firstScript = document.getElementsByTagName('script')[0];
  firstScript.parentNode.insertBefore(gtagScript,firstScript);

  // If you use Tag Manager script.
  var gtmScript = document.createElement('script');
  gtmScript.async = true;
  gtmScript.src = 'https://www.googletagmanager.com/gtm.js?id=Container ID';
  var firstScript = document.getElementsByTagName('script')[0];
  firstScript.parentNode.insertBefore(gtmScript, firstScript);
Enter fullscreen mode Exit fullscreen mode

Advanced mode can collect some anonymous data – cookieless ping before consent and even on denial. It is assumed that you can update consents individually - each consent has its own control. For GTM it is recommended to use the Consent Mode Template (CMT) your own or from the gallery.

A few words about CMP. It is a software tool or service used by website owners to manage user consent preferences regarding the collection and processing of their personal data. So usually it has support for other services such as advertising networks, analytics platforms, and content management systems and has its own management system. Usually added separately to your codebase alongside GTM.

This is all? Looks simple

Not so fast.

If you use gtag.js, the configuration typically occurs in your website's codebase. When you integrate gtag.js into your website, you will include a JavaScript snippet provided by Google within the HTML of your web pages.

If you are using GTM, you can add a script to the page if special conditions are met. Google services are natively supported by GTM. If you are going to use third party scripts with GTM, you need to know about the Google Consent API. When setting up a tag, it will be checked to see if it uses the Google Consent API. If yes, a built-in consent setting will appear. If not, then you need to configure it yourself. And you can add additional consent requirements even if they are already built in.

GTM interface with consent controls

Summary

Modern Internet users are demanding that technology companies respect their personal data, and governments are ready to help with this by publishing regulations. And the current trend is that the rules are becoming more stringent. Modern websites must first obtain users' permission before collecting and processing personal data, and consent mode is the way to do this. While GTM is a default option that provides Google’s consent mode and many other features, it is not the only option.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .