Cookie Management Banner

[adrian]

Hi all,

Introducing a new GDPR Cookie Management Banner module.

https://github.com/adrianbj/CookieManagementBanner

https://modules.processwire.com/modules/cookie-management-banner/

This module was sponsored by VentureWeb in Squamish, BC, Canada.

I converted a Drupal module written by Oliver Walker from VentureWeb into what you see here.

The Drupal module requires jQuery so at the moment, this module also requires jQuery. I will probably remove this sometime soon.

This module certainly has similarities to MarkupCookieConsent but provides the user with the following features:

The user can accept all cookies or they can choose to not accept tracking/marketing cookies.

Module config options allow you to:

• define all text and button labels (multi-language support)
• manually increment the cookie policy version which forces the user to review their consent again
• select whether users can manage their cookies, or just accept all
• option to limit display of banner to users only in European Union (by IP address)
• position selection (top or bottom overlay, or content pushed down from the top)

It comes with basic default styling which is easily overwritten by site CSS

The module sets various values to the dataLayer array which works together with Google Tag Manager - please read through the code in /assets/js/CookieManagementBanner.js to get a better idea of how this works and what is made available for GTM.

You can wrap your tracking/marketing cookie code in a check for the localstorage key of: pwcmbAllowCookies

if(localStorage.getItem('pwcmbAllowCookies') == 'y')

 

You can also provide a link on your site (probably in the footer) like this that will allow the user to show the banner even after they have saved their preferences / accepted.

<a href="#cookies" class="js-pwcmb-notice-toggle">Manage Your Cookies</a>

 

Would love to hear feedback from anyone who gives this a go.

[adrian]

PS - Looks like California is getting in on this too:
https://slate.com/technology/2018/06/california-just-passed-the-strictest-online-privacy-bill-in-the-country.html

[netcarver]

@adrian Great - thank you!

[flydev]

I just installed it to try it, then I checked "EU users only", after saving, I got a warning (not tracked down) and the cookie-bar do not appear.

1×	PHP Notice: Undefined offset: 2 in /www/sites/prodels/wwwroot/wire/core/WireHttp.php:894

[adrian]

3 minutes ago, flydev said:

I just installed it to try it, then I checked "EU users only", after saving, I got a warning (not tracked down) and the cookie-bar do not appear.

1×	PHP Notice: Undefined offset: 2 in /www/sites/prodels/wwwroot/wire/core/WireHttp.php:894

I had Ryan fix this core "bug" a couple of days ago: https://github.com/processwire/processwire/commit/e5e13c190447ce156d3075683ee8a9ca42931904

Can you update the core and let me know if you still have any problems.

[flydev]

Upgraded to PW 3.0.106 and the notice is gone. Anyway, my IP isn't recognized as EU user. I tested also with a VPN installed on a city - 10km far from me - the cookie bar do not appear (I still not tried to debug it!)

 

It is working for you for the EU users ?

 

Edit: When I go to https://extreme-ip-lookup.com/json/ everything look good.

Quote

continent	"Europe"
country	"France"
countryCode	"FR"

[adrian]

1 minute ago, flydev said:

It is working for you for the EU users ?

I tested with this IP address: 85.214.132.117 and it worked as expected.

I think what might be happening is session caching of your location / EU status. Can you please click the "Clear Session & Cookies" link in the Tracy PW Info panel and see if that fixes things.

If not, could you please try uncommenting line 39 and commenting line 40 and see if it shows then? That will test using that 85.214.132.117 IP address.

Thanks!

 

[flydev]

11 minutes ago, adrian said:

"Clear Session & Cookies" link in the Tracy PW Info panel

Not working.

 

11 minutes ago, adrian said:

you please try uncommenting line 39 and commenting line 40 and see if it shows then?

Nothing ?

 

Ok, its working now. I needed to clear again the session/cookie after saving the module.

 

[adrian]

Weird - I assume the banner works when you don't have the EU Only option checked? If not, then that's one path we need to go down.

If it did work and you clicked I Consent, or the close icon, then have you cleared the browser LocalStorage items that are keeping your acceptance stored?

 

[flydev]

Yes yes, everything is working fine @adrian check my edited post.

[adrian]

Great!

I am curious why your IP address isn't recognized as part of the EU. As you would have noticed, I am using: https://restcountries.eu to determine this. Do you think it's a mistake in their DB that is worth reporting?

FYI - using that service means that I could actually extend that option so you could choose which regions or countries see the banner and which don't - not sure if there is demand for that or not though.

[tires]

I installed this very helpful module in order to get an opt-in banner for google analytics.

Could you give me a hint which steps i have to do, to get this running?

Thanks a lot!

 

[tires]

Ok, i find out a way myself.

I set up a new js file, include this in the foot of my website and added this function:

function loadGAonConsent(){
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-000000-0', 'auto');
  ga('set', 'anonymizeIp', true);
  ga('send', 'pageview');
  var gascript = document.createElement("script");
  gascript.async = true;
  gascript.src = "https://www.google-analytics.com/analytics.js";
  document.getElementsByTagName("head")[0].appendChild(gascript, document.getElementsByTagName("head")[0]);
}

and also this three lines to check if the cookie has been set:

if(localStorage.getItem('pwcmbAllowCookies')){
    loadGAonConsent();
}

To exclude browsers that got the no-track option on you can use this:

if(localStorage.getItem('pwcmbAllowCookies') == 'y' && navigator.doNotTrack != 1 && navigator.doNotTrack != "yes" && window.doNotTrack != 1 && navigator.msDoNotTrack != 1){
    loadGAonConsent();
}

Would be great if there were a "only show cookie banner if do not track is off" checkbox in the module ... or something simular.

[tires]

It seems that if i hit the "x" icon to close the banner (.pwcmb-widget__close::before) cookies are set to "y". Probably beacause of the class "js-pwcmb-allow-cookies" ...
Is that by purpose?

I fixed it by deleting the class "js-pwcmb-allow-cookies" in the module file notice.tpl.php on line 18.

And by adding this code in the module file CookieManagementBanner.js on line 150:

 $('.pwcmb-widget__close').on('click', function() {
                        cookieMonster.ui.showMessage();
                         cookieMonster.block();
                    });

[adrian]

Hi @tires - thanks for your thoughts. I am interested in the idea of supporting the doNotTrack option that way - I have raised the discussion with some others.

The x icon behavior is intended. While I don't really agree with it, it seems to be standard practice at the moment, which is why we went that route. 

Personally I hope these silly banners go away soon and it is completely dealt with from a browser setting. Not sure how a user knows if a web site is respecting the setting or not, but I guess in reality you don't really know what is happening even with the banners.

Anyone else have any thoughts on all this?

[tires]

7 minutes ago, adrian said:

The x icon behavior is intended. While I don't really agree with it, it seems to be standard practice at the moment, which is why we went that route.  

Yes, is it standard when it is an opt-out.
But with opt-in this behavior should be different i think (i.e. do nothing or disable cookies).

 

[iank]

@adrian Thanks for this module - it's working great; 

Just one question - Is there a way to prevent it displaying inside an iFrame-embedded formbuilder form?  

It displays the banner in both the containing page and in the formbuilder iFrame.  

Thanks,

Ian.

[adrian]

7 hours ago, iank said:

Just one question - Is there a way to prevent it displaying inside an iFrame-embedded formbuilder form?  

Good catch Ian - please grab the latest version which fixes this.

[tpr]

On 6/29/2018 at 2:28 AM, adrian said:

he Drupal module requires jQuery so at the moment, this module also requires jQuery. I will probably remove this sometime soon.

Any progress on this? I would happily help with this, looking at the code it doesn't seem to be a hard task, perhaps only $('body').animate() part + testing.

[iank]

15 hours ago, adrian said:

Good catch Ian - please grab the latest version which fixes this.

@adrian: Perfect, thanks!

[cstevensjr]

Just used your module for the first time.  It works great and I like that I was able to change (edit) the terms and the ability of users to save/review their settings.

[wbmnfktr]

First of all: this module plays really nice with my current ProcessWire instances - and will replace my previous CookieConsent setup.

 

But there is one thing that came up while playing with the module.

1. The option to disable auto-injection of the module's CSS and JS files.
   Is this kind of feature planned or already somewhere hidden in the code?

 

 

 

 

[adrian]

6 hours ago, tpr said:

Any progress on this? I would happily help with this, looking at the code it doesn't seem to be a hard task, perhaps only $('body').animate() part + testing.

Honestly I haven't looked into it at all. As I mentioned in my first post, this module is converted from a Drupal one and so that JS file is almost unchanged from the Drupal version. Just taking a quick look now and I agree that it all looks like a pretty straight-forward conversion and given that I hardly ever use jQuery on my sites, I would welcome the change. That said, I don't have an immediate need for it at the moment so it won't be high on my list - do you feel like putting together a PR ? ? 

41 minutes ago, wbmnfktr said:

The option to disable auto-injection of the module's CSS and JS files.
Is this kind of feature planned or already somewhere hidden in the code?

I am happy to implement this if it helps. I am curious though what scenario this is useful for - why do you prefer to manually inject them?

[tpr]

Neither I have an immediate need for rewrite in pure JS but I'm sure I'll try this on a new PW project (nothing in sight btw). I can have a look at it on next week if all goes well.

[iank]

31 minutes ago, adrian said:

1 hour ago, wbmnfktr said:

The option to disable auto-injection of the module's CSS and JS files.
Is this kind of feature planned or already somewhere hidden in the code?

I am happy to implement this if it helps. I am curious though what scenario this is useful for - why do you prefer to manually inject them?

@adrian I'd be happy to see this too if possible - so that we have the option to bundle/minify with the likes of ProCache..