Setup GDPR Cookie Consent Notification with Google Tag Manager

On May 25th, 2018, General Data Protection Regulation (GDPR) came in effect, meaning that online businesses that get visitors from the European Union, must track visitor/user behavior and collect data more carefully, responsibly, and with consent.

I will not go into detail what GDPR is (there are other great blog posts out there like this one, this one or this one). Long story short, a standard This website uses cookies blah blah blah cookie consent becomes irrelevant. From now on, if you are using some tools/scripts on your website that are used to identify individuals and their data is processed by you or 3rd parties), that can be done only when a person gives consent. This also affects tracking codes that are managed in Google Tag Manager.

So before you get the actual consent, all the tracking should be put on hold. In this guide, I’ll show you what solution did I choose and how I implemented GDPR cookie consent notification on analyticsmania.com + you’ll get a Google Tag Manager Recipe.

This Google Tag Manager GDPR setup will give you more control when it comes to activating marketing/analytics tracking codes.

Table of Contents

• First things first, GDPR is NO cookie legislation
• Action plan
• What will the consent banner look like?
• Onetrust Cookie Consent Notification: Pros and Cons
• Create an account
• Scan the website
• Cookie Banner Setup
  • Customizing style
  • Customizing behavior
  • Let’s categorize cookies
• Publishing changes + script integration
• GTM Recipe
  • Tags
  • Triggers
  • Variables
• Import The GTM Recipe
• Update Your Current Tags with New Triggers
• To sum up
• But wait, there’s more
• Useful Resources
• Final words

 

First things first, GDPR is NO cookie legislation

Before we continue with the GDPR cookie consent notification, I’d like to point out a common misconception. The General Data Protection Regulation only involves personal data. It does not talk about cookies in any way. If a cookie contains personal data, then GDPR applies to it (because of data), in all other cases, a “cookie law” should be applied.

In fact, the European Commission is currently working on a new ePrivacy Legislation (expected probably(?) in 2020, even though it was supposed to arrive at 2018) which will be built upon the ePrivacy directive and the GDPR. This legislation is expected to bring more clarity on how companies should handle tracking and advertising online.

Also, keep in mind that I am not a lawyer. So you should not use this guide as legal advice.

 

GDPR Cookie Consent Notification: Action plan

OK, now let’s go back to our main topic, cookie notification. I’ve checked several solutions and the one that I’ve chosen is offered by OneTrust. My website is using an older version of it (implemented in 2018). The newest version (explained in this guide) will work a bit differently. I’ll explain that in a moment.

Here’s the flow:

• A new visitor lands on a page and sees the cookie notification banner at the bottom of the screen.
• Banner offers to accept cookies or decline them by going into cookie settings. Until this moment no tracking tags are fired yet. In other words, a visitor still has the opportunity to act before cookies are stored in his/her browser.
• If a visitor clicks Accept Cookies button, this is a consent.
• The consent banner will block the visitor from using the website content until tracking is accepted or rejected.

 

What will the consent banner look like?

A visitor lands on your website and this popup will appear (design might look different based on your settings). It cannot be closed or hidden unless a visitor accepts or rejects tracking.

If a visitor gives consent, all tags will continue working as usual. If a user clicks No, let me choose, a preference center will open where all the tracking categories (e.g. targeting group, functional group, etc.) will be opt-out by default. A visitor will have to choose which ones he/she wants to give consent to.

Here’s an example:

 

Onetrust Cookie Consent Notification: Pros and Cons

I have to admit, I struggled a lot when I was trying to implement OneTrust’s consent for the first time. For the second one, I already had a Google Tag Manager recipe which made things much faster and easier.

If you’re not sure whether this tool is right for you, here are the advantages and disadvantages:

Pros:

• Free for one website (not limited by pageviews/number of pages, etc.)
• The design is pretty good and clear
• A Preference Center and the ability to opt-out/in to separate categories of tracking cookies
• Pushes consent data and events to the Data Layer
• Scans the website for cookies, automatically assigns them to different cookie categories in the preference center.
• Offers various opt-in/opt-out settings, is pretty customizable.

Cons:

• On workdays, the cookie scan takes a pretty long time (if not carefully configured, even several hours). But I’ll show you a workaround.
• Several bugs
• Requires a lot of configuration on the Google Tag Manager side (but this step is required by pretty much all cookie consent tools, as far as I know).
• Setup flow was annoying sometimes, especially for new users who don’t know all ins and outs, yet.

I have to admit, it took me way too much time during the first implementation (a day or two) because I had problems almost in every step (and the support was pretty meh with their help).

But when I did succeed, all the other attempts took me about 1-2 hours. Once I knew all the possible obstacles, I avoided them immediately, therefore saved a lot of time.

In this guide, I’ll also give you tips on how to avoid possible blunders in order to implement the GDRP cookie consent notification asap.

 

Create an account

This is a very important part. It’s not that simple to create a free OneTrust account. You will need to fill in this form, submit and wait for up to 48 hours because someone will manually create an account for you and then send an email with the confirmation link.

So if there is a slight chance that you will want to try OneTrust, immediately go to this page and submit the form. Go, do it now. I’ll wait.

I had different experiences waiting for the email with a link. Once it took maybe 2-4 hours of waiting, while the other time it was 48 hours. So you should be patient.

After you get an email with a link, finish registration and come back to this blog post and we’ll continue. In my case, the email looked like this (but in the future, its design might look different):

OneTrust has published a long but informative and useful guide, you can find it here. Cookie-consent-related stuff starts on page 148.

If you don’t receive an email with the account details after 48 hours, try to contact their support or submit the form again with a different email address.

 

Scan the website

After you get an email with a signup link and finish the registration, you should be redirected to this page.

Click Cookie Consent > Go to Product. On the next page, click Add Website (in the top right corner).

Then click Add Website (in the top right corner of the screen) and enter website’s information. Free OneTrust plan allows you to have one domain.

Important! DO NOT ENTER a subdomain (e.g. www.analyticsmania.com). ALWAYS enter just the main domain, e.g. analyticsmania.com. By entering just the main domain you enable this GDPR cookie notification consent to work on all subdomains. 

If I entered just www.analyticsmania.com, then consent cookie settings will be saved only on www.analyticsmania.com. If I also had support.analyticsmania.com, that subdomain wouldn’t be able to access cookie settings stored on www.

It is crucial to enter only the main domain on the first step because you won’t be able to edit it later and OneTrust’s support will also be useless here. The only way to change it is to delete all the content and settings in OneTrust and start from scratch (which is annoying and time-consuming).

Another tip. If your scan’s status changes to Error, this means that your website’s protection is too strict against bots (or there is a redirect).

In my case, I’m using Cloudflare and it did not let OneTrust’s scanning bots through. A solution? Temporary disable Cloudflare’s firewall or make its settings a bit lighter. Consult a developer/sysadmin, who has set Cloudflare in the first place.

Once the scan is initiated, you can start working on your GDPR consent mechanism.

One more thing: this GDPR cookie consent solution will not work if you want to implement it across multiple domains (e.g. example1.com and domain15.com).

 

Cookie Banner Setup

Customizing style

We can start with branding. In the list of your websites, click the domain you have added.

 

Then in the top bar, click Branding. On the left side of the screen, you will have to override template styling.

Once you click the switch, you will see a bunch of options that you can implement (2). Also, don’t forget to switch to the Preference Center and see how your branding/styling looks there.

You will be able to change its layout, colors, content, and behavior. I won’t go into details of all options, just want to mention several:

• Layout and colors for GDPR don’t matter. Choose whatever is beautiful for you.
• Don’t forget to include the link to your Cookie Policy.

Tip: Don’t forget to save your changes (by clicking the Save button in the top right corner (next to the Publish button).

If you want your consent banner to use a different layout (e.g. a popup instead of a notification bar), go to Templates > GDPR Template > Layout and choose what you like the most. I’d personally go with the Center Rounded (a.k.a. popup), because it is the most visible for visitors.

 

Customizing behavior

Now, let’s move to the section where we’ll configure how the consent banner and preference center will actually work.

On the left sidebar, choose Geolocation Rules and then choose Default Consent Policy.

If you want to edit the default consent policy, you can click the pencil icon in its top-right corner.

One thing to mention – Consent Model. In the case of GDPR, you must choose the Opt-in. This means that you cannot start tracking people before the consent was given.

Let’s go back to templates. Go there and click the GDPR template.

Then, expand the Content section and click Button Set. Of course, don’t forget to check the options there but I want to put a spotlight on the Button Set now. Click on the pencil icon.

Here are the settings that I would implement (but, once again, I am not a lawyer and this is not a piece of legal advice).

Here are the settings that I would implement:

• Rename the button to Accept All Cookies
• Keep Show Cookie Settings button option enabled and rename it to No, let me choose
• When using the button in a web page to access the Cookie’s Preference Center option would be changed to Show other text and I would enter Cookie Preferences
• Then I would set Cookie Settings Button Style to Button.
• Also, it’s important that you disable the Show Close Button. The solution explained in this blog post was tested only with this option disabled.

Here is what would happen: when a visitor lands on a page, he/she sees a notification (I’d display a popup). Then the visitor has two options:

• Accept all cookies
• Specify what he/she wants to accept. If a visitor clicks the button No, let me choose, all the cookie groups (e.g. marketing cookies) selections will be disabled by default and a visitor will have to choose which groups does he want to give consent to. If none of them, he/she would need to click Save my choices.

P.S. To be fully GDPR compliant, you would also need to enable Show Reject All Button setting.

Also, if you are using popup as your consent notification, I’d recommend going to Behavior and enable Require banner interaction (in order to make sure that the visitor would definitely interact with the notification).

 

Let’s categorize cookies

By this time, your cookie scan should be over. Let’s see what we should do with those cookies.

I’m writing this guide for the 2nd time. The first time was in 2018, and I hated my experience — a lot of usability bugs in OneTrust. At the very end of 2019, I decided to revisit this topic (because Onetrust implemented many breaking changes that did not allow new users to use my Google Tag Manager recipe (the old ones work fine, though).

The good news is that a lot of those 2018 bugs were resolved (they even have contacted me and thanked by identifying those bugs). However, there is no happy ending. By fixing X bugs, they introduced a bunch of new bugs.

I had to spend many hours trying to identify why this or that was just not working. My tip here is to strictly follow my steps in this guide, otherwise, you’ll waste too much time.

In general, I like OneTrust’s cookie consent mechanism and design. But the configuration might be pure hell. As long as you stick with my instructions, you should be good.

Anyway, back to the topic. Cookie categorization. Cookie consent notification should be able to allow visitors to pick purpose groups to which they give consent. For example, some visitors might want to give you consent for analytics tracking but not to targeting/remarketing.

By default, only one consent group is enabled – Strictly necessary cookies. They are necessary for the website to work and do not require consent. Now, what I’ve noticed while working with OneTrust, is that after the scan, they automatically categorize cookies they’ve found. And that’s good, right? 

Yes, if it actually worked.

This is the reality. Even though cookies are identified and categorized, it looks like this process does not work properly.

Here’s what happened to me. I had a bunch of already categorized cookies. But after I tried to see the category list in my actual preference center, there was only one category. But I had 3 categories!

After playing around, I’ve finally found out that (for some reason) I still have to add at least one cookie to each cookie category (manually!) in order to start seeing it in the cookie consent banner.

WTF…

Anyway, let’s do that. By default, Onetrust offers these groups/categories of cookies:

• Targeting
• Functional
• Strictly necessary (default. cannot be removed)
• Performance (a.k.a. analytics)
• Social media
• Unknown

Think which ones apply to you and which ones would you like to see in your cookie preference center.

I’d go with “targeting”, “Functional” and “performance”. Or maybe just “targeting” and “performance”. Analytics and A/B test cookies would be added to the “Performance” bucket. After you decide which categories to use, create one cookie for each category.

On the left sidebar, go to Cookiepedia > Categorizations and click Add Cookie.

And enter the following information (say, we’re creating a cookie for the Targeting category)

• Cookie name – add any random name, e.g. “targeting” without quotation marks
• Host – add your website’s domain
• Category – Targeting cookies
• Lifespan – Persistent
• Party – First party

Then create a cookie for Performance category:

• Cookie name – add any random name, e.g. “performance” without quotation marks
• Host – add your website’s domain
• Category – Performance cookies
• Lifespan – Persistent
• Party – First party

You get the idea. Repeat the same action for each cookie category you want to use.

 

Publishing changes + script integration

After you’ve done all the changes above, it’s time to see how the consent banner looks on your website. In order to do that, you need to add the script to your website. To do that, go to Websites > Choose your website and in the upper right corner press Publish.

A window will slide from the right with a two-step process:

• Testing CDN (you should use this code for your testing website)
• Production CDN (you should use this code for your live website)

IMPORTANT: don’t copy the script and paste to Google Tag Manager right away. It will not work. You should use my GTM recipe, that you can download from here and enter the settings there.

I’ll explain how to use it in a minute.

IMPORTANT #2: once you make some changes in OneTrust and want to preview them on your website, publish those changes in the OneTrust interface. If you want to test X change in the testing environment, the just press Publish Test Scripts.

GDPR Cookie Consent Notification: GTM Recipe

Configuring OneTrust’s cookie consent solution is just half of the task. Your tracking scripts (like Google Analytics, Google Adwords, etc.) will still continue working as they always did unless you import my Google Tag Manager recipe and then reconfigure all of your tracking tags. Yup, there’s a lot of manual work waiting ahead.

Important: After you follow my instructions and configure everything properly, OneTrust’s Cookie Consent will affect only those tracking codes which are implemented via Google Tag Manager. So if you have Google Analytics hardcoded directly in the website’s code, it’s right about time to migrate to GA + Google Tag Manager.

I will not go into detail how everything is set up in the recipe and why did I choose one solution over another but here’s a brief recap of what useful settings will you get. Important: If you are using an older version of Onetrust (from early 2019, 2018, or even older, use this recipe instead)

After you import the container, it will automatically create a dedicated Folder called GDPR Cookie Consent Notification containing 11 assets. Here they are:

 

Tags

• cHTML – Cookie Consent. This is the tag where you should paste your OneTrust consent script. Without it, GDPR cookie consent notification will not work.

 

Triggers

• Custom – OneTrustLoaded (this one activates every time a consent banner script is loaded or consent preferences are updated)
• 4 blocking triggers:
  • Blocking – functional cookies not allowed
  • Blocking – performance cookies not allowed (analytics tags should be used with this trigger)
  • Blocking – social media cookies not allowed
  • Blocking – targeting cookies not allowed (a.k.a. – marketing cookies)

 

Variables

• dlv – OnetrustActiveGroups – this is a Data Layer variable that returns all the cookie/consent groups to which a visitor has agreed,
• Regex – functional cookies allowed. Returns true if a visitor has agreed to functional cookies (e.g. personalization). Otherwise, returns false.
• Regex – performance cookies allowed. Returns true if a visitor has agreed to performance/analytics cookies. Otherwise, returns false.
• Regex – social media cookies allowed.
• Regex – targeting cookies allowed. Returns true if a visitor has agreed to targeting/marketing cookies. Otherwise, returns false.

Personally, for me, Social Media cookies were not needed but I added them anyway. If you don’t need assets related to them, feel free to delete them.

 

Import The GTM Recipe

After you download the GDPR cookie consent notification Google Tag Manager recipe, follow this guide on how to import it. Just make sure you choose to Merge as an Import Option, NOT Overwrite. However, within the Merge option, choose to Overwrite conflicting tag, trigger and variables.

 

Update Your Current Tags with New Triggers

There are several things you need to do (in this exact order!):

#1. Go to cHTML – Cookie Consent tag and replace some parts of its code with stuff that can be found in OneTrust’s script (Cookie Consent > Integration > Scripts). In Onetrust interface, click the name of your website.

And then the Publish button in the top-right corner. Click Next and you will see a Production CDN script. You will need two things from it:

• link of the script
• value of the data-domain-script

Add them in the Cookie Consent Custom HTML tag you have in the container.

Save the tag in Google Tag Manager, publish changes in your OneTrust account.

If you first want to play around just for testing purposes, then use the Testing CDN script instead (it was displayed to you when you initially clicked the Publish button in the top-right corner). However, in the end, your final setup should be using the Production CDN script.

#2. Update all your tracking tags (which deal with personal data) in Google Tag Manager by adding one of 4 blocking triggers to them as an exception. This needs to be done with every single tracking tag (that deals with personal information), including Google Analytics Pageview, Google Ads Conversion Tag, etc. ).

If a tag is related to analytics (e.g. Google Analytics Event tag) then assign Blocking – performance cookies not allowed trigger as an exception. In the case of Google Ads tag, use Blocking – targeting cookies not allowed trigger. You get the idea, right?

Here’s how an updated tag triggering could look like of a Universal Analytics tag:

#3. Additionally, update all those tags which fire upon Pageview, DOM ready, or Window Loaded Events. The important part of this new cookie consent is to hold tracking tags until a visitor gives consent to be tracked. Therefore, GA, FB pixel, and other pageview-based tags must be “on hold” as well. Consequently, standard All Pages, DOM Ready, and Window Loaded trigger becomes irrelevant here.

Firstly, you need to remove all Pageview, DOM Ready, and Window Loaded triggers from your current tags as they do not respect visitor’s consent. Instead, you need to add the Custom – OneTrustLoaded. This means that your pageview-based tags will usually fire between the DOM Ready and Window Loaded.

If you had a certain tag that fired on Pageview (but on a specific page), you will need to create a new Custom – OneTrustLoaded trigger with an additional condition, for example:

The expected result: Universal Analytics pageview, Facebook Pixel main code, and others that fire upon page load must not fire until a visitor gives the consent.

Once the consent is given, on every subsequent page, the OneTrust consent banner will continue pushing the “OneTrustLoaded” Data Layer event with consent groups (e.g. performance, targeting, etc.).

 

To sum up

1. Go to cHTML – Cookie Consent tag and replace its content with the script that OneTrust provides you at Cookie Consent > Script Integration.
2. Every tag (regardless of whether they are event-based or pageview-based) should get a blocking trigger of a particular consent group. If a tag is for analytics, assign a Blocking – performance cookies not allowed trigger, etc.
   
3. Remove Pageview, DOM Ready, and Window Loaded triggers from your current tags. Instead, choose a trigger that directly relates to the consent. You must not fire tracking tags before the consent is given. So choose Custom – OneTrustLoaded trigger. Do that to all tags that used to fire when the page loads.
   
4. If you have some tags that fire when the page loads (but not on the homepage), create a copy of the Custom – OneTrustLoaded and add an additional condition in order to specify on which page do you wish your tag to fire, for example:
   

 

But wait, there’s more

Even though you’ve just installed and configured GDPR cookie consent notification with Google Tag Manager, there are other things to do if you’re a user of Google Analytics. I will not go into detail and will only give a brief list.

• Anonymize IP. In Google Analytics tags or GA Settings variable go to More Settings > Fields to set  and enter the following settings:
  
• Disable Display Advertising features or configure it to respect consent settings with allowAdFeatures. In GA Settings Variable, go to More Settings > Fields to set and enter the following settings:
  
  Also, have the display advertising features enabled in the tag. Under More settings > Fields to set enable the following setting:
  

 

Useful Resources

In addition to all of this, here’s a list of other useful resources related to cookie consent and GDPR in general:

• The Definitive GDPR guide for ecommerce by my colleagues at Omnisend
• Configure Google Analytics to be GDPR compliant by Humix
• Did not like OneTrust as a cookie consent solution? Not a problem! Here are other GDPR cookie consent notification solutions:
  • Civic
  • CookieBot

 

GDPR Cookie Consent Notification in Google Tag Manager: Final Words

In a nutshell: According to GDPR, firing all tracking codes right after a visitor landed on your page is not permitted anymore (since May 25th, 2018). You should first ask for permission to track and only then fire your tags.

In this blog post, I’ve explained how to implement a GDRP cookie notification consent with Google Tag Manager and how to update your current marketing tags accordingly.

This cookie consent notification is just a tool for getting consent, it’s not capable of managing your tracking tags because every website and every Google Tag Manager container is unique, therefore there is no universal solution. As a result, you will have to manually update all your tracking tags with additional firing rules.

OneTrust GDPR cookie consent notification solution was a tool of my choice in this guide, I’ve explained how to configure it.

It has its pros and cons but with some experience, you can do pretty flexible implementations. Obviously, new users will have no previous knowledge, that’s why my guide should be useful to them as I share my blunders and ways to avoid them. Plus, my GDPR Cookie Consent Google Tag Manager Recipe should save you lots of time.