Cookiebot Tutorial: Set Up Consent Mode v2 with GTM

Key Takeaways

Hey there, I'm Benjamin from Loves Data. In this video, I'm going to show you how to set up a cookie consent banner on your website using Cookiebot. We will also cover the steps to configure your tags in Google Tag Manager to work with consent mode V2, so your Google Analytics and Google Ads tags collect data based on people's consent choices. Before we get started, I want to give a shout-out to Cookiebot by Usercentrics for sponsoring this video. Cookiebot makes it easy to add a consent banner to your website, and it automatically handles Google consent mode V2 for you. I've included a link to Cookiebot in the description below this video. We're going to use Google Tag Manager to add Cookiebot to our website. This approach works regardless of the platform you're using for your website, whether it's WordPress, Shopify, Squarespace, or anything else. As long as you have Google Tag Manager installed, you can follow along. Okay, let's get started. Let's head to Cookiebot. If you're getting started, you'll need to create an account. To do this, you can click start free and follow the steps to create your account. Or if you already have a Cookiebot account, you can log in to get the details needed to add Cookiebot to your website. I already have an account, so I'm going to click log in at the top. Now I'm going to enter my email address. Click continue. Enter my password. And click continue. Since we're setting up Cookiebot for the first time, let's navigate to domains and aliases. Now let's click add domain. And let's enter the URL of our website. And click add domain. We can see our domain has been added. Now let's navigate to configuration. This lets you customize the cookie banner on your website. We're currently on the design tab. And on the left, we can see under layout that the default is dialogue. This means the banner will load on top of your website. You can change this to bar, so that our website is still visible even if someone hasn't made a consent selection. Next, you can select design to adjust the appearance of the cookie banner. We can choose from the light, dark, or custom theme. And we can also adjust the button styles and logo. And selecting compliance lets you control how consent is managed and when the banner appears. For example, if we only want our cookie banner to appear for people located in Europe, we could select all visitors under distribution and change this to EU and EEA only. I'm going to leave this set to all visitors. And now let's select the content tab. This is where you can adjust the information included in your cookie banner. I'm going to leave the defaults, and let's select the privacy tab. This is where you can control the information people can see about the cookies being used on your website. By default, the show privacy button will be enabled. This means an icon will be shown on your website, so people can adjust their privacy settings. Again, I'm going to leave the defaults, and let's click save changes. Now I'm going to navigate back by clicking the Cookiebot logo on the top left corner. To add Cookiebot to our website using Google Tag Manager, we need to copy our domain group ID. To find this, let's navigate to implementation. And under installation guides, we can see our domain group ID. Let's copy this. Before we head to Google Tag Manager, I want to mention the server-side tagging solution by Usercentrics. Server-side tagging moves your tags from people's browsers to a server. It's worth checking out if you're looking to improve the performance of your website and have more control of your data. And if you need a privacy policy for your website, Usercentrics also offers a privacy policy generator. You can use it to create a privacy policy for your website by answering a series of questions about your business. If you'd like to learn more, I've included links in the description below this video. Okay, now let's head to Google Tag Manager. I've already set up a web container in Google Tag Manager along with a few tags. If you're just getting started with Google Tag Manager, I recommend watching my tutorial series to help you get up and running. I've included a link to this in the description below. Okay, the first thing we need to do is enable the consent overview. This gives us an easy way to see the consent status of all our tags. To do this, let's navigate to admin. And let's select container settings. Now let's make sure enable consent overview is checked at the bottom. And let's click save. Now let's navigate back to the workspace. And let's navigate to tags. Let's click new to create a new tag. And let's name the tag Cookiebot. Now let's select tag configuration. And let's click discover more tag types in the community template gallery. Now let's search for Cookiebot. And select the Cookiebot tag template. We need to click add to workspace at the top. And click add again. Next, we need to paste the domain group ID that we copied from our account under Cookiebot ID. We can see there are some additional settings. Let's ensure that enable Google consent mode is enabled. And traveling down, let's enable the option that says enable URL pass-through. It's worth highlighting that by default, the consent state will be set to denied for all of the consent mode parameters. This means that before someone makes a choice on the consent banner, no consent will be granted. However, you can set different defaults for different geographic locations under default consent state. I'm going to leave the defaults, which will mean consent is required from anybody visiting our website. Now let's select triggering. And let's choose the consent initialization all pages trigger. This will ensure that Cookiebot is loaded before any other tags on our website. This is important because the consent banner needs to appear and set the consent state before our other tags fire. Now let's save the tag. The Cookiebot tag will now automatically handle consent mode V2 for us. This means it will send people's consent choices to Google based on the selections they make on the consent banner. Next, we need to create a custom trigger for any tags that don't have built-in consent settings. To do this, let's navigate to triggers. And let's click new to create a new trigger. Let's name the trigger Cookiebot consent update. And let's select trigger configuration. Now let's choose custom event as the trigger type. And let's enter cookie_consent_update as the event name. This needs to be all lowercase. Now let's click save. This trigger fires when someone makes a consent choice on our banner. We can use it for any tags that don't have built-in consent. Now it's time to configure the consent settings for all of the tags in our container. Let's navigate back to tags. I want to highlight that some tags have built-in consent settings, and some don't. Tags from Google's platforms, like the Google tag for Google Analytics and Google Ads have built-in consent. This means they automatically adjust their behavior based on people's consent choices. For example, before someone provides consent, these tags will send basic information without storing any cookies. Once consent is granted, they'll create cookies in the browser and send all of the available information. Tags that don't have built-in consent like the LinkedIn Insight Tag, Meta Pixel, and other third-party tags will need to be configured so they only fire once consent has been granted. Okay, since we enabled the consent overview, we can now see the consent overview icon on the top right corner. Let's click the icon. This shows us a list of all the tags in our container. We need to configure the consent settings for all of the tags listed under consent not configured at the top. Let's start by selecting the Cookiebot tag. Since this tag is used to manage consent, we need it to fire every time someone visits our website. So, let's scroll down. And let's look for consent settings under advanced settings. And let's select no additional consent required under additional consent checks. And let's save the tag. We can see the Cookiebot tag is now listed under consent configured. Now we need to configure the consent settings for all the tags still listed under consent not configured. My tip is to look at the built-in consent column. Tags that show values in this column like the conversion linker, Google Ads remarketing, and Google Tag already have built-in consent settings. We just need to acknowledge this so Google Tag Manager knows they've been configured. Instead of editing each of these tags individually, let's select the check boxes next to the Google tags that have built-in consent. Now let's click the edit consent settings icon on the top right corner. It looks like a shield icon. And let's select no additional consent required. And click save. And click save again. These tags are now listed under consent configured. Now let's handle the tag that doesn't have built-in consent settings. Let's open the LinkedIn Insight tag. Under advanced settings, let's look for consent settings. Since there are no built-in consent settings, let's select require additional consent for tag to fire. And let's click add required consent. Now we need to select the consent types that should be required. Let's select ad storage. And click add required consent. Then select ad personalization. And click add required consent again. And select add user data. Next, we need to update the trigger for this tag so it only fires after consent is granted. Let's select triggering. We need to remove the existing trigger. And add the Cookiebot consent update trigger we just created. Now let's save the tag. If you have other tags without built-in consent like a Meta Pixel or other third-party tags, you'll need to follow the same steps for each of them. So, you'll need to add the required consent settings and change the trigger to Cookiebot consent update. Once you've configured all of your tags, everything should be listed under consent configured in the consent overview. Let's close the consent overview. We've now added Cookiebot to Google Tag Manager and configured our tags to work with consent mode. So, the next step is to test that everything is working correctly. To do this, let's click preview in Google Tag Manager. We need to enter the URL of our website. And click connect. Our website loads and we can see our consent banner. Before we make a selection on the banner, let's open the tag assistant tab. We can see the Cookiebot tag has fired along with the Google tags and the Google Ads tags. This is expected because the Google tags have built-in consent and are running in advanced consent mode, which means they send basic information before consent is granted. We can also see that the LinkedIn Insight tag hasn't fired yet because it doesn't have built-in consent. This is exactly what we want. Now let's click on the Google Analytics measurement ID at the top. And select the page view event. We can see the cookie consent state parameter has a value of G100. This tells us consent hasn't been granted yet. The tag has collected some basic details without storing any cookies in the browser. Let's close this. And now let's head back to the website. And let's click allow all on the consent banner. Let's navigate to another page. And let's open the tag assistant tab again. Let's select the new page view event. We can now see the cookie consent state parameter has a value of G111. This means cookies are now being stored and all of the available information is being sent to Google Analytics. Let's close this. And let's select the Google Tag Manager container ID. We can now see the LinkedIn Insight tag has also fired because we granted consent. Everything is working as expected, so let's head back to Google Tag Manager. And let's click submit to publish our changes to the live website. Let's name the version. And click publish. Our changes are now live. Cookiebot is managing consent on our website and our tags in Google Tag Manager are respecting people's consent choices. So, that's how you can set up Cookiebot and implement Google Consent Mode V2 on your website using Google Tag Manager. Remember, whenever you add new tags to Google Tag Manager, make sure to check the consent overview and configure the consent settings for those tags. And if you'd like to learn more about Cookiebot, consent mode, and Google Tag Manager, please check out the extra resources in the description below this video. If you haven't already, please take a moment to subscribe to this channel for all of my latest tutorials. Thanks for watching and I'll see you in the next video.