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 17
  • 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.

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.