Tutorial: Designing a Different Consent Preferences Manager Box

[amarkic]

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:

1. 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'); }
   }

2. 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; }());

3.  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..
4. 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...

[pascalreder]

Hey @amarkic,

The boxes look really amazing. 

We ran into one issue though. When testing the boxes, the click function (event listener) didn't work, meaning clicks on the two buttons in the prompt box didn't bring us to remove the box (in case of "accept") and we were not brought to the preference box (in case of click on "decline").

I didn't change the id of the boxes, hence no mistake should happen here. I haven't implemented the JQuery part yet, but this shouldn't cause the issue. 

This is my HTML code:

<div id="sdgdpr_modal_wrapper">
	<div id="sdgdpr_modal">
		<div id="sdgdpr_modal2">
			<div id="sdgdpr_modal_inner">
				<div id="sdgdpr_modal-headline">{{title}}</div>
				<div class="sdgdpradv_imgwrapper1"><img src=https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/GORE-TEX%C2%AE_Logo.jpg/220px-GORE-TEX%C2%AE_Logo.jpg height="75" width="75" class="logo"></div>
				<div id="sdgdpr_modal-body">{{message}}</div>
				<ul id="sdgdpr_modal_buttons">
					<li id="sdgdpr_modal_buttons-agree">{{confirmation_button}}</li>
					<li id="sdgdpr_modal_buttons-complex">{{advanced_settings}}</li>
				</ul>
				<div class="privacy_prompt_link">
				    <a class="sdprivacy_action" href="https://www.gore-tex.com/content/privacy-policy" target="_blank">Hier zur Privacy Policy</a>
		    	</div>
			</div>
		</div>
	</div>
</div>

And this is the JS code:

(function constent_prompt(){
//actionable html elements as vars
	var btn_agree = document.getElementById("sdgdpr_modal_buttons-agree");
	var btn_advncd = document.getElementById("sdgdpr_modal_buttons-complex");
	var wrapper = document.getElementById("sdgdpr_modal_wrapper");

//function for agreeing
	var eventAgree = function(){
		utag.gdpr.setConsentValue(1); //set value to 1
    utag.gdpr.setCookieValue('decl','true'); //write in the cookie that user has said yes (check out the tutorial for further explanation)
		closePrompt(); //run "hide modalbox function"
		location.reload(); //reload page
	};
	
  //function for going advanced
	var eventAdvanced = function(){
		utag.gdpr.setConsentValue(0); //pass the values as 0 to advanced box (check out the tutorial for further explanation)
		utag.gdpr.showConsentPreferences(); //trigger the advanced box
		closePrompt(); //hide this box
	};
	
  //function for closing (hiding) the modal box
	var closePrompt = function(){
		wrapper.style.display = "none";
	};
	
  //add event listener to events 
	btn_agree.addEventListener("click", eventAgree, false);
	btn_advncd.addEventListener("click", eventAdvanced, false);
}());

Best,

Pascal

[amarkic]

Hi @pascalreder,

sorry for not answering earlier, I'm on my holidays and didn't manage to catch wifi for long enough (outside EU's roaming territory). Do you have a live site where this consent box is implemented, even in DEV mode?

Br,

Ante

[pascalreder]

Hey Ante,
Code is now in the hands of DEV-Team.

I can share their result, in case you are interested :)

[JeroenC]

Hi @amarkic

Firstly I would like to thank you for this article as we used this to setup our consent boxes a few years back.

However, we are in some cases experiencing problems due to the reload. (e.g. a pop-up is loaded on a landing page, after accepting the consent the page is reloaded and the pop-up doesn't display again).

Is there an alternative to location.reload that could be used?

Kind regards
Jeroen