Love them or hate them, consent banners are everywhere! Some are opt-in while others are using the opt-out model. Much of the time, it is not clear what you are toggling on and off unless you spend 30 minutes reading all of the legalese. Some of you might be into that. No judgement here.
I have had the pleasure of implementing one such banner. OneTrust is one of the most prominent consent management tools allowing your team to build, manage, and analyze your consent options. It is highly customizable with different templates, various modes, support for GDPR, and much more.
We implemented an opt-out model where users can ‘Allow All’ or choose which types of tracking they prefer to allow.
El Problema
Without getting too “legal” on you, because I’m absolutely not qualified to do so, I will explain how YouTube works. First off, YouTube is owned by Google. You can draw your own conclusions from that. Secondly, if you are loading a YouTube embedded video on a page, you have sent data to Google via YouTube. That’s right, you don’t even need to press play on the video for that to happen!
OneTrust, as an option, can automatically block this from happening and/or users can deselect a category of cookies which disables it. When you do this though, this is what your video might look like:
Not only is this a terrible user experience, users most likely do not understand why the videos are not loading.
How about we tell users what is going on with a nice message saying, “Dear valued website visitor! Please turn on tracking scripts to watch this video.”
OneTrust Configuration
First, you need to figure out which categories you have and make note of their codes. In my case, the YouTube cookie has been configured to be a targeting cookie, which has a code of C0004.
Note: Codes may differ for your implementation.
Using the OneTrust JavaScript API, we can check which options a user has disabled right in the developer console. Parts of it are better documented than others. Using OptanonActiveGroups, we can see which groups are currently active.
OptanonActiveGroups
You can paste this right into the Chrome developer tools console.
Armed with this knowledge, we can now write a script which checks for when OneTrust blocks our YouTube videos.
La Solución
When you write this script, make sure you put the code in a location where it will always run, especially if you have autoblocking on. Wherever you place it, you may need to mark it as Strictly Necessary for OneTrust.
Let’s just jump right into the script:
function AddOTYTNotification(iframe) {
let newEl = document.createElement('div');
newEl.innerHTML = '<a href="javascript:OneTrust.ToggleInfoDisplay()">Enable dem Targeting cookies</a> so we can track ya and you can watch our slick @#(%* video';
iframe.parentNode.replaceChild(newEl, iframe);
}
if(!OptanonActiveGroups.includes('C0004')) {
let iframes = document.getElementsByTagName("iframe");
for (var i = 0; i < iframes.length; i++) {
let src = iframes[i].getAttribute('data-src');
if(src && src.includes("www.youtube.com")) {
AddOTYTNotification(iframes[i]);
}
}
}
If the targeting cookie category is disabled by OneTrust, the script grabs all the iFrames, checks if they have a data-src attribute containing www.youtube.com, and then replaces the iFrame with our custom message. Additionally, the JavaScript in the href will open up the OneTrust cookie options allowing the user to change their settings.
I have simplified the code for this example. Please make sure your CMS editors can manage the content of this message, make it way prettier than this, and come up with a more grammatically correct message than I’ve provided here.
Thanks for reading. If you have a more creative way of doing this, let me know!