- 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.
