- Hey there, measure geeks. (upbeat music)
Julian here.
Back with another video.
And today we're gonna talk about
how you can connect your Google Tag Manager account
to a consent solution
so you can fire your tags based on the consent
of the user who visited your website.
Now right up front,
I need to let you know that this is in no way
a legal advice video in any way.
The demos that I set up here
are maybe a little bit simplified,
so we will be able to get through it quite quickly
and it might be applicable for your case,
but obviously, there are many different consent solutions
out there, there are many different jurisdictions,
many different countries out there
that have different other privacy concerns
and interpret the law maybe a little bit different.
So your mileage may vary in terms of going through this.
You always need to be flexible and adjust,
I think you can do this.
Now this implementation is probably more
on the advanced side of the whole tracking thing,
because there are many different little variables
that go into this.
And this video has become longer than I thought,
that's why I split it up into four parts.
In this first part,
we are going to set our cookie consent banner
with the help of Google Tag Manager.
In the second part,
we are going to connect the cookie consent banner
with our Google Tag Manager implementation.
So Google Tag Manager is aware of the consent
that has been given by the user.
And in the third part,
we are going to connect our Google Tag Manager
with our tags
so the triggers are correctly configured.
So they only fire in certain circumstances
based on the consent of the user itself.
And then in the fourth part,
we are going to look at a new feature
within the Google Tags, which is called consent mode
where we will be able to control and manipulate
how our tags like Google Ads or Google Analytics
react to the consent state in terms of sending data over.
So that will be an interesting one as well
at the end here.
Now we will be publishing these videos
step by step, week by week.
If you want to already skip forward to the next video
and see this in the whole length,
you can actually go over to measureschool.com/consent,
where we have the full length video,
as well as some more downloads and resources for you
to check out as well.
So over to measureschool.com/consent.
Now, we got lots to cover.
So let's dive into setting up our consent banner
with the help of Google Tag Manager.
(air whooshing)
All right, to get started we are here on our Demoshop,
where we want to install a cookie consent solution.
Now there are many cookie consent solutions out there
and it might differ how to implement them.
But I have opted here to use the free version of Klaro
which is an open source project as well,
which you can use to install such a cookie consent banner
on your website.
There's also a paid version, which you can check out.
But here on the GitHub repository,
they give you already the right codes
that you have to install on your website
in order to get started with this.
Again, this might differ for the tool that you are using
but probably you can do it in a similar way.
So if you wanna follow along,
you can go over to this GitHub repository,
which I'm also going link up down below,
and you need to install these codes and grab them from here.
And what this tool will not do for you
is actually audit your site
and know which tools you want to deploy on your website.
You would need to have a look
of what cookies actually are being set.
For example, if you go into the developer tools here,
under developer tools,
and then you go to the application tab,
and here you can see all the cookies that are being set
on your site, which are relevant,
which shouldn't be set without prior consent.
This needs to be audited.
A lot of these tools do this automatically via a scan,
and it's actually part of their service as well.
So, it might be worth going with a paid service
in order to know which cookies you actually need to include
in your consent banner as well.
And also in order to spin this to the end,
you also would need to have a privacy policy
where all the functions are stated as well.
And we are going through a technical implementation here.
So I won't go into the legal sites of how to set this up,
but be sure to have all of your basis covered.
We are going to go through a very simple example here.
I have Google Tag Manager installed.
And we have Facebook Ads,
Google Analytics 4 running,
and Google Ads conversion linker and the remarketing code.
So what if you wanted to put this all
under the watch of a cookie consent banner?
So again, what we would need to install
are the codes right here, and then also a style sheet.
And we need to include a config file.
And this config file as well
has all the different configurations
where you would also be putting in what tools you are using
and how they are classified.
So, for example, in this example here,
we have an inline tracker analytics tool,
we have external tracker, Intercom and so on.
You would need to list them out in this config file as well.
The cool thing about Klaro, we can actually grab this file
and put it all into Google Tag Manager
and deploy the whole consent solution
through Google Tag Manager.
Now I have a little bit of a code prepared here already.
So I'm gonna copy this and put it into Google Tag Manager.
We'll just go with a new tag here and tag configuration.
And again, there are other solutions out there.
Klaro doesn't have a template just yet,
but there are templates for some of the consent solutions.
Here, we are just gonna go for our case
with the custom HTML tag, and we're gonna paste in my code.
So again, this is the config file that you saw earlier.
And then underneath, we have our libraries
that need to load and the style sheet as well.
So this is our consent solution, Klaro,
and we want to fire this on all pages,
but we are going to use the new triggers
of consent initialization which is the first event
that fires on a page.
So we can see this here.
Consent initialization is the first event
and that's when we want to fire our banner as well.
So let's put us in place and click Save,
and then review this.
So on our page, we now get our cookie consent banner.
This is all configured through the code
that you have just seen.
So if you wanna change anything around
we just have a very easy consent on additional services
for marketing and analytics.
If you click on let me choose,
you also get these consent settings
where we have marketing texts that are being deployed,
Google Ads and Facebook Ads.
And then for analytics, we have Google Analytics here.
This is obviously all volatile text
and you would need to adjust this depending on your case.
All right?
So that already works.
If I now click on accept all here, for example,
we get our little animation and our cookies are accepted.
What does this actually do?
In most cases, this consent choice has been saved somewhere
in the user's browser.
Where is the somewhere? Well, in cookies.
So if you go over to your developer tools,
again here on the more tools, we go to developer tools.
You can go to application right here.
In this tab, you can find on the left side your cookies
and your domain where the cookies should have been set.
In our case, we have here a collateral cookie
and that cookie is URL encoded.
So it normally would look like this
but we can that box and we can actually read it here.
So Google Ads is now true.
Facebook Ads is now true.
Google Analytics is now true.
Now, for some consent solutions
they actually do it differently
and write the whole thing into the local storage
so you would need to check your local storage
if you find any value
in here that would show what the user has consented to.
And if we actually delete this cookie and reload the page,
we get our consent here as well.
It's a little bit harder to read with tag assistant here.
What if I decline? Click here on Decline.
And let's look for Klaro again.
Here we have our Klaro cookie.
And now it says Google Ads false,
Facebook Ads false, and Google Analytics false.
It's important that you understand this mechanisms
of how your cookie consent banner works
so you'd be able to read from that place
and fire your tags later automatically based on the consent
that was given or declined by the user.
So how do we now connect this to Google Tag Manager?
Well, we would need to pull in this information
into Google Tag Manager.
We can do this easily by using a variable.
And that variable is of the type, first party cookie.
What is the cookie name?
Well, here is the name of the cookie,
it's just called Klaro.
And here we are going to put in a name for this.
So this is our Klaro cookie, and let's save this,
and now try this out.
Go into preview.
The page loaded.
Our cookie is still written.
There's no new consent banner that is shown
and upon initialization under the variables,
we now see our Klaro cookie here.
It pulled in this information.
Now this is URL encoded information.
So a little bit harder to read.
what we can do actually in the variable itself as well
is to decode this by checking this box.
And if I preview this again,
we should now have a little bit cleaner version of this.
Okay, so now we pull this in.
And we can use this cookie to already build,
for example triggers of that,
or know if the user has consented to Google Ads
or to Facebook Ads only,
and utilize this later on in the process of building out
an implementation, whereas our tags fire
on the right consent given.
In our video series here
we are going to utilize the new consent overview mode
which gives you a second part of triggers right here
that you can utilize.
And we'll talk about this in the next video.
(air whooshing)
All right, so there you have it.
This is how you can deploy your cookie consent banner
with the help of Google Tag Manager on your website.
Now in the next video, we are actually going to take a look
at how we can now take the consent
that the user has given us
and transfer it over Google Tag Manager
so we can base our tags and our triggers on this consent.
We will utilize a new feature within Google Tag Manager
which is called consent overview.
And how to connect this all will be in the next video
which you may already see over here
if it's already available,
or if you wanna see the full series
with some extra downloads as well,
head over to measureschool.com/consent.
We have everything there.
Now, my name is Julian.
See you in the next one.