Hey there, Benjamin from Loves Data here!
In this video, I'm going to show you how to use consent mode in Google Tag
Manager to only fire tags when people have agreed to use cookies on your website.
Using consent mode means you can also make use of modeled data
in GA4, Google Analytics 4, to fill in any gaps in your data.
Consent mode lets you integrate your cookie banner with Google Tag Manager
so that certain tags are only fired when people have agreed to cookies being used.
Today I'm going to show you how to configure a simple solution using
consent mode in Google Tag Manager.
Let's head to Google Tag Manager to take a look.
We're going to start by adding the consent overview to our container.
This option provides a summary of tags that do and don't use consent mode.
To enable this, let's select 'Admin'.
Then 'Container Settings'.
Let's enable the consent overview option.
And click 'Save'.
Now let's navigate to 'Tags'.
We can now see the consent icon above our tags.
Let's select this.
This shows us all of the tags in our container.
We can see all of our tags are listed under 'Consent Not Configured'.
This tells us that we haven't configured consent mode for our tags yet.
At the bottom you will also find a section called 'Consent Configured'.
When consent mode is defined for a tag, they will be listed in this section.
Let's close the overview.
In this tutorial, I'm going to show you a simple solution for using consent mode.
We're going to add a simple cookie banner to our website using Google Tag Manager.
Then when people allow cookies, we will fire the tags in our container.
And if people don't want to allow cookies, our tags won't fire.
I've created a pre-configured template you can import into Google Tag Manager.
I've included a link in the description below this video
if you would like to get this.
Now let's select 'Admin'.
And let's choose 'Import Container'.
Let's choose the pre-configured template.
And select 'Existing'.
And choose the default workspace.
Now I'm going to select 'Merge'.
And I'm going to import the container.
Now let's navigate to 'Tags'.
We can see there are two new tags.
One called 'Cookie Consent Consent Mode'.
And another called 'Cookie Consent Cookie Banner'.
Let's open the cookie banner tag.
This tag is a custom HTML tag that includes Osano's
open source cookie banner.
This will add the banner to our website.
Let's close this.
And let's select the 'Consent Mode' tag.
This uses a tag template the updates the consent status.
Let's close this.
And let's navigate to 'Variables'.
We can see there are two new user-defined variables.
One called 'Consent Status' and one called 'Cookie Consent Status'.
When someone makes a selection on the cookie banner, this will log a
cookie with a value of either 'deny' or 'allow' based on their selection.
The cookie consent status variable gets this value.
Then the cookie status takes this value and outputs either 'denied'
or 'granted' which is compatible with the consent status feature.
Now we need to modify our tracking tags so that they only fire when
people have opted-in to use cookies.
To do this, let's navigate to 'Tags'.
Let's select our GA4 configuration tag.
Let's select 'Tag Configuration' to edit the tag.
And under 'Advanced Settings'.
Let's choose 'Consent Settings'.
Now let's choose 'Require Additional Consent For Tag To Fire'.
And let's enter 'analytics', 'underscore', 'storage'.
This will mean that people need to have agreed to analytics cookies
before our GA4 tag will fire.
Now let's save the tag.
And you can repeat this for any other tags that require user consent.
I'm going to leave this to you.
The final thing we need to do is add some extra code before our Google
Tag Manager continer on our website.
We need to add this extra code to establish the
default values for our users.
So let's head to my blog to get the code.
Let's copy the code.
And now let's head to my website.
Since I'm using Squarespace, I'm going to use the same code injection option
we used to add the Google Tag Manager container.
I can see the container code, so we just need to paste the extra code before this.
And click 'Save'.
Now let's head back to Google Tag Manager.
Let's preview our container to see how this impacts the GA4 tag.
Let's select 'Preview'.
Our website loads.
And we can see the cookie banner pops up on the website.
Let's head to Tag Assistant.
And we can see that our GA4 tag hasn't fired.
Now let's head back to the website.
Choose the option to allow cookies.
And navigate to another page.
Now let's head back to Tag Assistant.
We can now see the GA4 tag has fired.
We're now using consent mode to control when our GA4 tag fires on
our website and we're using the cookie banner to control this.
Apart from the example, we covered in this tutorial, you can also integrate consent
mode with a range of consent management platforms in Google Tag Manager.
Have you set up consent mode?
Or are you going to?
I'd love to know!
Let me know in the comments below.
And if you haven't already, please take a moment to subscribe to my
channel for all of my latest tutorials.
Thanks for watching, and I'll see you in the next video!