adrian

Cookie Management Banner

Recommended Posts

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.

  • Like 19
  • Thanks 2

Share this post


Link to post
Share on other sites
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.


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.

  • Like 1

Share this post


Link to post
Share on other sites

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"

 

 

 
   
   
   
   
   

Share this post


Link to post
Share on other sites
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!

 

Share this post


Link to post
Share on other sites
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.

 

cookie.gif.85a0030a2d3471aff7aab161ff80953b.gif

  • Like 2

Share this post


Link to post
Share on other sites

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?

 

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

 

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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();
                    });
  • Like 1

Share this post


Link to post
Share on other sites

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?

  • Like 1

Share this post


Link to post
Share on other sites
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).

 

  • Like 1

Share this post


Link to post
Share on other sites

@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.

  • Like 2

Share this post


Link to post
Share on other sites
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.

  • Like 4

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
15 hours ago, adrian said:

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

@adrian: Perfect, thanks!

  • Like 1

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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?

 

 

 

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites
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..  

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.