[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]
