[MUSIC PLAYING]
MATT LANDERS: Hello, and welcome to the Google Analytics
tutorial series.
I'm Matt Landers.
And in this tutorial, we're going
to implement consent mode.
So what is consent mode?
Consent mode allows you to ask your users for permission
to store information about their visit to your website
or to your app.
When you implement consent mode, Google tags,
like the one that we put on our site early on in the series,
will automatically adjust their behavior based on the choice
that the user made.
But how does our website know that a user has already
consented?
Well, there's a few options that.
We can manually create something on our site
to prompt the user to give us their permission,
or there are a consent management platforms
that you can integrate into your site.
They can do all those for you.
For this demo that we're going to do,
we're going to build everything manually
so you can see exactly how these processes work
and what the outcome looks like on your site.
OK, before we get too much further, it's important for you
to understand that many countries and regions have
passed laws that require you to get consent from the user
before you store information about the behavior
that they make on your website.
Now, these laws can vary by jurisdiction.
And they change over time.
So you need to keep up with the regulations
and understand what the requirements are
for you and your business in order
to comply with the laws that have been put in place.
Now that we have a high level understanding of what
consent mode is and why we would use it, let's dive
into our demo website and look at a consent banner
that I already implemented and see how it works
and how you can implement it on your site.
All right, let's go.
All right, we're on our demo website.
And you'll notice something new.
We have our consent mode banner at the bottom.
It says cookie settings.
And we have three different settings
that the user can choose.
They can accept all the cookies.
They can accept a selection or reject all.
Now by default, I have it denying everything,
even necessary cookies, functionality, security,
everything.
So we can now get around the site.
And then we can go over to our analytics.
And we'll notice we're in our real time report here,
but nothing is coming through.
And nothing will come through because we've
denied analytics, the ability to store any information.
Now what does happen that you don't see here
is that anonymous pings are sent to analytics, which can
be used in behavioral modeling.
And that allows you to fill in the gaps of the people who
accepted your cookies versus those who didn't.
So you can get a better representation
of what's actually happening on your website
without compromising the user's privacy or security.
OK, so let's go ahead and accept all the cookies.
And then we'll navigate around a little bit.
And we'll go back over to analytics.
And we should see that our hits start to come through here.
And there they are.
So we see that we've been to the Home and About page.
We've had our search and stat.
We have our users.
Everything is working now because we
have accepted the cookies.
And we are good to go.
All right, let's jump back over to our site.
And then let's dig into exactly how this is implemented
and how you can get it on your site.
All right, we're in Visual Studio Code.
And we're on our layout component,
which is a component that's run on every single page
of our site.
And that's important because we want
to make sure that no matter what page the user lands on, maybe
they got here from search, we want to set their default
content right away.
So you'll notice that this script here at the top
is run before our Google Tag Manager script.
That way, we go ahead and preload our default consent.
So that when the Type Manager script loads,
it already has that set.
And here is how we set our default consent.
We call gtag, and we set our different storage types
to the value that we want.
Right now you'll notice all of these are set to denied.
And I'll go through what each of these are.
So we have our ad storage.
This is related to Google Ads and what information
is allowed to store about the ad click
or whatever might have happened.
We also have analytics storage.
So this will store things like the visit duration, the pages
they viewed, et cetera.
And those are the two that are used by analytics and ads.
And then the rest of these could be used by other tags as well
or yourself for your site.
Like, personalization storage.
So that could be recommendations that you provide the user based
on previous interactions.
Functionality storage could be the language
that the user speaks.
You don't want them to have to select that every time they
visit the site.
And then security storage is anything about authorization
or authentication.
All right, so those are the different types.
And you'll see that we call consent, default. If they've
already selected that, we're storing their selections
in local storage.
And if they've already selected that,
we have it in local storage already.
We just reload whatever their previous selections
were from local storage.
All right.
Now if we go over to our consent banner here--
this is our banner.
You can see the HTML for it.
If we scroll down to the bottom here,
we have where we set the consent based on the selection
that the user made.
And we can call gtag consent update.
That allows us to change the selection
from the default of being denied to whatever
the user has actually selected.
And we'll start to get analytics responding
based on that selection.
So before we couldn't see anything in our reports.
But when they selected Accept, we
were able to see them in our reports.
All right.
Now that we know how to set the consent,
let's go over to Google Tag Manager
and see how this shows up in the user interface.
OK, now we're in Google Tag Manager.
And I want to show you a new feature
that we can use to manage the consent for all
of our different tags.
So I'm going to go to Admin.
Go to container settings and then enable consent overview.
And what that's going to do is when we go back to our tags,
we'll see this little shield here.
And this will help us identify which tags have been configured
for consent versus those that haven't.
So if I click on it, we'll see that none of our tags
have been configured yet.
But since they're Google tags, they already
are aware of consent mode.
And they're already working.
But this allows us to configure additional settings for consent
if we want.
So we can select them all.
Hit the little shield.
And we'll see it's not set right now, our settings.
But we can say no additional consent required.
Because they already require ad or analytics.
And we can change that as well to require additional consent.
So we can say this also requires functionality storage
if we want.
And you can do this for different tags, not just
your Google tags.
We're going to say no additional consent required.
And we'll save that.
And we'll close our window there.
And now if we want to check to make sure
that our banner is actually working on our website
and that we're receiving the user's input,
we can go ahead and click Preview.
And we'll start to use Tag Assistant
to see what's happening.
We'll navigate a little here.
Go back over to our Tag Assistant tag.
And we can click over here on Consent Initialization
and then go to the consent tab.
And we'll see all of our settings that were set.
So since we said accept all, you'll
see all of these say granted.
But if we were to reject them, they
would all be denied or whatever selection the user made.
So this is the way we can validate that our banner is
actually working.
OK, great.
I think that now you've got a good overview of what
consent mode is and how to implement it.
If you want to look at this code and see
how you might implement it on your site,
remember it's available on GitHub.
You can pull it down.
You can run it.
You can play around with it and see how you might
use that for your own use.
That link is in the description of this video.
And if you have any questions, you
can join our Discord server, which
is also in the description of this video.
And hopefully, you're able to get this up
and running on your site.
If you don't want to do it manually,
you can go to our Help Center and see
how you can use a consent management
platform, which there's lots of third parties
that provide these.
But they can make it a little easier to get this up
and running on your site and manage that for you.
All right.
I hope that you get what you need out of this video,
and you're able to implement consent mode on your own sites.
And I hope that you join me in future tutorials
to learn more about Google Analytics.
Until then happy measuring.
[MUSIC PLAYING]