image for the consent mode article

How to implement Consent Mode with gtag and Google Tag Manager

Share on facebook
Share on linkedin
Share on email

In my last article, I spoke about Google Consent Mode (beta) and what it means to your website’s data. Now let’s take a look at how to implement consent mode on your website. There are 2 main methods of how to implement consent mode on your website:

  1. gtag
  2. Google Tag Manager (GTM)

This post assumes you already have a Consent Management Platform in place, such as a third party solution or natively built in to your Content Managent Solution platform of choice (Such as Hubspot).

Consent Mode Behaviour

There are two main consent mode types to keep in mind, and you can read the full documentation from Google over here.

  1. Ad Tracking (ads_storage)
  2. Analytics Tracking (analytics_storage)

For the full breakdown of what happens if consent is granted or denied, you can read more in the supplied documentation, but for a quick breakdown:

If Ad Storage is denied, you won’t be able to create any new Advertising cookies and no existing first party cookies can be read. Google Analytics won’t be able to read ad tracking cookies either. Your mobile apps won’t be able to collect Advertising ID, Identifier for Advertisers (IDFA), or Identifier for Vendors (IDFV).

If Analytics Storage is denied, you won’t be able to read or write first party analytics cookies and all pings to Google Analytics will be cookieless for basic measurement purposes.

What is consent mode basic tracking?

When you implement consent mode, under basic tracking Google Analytics will collect:

  1. Timestamps of when they arrived on the site
  2. User Agent information such as browser and device type
  3. Referrer for what website they came from
  4. URL based Ad Tracking (URL Query Parameters for Ad Clicks)
  5. Consent State
  6. Random number for page load
  7. Information about the consent management platform

How to implement Consent Mode with Global Site Tag (gtag.js)

Currently, to implement Consent Mode (beta) it only supports gtag. Luckily, if you use gtag to deploy your analytics and tracking it’s a relatively simple process to do.

You can read the full documentation here, otherwise this blog article will summarise the basics in setting it up using gtag.

1. Insert the initialisation scripts after your analytics gtag script.

Your analytics gtag script will look something like this:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>

After your analytics snippet, you’ll need to insert the consent mode gtag script to initialise the system using the follow snippet. In this example, our consent state is defaulting to denied:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  // Default ad_storage to 'denied'.
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'analytics_storage': 'denied'
  });

  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Replace ‘GA_MEASUREMENT_ID’ with your own Google Analytics Measurement ID (e.g. UA-1234567-8)

2. Implement consent mode change function

The key thing to note when you implement consent mode, is ensuring your consent state updates based off user behaviour. The most common example of this is a small pop up for when a user lands on the site asking for their consent to track.

consent mode pop up asking the user permission to track their behaviour
An example of a cookie & tracking consent pop up

As we discussed previously, you will need a Consent Management Solution in order to properly track user consent states. Once that’s been implemented you can establish the Consent Mode change through the functionality of that button.

For example, we can attach a Consent Mode change update on the above “Accept” button using this snippet:

<script>
  function consentGranted() {
    gtag('consent', 'update', {
      'ad_storage': 'granted',
      'analytics_storage': 'granted'
    });
  }
</script>

<body>
  ...
  <button onclick="consentGranted">Accept</button>
  ...
</body>

Region Specific Behaviour

Consent Mode does allow you to adjust the default states of tracking based off where the user is. For example, if your website has jurisdiction in EU and AU you can set it so that tracking is disabled by default in the EU Region (Opt In) but enabled by default in AU (Opt Out).

gtag('consent', 'default', {
  'ad_storage': 'denied',
  'region': ['ES', 'US-AK']
});

Asynchronous Loading

If your Consent Management Platform doesn’t load until after your tags, you can place a delay within the gtag parameters to wait for your platform to load in

gtag('consent', 'default', {
  'ad_storage': 'denied',
  'wait_for_update': 500
});

How to implement Consent Mode with Google Tag Manager

Unfortunately for those of us on GTM, Consent Mode is not natively compatible with Google Tag Manager. Seems a bit silly, but since Consent Mode is still in beta we can expect this functionality later in the future.

If you’re impatient like me and can’t wait / don’t want to mess around with GTM + gtag.js, Analytics Developer Simo Ahava has implemented his own solution to taking care of Consent Mode in GTM.

Check out his guide over here.

I’ve recently implemented his Consent Mode solution on a website using Hubspot, and here’s the steps I went through:

1. Install Simo Ahava’s GTM Plugin.

In your GTM Container, you’ll need to navigate to Templates > Search Gallery > Search for “Consent” > Select Consent Mode (Google Tags) by gtm-templates-simo-ahava

how to implement consent mode with simo ahava's plugin

2. Initialise the default state

Create a new tag with the Consent Mode type that we installed in the previous step.

The default state will be dependent on your own preference, but make sure you select the right one before moving on

After you’ve set your parameters, in the advanced options set up your cleanup tag as your Analytics snippet just to ensure it fires next.

3. Set up a listener event for Consent Change

The next step will be to create a tag that listens for an event change. The exact event that takes place will be determined based off your Consent Management Platform. It can be a custom event listener, button click, form submit, or any type of trigger.

In our case, we used the Hubspot consent change event listener to push the consent change into the data layer, which we’ll pick up in a custom event trigger.

In this example, we will send an event to the datalayer named “HS_Consent_Allowed” when the consent state changes.

4. Create a custom event trigger

Under “triggers”, create a custom trigger that picks up the earlier data layer event we established.

5. Create an update tag based on the custom event trigger

Create a new tag to update the consent state when a user accepts the tracking.

Set the Consent Command to “Update”, and both Advertising and Analytics to “granted”.

6. Publish and Test

Publish your container and test the results!

To check if your analytics is running in consent mode, open up a new incognito window of your site and open the developer console.

Go to the “Network” tab and in the search field type “collect”.

Navigate to the bottom entry, click on it, then in the “Headers” tab scroll all the way to the bottom. There you should see an entry labelled “gcs” and if your consent mode is set to denied you should see it labelled “gcs: G100”


As you can see there’s a few steps in order to implement consent mode, but with it still in beta I hope that they bring in built in GTM functionality to it in the near future.

It’s a good initiative by the data giant that is Google, but functionality like this is only the start of a proper privacy and consent framework for your website. Combine it with consent management platforms and ethical advertising policies and you’ll be well on your way to stay ahead of the ad game in 2021.

In the meantime, join us on Slack

Join a community of like-minded people to share and discuss how to bring better Focus to your website data.
Ilustration

Join our early access

Submit this form and a quick questionnaire to join the list

PRE-RELEASE
Want to be part of early access?

Submit this form and a quick questionnaire to join the list

Become a Contributor