This post explains how to get the CookiePro/OneTrust cookie consent tool to only enable scripts/tags to load AFTER a user accepts a cookie banner – all using Google Tag Manager.

The Problem

When you configure a cookie banner/preference tool, you need to choose the default setting and behaviour for each cookie category. Let’s say you have a category of “Anonymous Analytics” that contains the Google Analytics script/tag, and you only want this to load once a user has consented to it. With this kind of affirmative consent, you’ve got two choices, assume consent from them clicking “Accept” on your cookie banner, or require a more explicit consent where you require them to open the preference centre and change the setting from inactive to active. The first approach is very common, effectively enabling cookies and tags that you have “accepted” but not explicitly turned on.

However, most cookie banner products (e.g. CookiePro as of Feb 2019), don’t handle this scenario in a compliant way. Their setting of “Active” turns on a script the very second the page is loaded, i.e. at the same time as the cookie banner. So you’re immediately outside of compliance by enabling a script before getting consent to do so.

The Need

So we somehow want a category setting of “Inactive until the user clicks accept on the cookie banner, and then go active”. That way you can load a page and the only scripts that load and cookies that get set are ones that a user has consented to or are necessary/exempt from consent.

To do this we’ll need a way of detecting when the consent banner has been accepted, and then tell the script to load.

The Solution – Summary

Google’s Tag Manager is the answer here. Here’s a summary of how it works:

1. Use Google Tag Manager (GTM) to load scripts on your website, e.g. the cookie banner script, Google Analytics
2. Set your chosen script category, e.g. Anonymous Analytics, to “Active”.
3. Add a new script to run alongside the cookie banner script.
4. This new script checks for the existence of the cookie banner cookie that gets set when a cookie banner is accepted (e.g. “OptanonAlertBoxClosed”).
5. If the cookie exists, we know that a user has accepted the banner, and so they have moved past the consent request stage.
6. If the cookie exists the script creates a message (DataLayer variable) stating that the banner has been accepted.
7. GTM receives the message and stores this data in its own variable, e.g. “OptanonAlertBoxClosed”.
8. Scripts in GTM are set to only trigger if both a user has consented to the relevant cookie group AND the banner acceptance variable is set to true.
9. When a user visits the website, GTM will not load the Google Analytics script because the cookie banner hasn’t been accepted, even though the cookie category is set to Active. As soon as the user accepts the banner (and leaves the category as Active), GTM will see the presence of the cookie banner acceptance cookie AND the consent status of Active and load the Google Analytics script.

The Solution – Detailed

This solution is based on the CookiePro product but the principle will work with any cookie product that sets a cookie when the banner has been accepted (they all do). Note that closing a banner and accepting a banner are often treated the same with the same cookie being set. The idea is that you can specify that a closing action should be interpreted as consent. I’m not a fan of this, and would recommend your banner doesn’t have a close button and that the banner is required to be interacted with before the site can be used.

Google Tag Manager (GTM)

Firstly, you’ll need to be using GTM on your website. I recommend using it for all scripts where possible, e.g. your cookie banner script, Google Analytics, etc…

Cookie Banner Tag

For CookiePro I would recommend adding a “Custom HTML Tag” within GTM to drop your cookie control functions onto your web pages. This is a lot easier than adding the cookie banner code directly onto the web pages. Instead, just add the GTM script into the header of your web pages and let GTM insert/manage all other scripts. Here is an example of code I have used within GTM to create a Custom HTML Tag for the cookie banner:

<!-- place your Cookie script below this line -->
<script src="https://cookiepro.blob.core.windows.net/consent/43675436245635463256372.js" type="text/javascript" charset="UTF-8"></script>
<script>
    if( document.cookie.indexOf("OptanonAlertBoxClosed=") >=0){
	window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 'event': 'OnetrustGroupsUpdated',
 'OptanonAlertBoxClosed': 'true'
 });
	}
	else
	{
	window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 'event': 'OnetrustGroupsUpdated',
 'OptanonAlertBoxClosed': 'false'
 });
	}
</script>
<script type="text/javascript">
function OptanonWrapper() {
}
</script>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$(document).on("click", ".optanon-allow-all", function() {
     location.reload();
});
$(document).on("click", ".optanon-white-button-middle", function() {
     location.reload();
});
});
</script>

You’ll see there’s four scripts there.

1. This first script drops the cookie banner script onto the web page.
2. This second script checks for the “OptanonAlertBoxClosed” cookie. If it exists a DataLayer variable of “OptanonAlertBoxClosed” is created with a value of “true”. If it doesn’t exist the variable is created with a value of false. If your cookie banner product creates a different cookie name then adjust this script accordingly to check for the correct name.
3. The third script is the CookiePro wrapper section where you can insert helper functions in between the { } brackets. We don’t need the help of the wrapper in this procedure but you will want to use it for other stuff another time.
4. The fourth script performs a page reload whenever a user sets/changes their consent choices. This means that any changes are instantly reflected after a page reload, which is the time that GTM loads and delivers the relevant scripts onto the page. I highly recommend using this script.

Set the cookie banner script to load on all pages, and it should look something like this:

GTM Variables

We need to get data from the browser out to GTM, so to do this we need to create some variables within GTM.

Add new “User-Defined Variables” as so:

OnetrustActiveGroups Variable

Create a variable named OnetrustActiveGroups, with a Variable Configuration of type = Data Layer Variable, Data Layer Variable Name = OnetrustActiveGroups, Data Layer Version = Version 2.

OptanonAlertBoxClosed Variable

Create a variable named OptanonAlertBoxClosed with a Variable Configuration of type = Data Layer Variable, Data Layer Variable Name = OptanonAlertBoxClosed, Data Layer Version = Version 2.

GTM Trigger

You now create a Trigger in GTM that checks for when the cookie category is Active and when the cookie banner has been accepted. This procedure requires you know the ID of the category in question from the CookiePro interface (Cookie List > Consent Settings > ID). In this example, our Anonymous Analytics category has an ID of 5, so we have to check for that.

In GTM, add a Trigger (name it however you want), e.g. “Anonymous Analytics – Active after banner”, using a Custom Event, with an event name of OneTrustGroupsUpdated. It must be exactly this to match what is in your browser’s Data Layer. Check the “Use regex matching” box. Select “Some Custom Events”

Then add two events:

• OnetrustActiveGroups [matches RegEx] ,5, (Note that we’re matching for the string of comma5comma)
• OptanonAlertBoxClosed [equals] true

Google Analytics

Add a Google Analytics Tag to GTM, and set the trigger to be your previously created Trigger.

Is that it?

Yes, that’s it. It should all now work, with Google Analytics only loading after the banner has been accepted and the consent status is set to Active.

Debugging and Testing

To see what is actually going on behind the scenes with this data layer, you can use the GTM Preview mode which adds a Chrome Developer Tools-like function into your browser. Just go into GTM and click the Preview button in the top right. Then open your website and hit ctrl-F5 and you should see a new window at the bottom.

Within this Preview mode you can see what consent ID numbers are being sent back to GTM in the Data Layer to signify what has been consented to, and whether the OptanonAlertBoxClosed is true or false. Note how the OnetrustActiveGroups are ID numbers separated by commas, which is why our trigger searches for commaIDcommas, e.g. “,5,”.

Preview mode is a great tool and definitely the place to look if things aren’t working.

Anthony Young