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