- All right, welcome
back to our third part in our series on setting up
your cookie consent banner and connecting it to Google Tag Manager so you can trigger your tags based on the consent of the user. Now, in the last videos we have set-up our cookie consent banner, we have connected it to Google Tag Manager but with the consent overview screen. And now, we want to
actually trigger our tags based on the consent of the user. This is really the last step
that you should be doing in order then to test
and see if your tags fire or don't fire based on
the consent of the user. Again, this is part three of four videos that we are gonna publish here. If you wanna check out
the full-length video, you can head over to
measureschool.com/consent where we have the full video, as well as some download the and resources to deepen your knowledge
in this kind of area. But for now, let's check out
how we can trigger our tags based on the consent overview and the consent that has been given by the user with Google Tag Manager. All right, welcome back in this video, we're gonna take a look at
how we can trigger our tags based on the consent that you
give inside of the banner. So far, we have created
the banner on the page or put that into Google Tag Manager so it's actually visible. We have connected it to the Consent Mode of Google Tag Manager. So we actually know if ad
storage has been granted or analytics storage has been granted. Now, the next step
would be to connect them to the actual tags so that fire correctly. And in this part, we can
easily use Google Tag Manager. So for example, we have here
the Facebook page view tag that we want to fire only if
ads storage has been granted. If we have actual consent, does
normally fires on all pages and we are not messing with the trigger, but what we can be messing
with is the consent state, which is a new setting in every tag under Advanced Settings here, you find Consent Settings right here. And right now, additional
consent checks are not set and we can say that we want
to require additional consent. And this additional consent should listen to this ad storage right here, which we have set inside
of our Google Tag Manager. So ad storage is currently
false right here. So this is kind of like
an additional trigger. It will look for ad storage
and will also fire on all pages if both of them have been
fulfilled and a true. Let's save this and try this out. I'll go to the page. Our Consent Mode opens up. Now currently, there's no cookie here. So on initialization, the update call should
actually be denied right here. And once the container loads, this is where normally our tag would fire and the other tags that don't
have consent yet are firing but Facebook ads is not firing, why? Because it says yet not
fired due to missing consent. So it has something to
do with the consent. Unfortunately, it's not really surfaced inside of the interface just now so we don't really know where
the consent didn't work out, but the all pages
triggered, it fired, yes, but due to consent issues, this didn't fire because we don't have yet any consent. What if you give the consent,
let's click on that's okay. And I'm going to reload the page, and this time on Container Loaded, we have our Facebook ads
firing just normally, doesn't really give us
any consent indication, but it fired because we
are on all pages trigger and we also have in the variables now our consent state at storage, true. So again, this is a kind of
like a second part of triggers that you can attach to the
tag specific to consent. Now, what do you do with the other tags? Do you go through and go into the tag and then change that around? Yes, you can. But Google Tag Manager has
this consent overview screen that we can utilize. And we see now that the consent has been configured for Facebook ads, but not yet for our other tags. So let's go ahead for Google Analytics. We want to add a consent here. It will require consent
for analytics storage. And then we also have Google Ads here, and we can add both of them another ad storage there
as well, save this. And we have now consent
configured for all our tags. So they should only fire when we given appropriate consent. Let's try this out, go
to preview here as well. Well, this time I'm actually already set that anything could fire. So our tags all fire
because we have consent. Let's go ahead and delete our cookie, just to see whether if
we make a choice to say, hey, I only want to
fire the marketing tags, but not the analytics tags. Let's accept this. And I'm going to reload the page. And then on Container Loaded, we see Google Ads fired,
Facebook ads fired, but Google Analytics didn't fire because we didn't have consent
to fire our analytics tools. Now to test, get rid of this and do it the
other way around this time. I'm only gonna give analytics access and let's see that inside, first, I need to reload. Container Loaded. And we see only Google Analytics four fire the other didn't fire. So this works as expected. Our tags are now firing
based on the consent that we have given with our cookie banner. The thing that is missing right now is what happens when there
is no consent given yet and the user clicks, for
example, on that's okay. So at this point, when
I click on that's okay, our Container Loaded already happened. So our Google Ads tags don't fire. Our consent is now updated. So on DOM Ready. We see, okay. No, not actually on DOM Ready. It's actually even
later than Window Loaded because we have clicked the event, but nothing actually
shows up in a day-to-day. So we don't have a chance
to fire our tags again and we would need to wait for the user to go to the
next page of his journey in order for then to our
tags, to fire correctly. So we need to have a mechanism
to actually fire them on the first page, very crucial
for marketing attribution. So we wanna make sure after the consent has
given right then and there you want to fire your tags as well and check the consent as well in order to see if I can fire tag or not, for that, we need to have a
little bit of a work around. There are tools out
there that push directly into the data layer when you click, okay there are tools when
you click I give consent that they will push something
into the data layer. That's not the case
with our consent banner, but luckily we can utilize a technique from Google Tag Manager,
again, to pick up a if the user made his choice and that's a simple button click tracking. So if the user clicks on one of these buttons right
here, decline, that's okay, or even the buttons down here, we'll be able to use this as a signal that the user has made his choice and updated his consent. And then we want to check if we should fire our tags again. So in order to build this in, we'll go with a simple
button click tracking. You might notice from
the other videos here, we're gonna go to triggers and we're gonna create a new
click trigger on all elements. And this will be a generic one for now. Save this and preview. Then I'm going to click on the button that I'm actually going to track. It should have a new event here in the data layer called Click. And then we can look into the variables. You need to have them enabled beforehand, Click Element, Click ID, and so on. Unfortunately, there is
no useful information in the Click ID or the URL, and also in the Click Text. So we will need to go with the Click Element or Click Classes. We can take the Click Classes. And here we have something that
is unique to these buttons. We don't wanna go with the
more specific one success because a user could also
decline, for example. So we are going go with cm-btn, right here and we're going to turn our click trigger into a specific one. Once the user does his consent choice, we want to fire our tag when the click classes contains cm-btn. All right, once the user
has made its choice, what do we want to actually do now? Now you first thought might be, oh we want to actually fire
our Consent Mode update again. I'm just gonna call this update based on what the user has chosen. This would be correct, but the problem that you
are sometimes dealing with is race conditions. Rise conditions are something that happen when you actually think,
okay, I clicked on this tag. Now my consent should
have already been updated. So when I clicked on, yes, that's okay, we see actually that our
consent is still denied because our cookie was not yet updated. So we need to leave a little bit of time between when the user
clicks and when he updates. Unfortunately, the best way I've found is to actually create a new tag
that waits a few milliseconds, and then actually updates the data layer so we can fire our other tags. So we need to take a little
bit of a step in between here and I'm gonna go and create
a new custom HTML tag. And in this custom HTML tag, I'll put in some code here that does our data layer pushes for us. And there are actually two
pushes that I want to do with the consent choice. So that's when the user clicks the button and then a few milliseconds later, and these are the milliseconds that will wait to push
this into the data layer. We will say consent updated because we'll we use this
trigger to fire our Consent Mode and then this trigger to fire
our actual tags later on. So let's go ahead and
call this custom HTML, and this is our data layer
push for our consent. And we'll trigger this on the actual consent choice
mode when we click the button. So let's preview review this
and see if this actually works or I actually need to get
rid of the cookie first. So let's see consent banner again. And here we go. We have our consent banner back and right now, nothing fires
or when I click on that's okay, we should see that on the
click, our custom HML fired. And then a few seconds later, or milliseconds later
we have consent choice and consent updated the new
calls that we can now utilize for our tag firing. So let's go ahead and actually
build triggers for those. So this will be custom event triggers. So in our, case consent choice. And another one for our consent updated. So consent choice and consent updated. And now we have these triggers available and can fire our tags accordingly. So the first tag that we want to fire is when the user has made his choice, we need to update the Consent Mode and we'll attach another trigger here that should fire on consent choice. And then once the consent choice is given, we want to also make sure
the tags that should fire on the first page also need to all have the same trigger, which is our consent
updated trigger, right here. Let's add them and go into preview. All right, so let me get rid
of the cookie here again. So we see the banner. Okay, now we see the banner here and if I click on that's okay, we should now see on consent updated our different tags fire as well. So Google Ads, Google
Analytics 4 and so on. So they didn't fire at the beginning here on all pages trigger,
the Container Loaded, but later on, once we clicked on that's
okay, then our tags fires. So this is now the expected behavior. This will not happen again when
we go to the next page view because here the consent is actually given and on Container Loaded, we already see our our tags fire as well. So we have now these two
cases of this is firing if the consent has been given
on another page previously or if the user is on
the actual landing page, he sees the banner for the first time. He clicks on a button,
updates his consent choices and our tags fire. Now you would obviously need to do this with any new tag that you create. So if you create, for example, let's say a new tag for
LinkedIn or Twitter. You have here the LinkedIn inside stack. And I'm just gonna put in
some dummy data, Linked In. The question would be, how
do I now set up this trigger? Well, first of all, I want
to fire this on all pages, but I also would like to
fire this on consent updated. So the first page view. Then I also want to choose
my Advanced Settings and choose the Consent Settings here and say this is only going
to fire when the ad storage has actually been accepted as well. So that way we have now Linked
In, built in as a new tag. Obviously you would need to
change your Consent Settings, your banner as well to reflect this change that you have installed
in new Linked In tag. But that should also only now fire when ad storage has been granted. And in order to try
this out one more time, let's actually use a mix here between just the marketing although there's now three
services and we accept selected. And now on the accept selected, we have now Google Ads,
but also Linked In firing. And on the next page view, we should have this again,
read from the cookie. So the consent is already
given and on Container Loaded, we have our Linked In as well. So this is how you can
now trigger your tags based a consent overview,
the Consent Mode. But this is actually not the Consent Mode that you might have heard of when it comes to Google
Analytics or to Google Ads tags. In order to install the real
Consent Mode for your G tags, we need to utilize a
slightly different method, which I'm going to
explain in the next video. All right, so there you have it. This is how you can trigger your tags based on the consent that has been given by the user connected
to Google Tag Manager with the consent overview. Now you could be already stopping there, but there's an exciting new
feature within Google Tags only Google Tags for
now called Consent Mode. And in order to make that work, we would need to tweak our
implementation a little bit. This is what we're gonna
do in the a fourth part, which you can check out right over here if it's already available, or go over to measureschool.com/consent, where we have the full-length training, as well as some download and resources ready for you to view. Now, my name is Julian, till next time.
