I don't know for you guys but I had a busy week redesigning GDPR consent box for my clients and navigating trough rules and bugs in the sistem, so I've decided to take some time and share with you my expirience in designing a different consent modal box(es).
First of all, in this article I'll be using two terms:
simple modal box == conset prompt manager
advanced modal box == consent preferrences dialog
Goal
My goals were:
to create a box where users can either accept all cookies or go advanced and cherry pick what tag categories they want to use with an explanation that there are some tags for which they're opted in by default and that they can't change that
to follow users with that box until they decide, even if their decision is optout
allow users to choose between analytics & display advertising tags, hide the rest
Both boxes should be responsive
In this case, don't add "X" button for closing the modal box. Users can ignore the modalbox or choose to opt out manually.
This is how it looks in practice
This is the modal box that pops out at the bottom of the screen, takes lower part of the screen and users have to react to it.
...and this is advanced box where users can see the options, choose nothing and simply move on:
Setup
Keep in mind that I've used Tealiums default code as a template and have built upon that code to develop my template. Also, I've added comments only to the js and on HTML where needed.
Basic consent box:
In my specific case, I don't plan to show this box to people who have already declaired their level of consent, this is for the first timers only...
Here's the link to the html/css/js - https://jsfiddle.net/bxoLuv4n/
You'll have to declare the following fields: "Privacy Policy Label", "Advanced Button"
Advanced consent box:
In my specific case, I want users to have all options opted out by default or, in case they haven't triggered this box for the first time, to have their current options displayed accordingly.
Here's the link to the html/css/js - https://jsfiddle.net/hkhwj6o4/1/
You'll have to declare the following fields:
"Privacy Policy Label"
If you're using the essential cookies option: "Essential Cookies Title","Essential Cookies Description"
The problems / solutions
Problem A: When users trigger the advanced modalbox, all the options are opted in by default
Keep in mind that this happens only sometimes and sometimes all options can change from optout to optin in scenario where user opens advanced box, leaves website and comes back
- solution: in this demo I don't plan to allow users who have opted in to see the basic modal box ever again. That's why I've added the code below before triggering the advanced modal box.
utag.gdpr.setConsentValue(0);
Problem B. If user comes to the website, opens advanced modalbox and leaves, he/she will be automatically optedin/out when they eventually come back and consent modals won't be triggered
What causes the problem is rule that advanced modal box automatically adds consent value when opened and accordingly default functions will think users have selected their preferences before although they haven't confirmed them. I've tried to force modalbox to open by reading cookie's consent value, but if user opts out, modalbox will continue to be open. This results in bad user experience and possible breach of GDPR regulations.
This is why I've added the following code on both basic and advanced modal box, in the eventAgree & callback functions.
utag.gdpr.setCookieValue('dec','true');
...this code allows me to add extra cookie variable which tells me if user has clicked on button which confirm his preferrences. This also allows me to trigger the simple modalbox in situations where they haven't done so. The technique to do so is the following:
Open "jQuery onHandler" extension. Trigger it on "show", type in some element that repeats on your every site (mine is ".wrapper:first" / for some reason "body" doesn't work) and add the following custom tracking event.
var dev = utag.data.dev;
var currentGdprConsentStatus = utag.data.gdpr_cookie_status;
if(dev===true) { console.log('EXT: Run modalbox'); }
if(currentGdprConsentStatus!=='true') {
if(dev===true) { console.log('- user hasn\'t declaired it\'s consent'); }
utag.gdpr.showExplicitConsent();
} else {
if(dev===true) { console.log('User has declared it\'s consent'); }
}
In this case, I've used "set data values" to add following js code to my variables:
dev - returns true if I'm in dev mode, allows me to console.log stuff
(function sdIsUserDev(){ if(utag.data.tealium_environment==='dev') { return true; } else { return false; } }());
gdpr_cookie_status
(function sdGdprReadCookieStatus(){ var cookieValues = utag.gdpr.getCookieValues(); return cookieValues.decl; }());
You can trigger utag.gdpr.showExplicitConsent(); (which is actually a simple consent modal box) in the console, in the jQuery extension but not in the JavaScript extension. My guess is that JS extension doesn't allow document.write(); methods..
You can have only one line of code if you add condition to fire the extension (iin this case "utag.data.gdpr_cookie_status" equals "true"), but I like to console.log stuff that's happending in the back. Also, you can use different variables such as number of event in visit to reduce the rate of modalbox firing or to hide modalbox if user is viewing privacy policy statement.
utag.gdpr.showExplicitConsent();
Problem C: I want to have some options locked and hide unnecessary tag categories
Solution: For locking options, I've added a new row in html, custom fields for text & translations and static image of the locked toggle button. In the back, those tags are omited.
For hiding tag categories, I've used style="display:none" code which gives me an option to add new tag categories in the future. Users who have opted in for all tags will be automatically opted in (their optin status is 1) and users who have opted out or have opted in only partially will be opted out of these categories.
* One more thing. For some reason, if you add all this code to your consent management customization forms, it might not work right away. Specifically, Tealium will fetch content from JS text areas as strings. My suggestion is to change html & css first, then publish as dev and test. Then change js. It's a wierd bug...
... View more
Expand/CollapseMenu
