GDPR compliance with the jQuery EU Cookie Law plugin

GDPR compliance is slightly more work to handle than the EU Cookie Law was. It’s not OK any longer to tell the user to leave if they don’t like your cookies: you actually have to turn features on/off depending on their consent. This post is to show how to do this using the EU cookie law popup script.

(If you already know this plugin, you can skip ahead to the GDPR compliance bit.)

An easy-to-install jQuery plugin to create EU Cookie Law popups.

Supports multiple layouts out of the box. Works well with Bootstrap. Easy to customize markup and CSS.

This is the demo page. For the code, install instructions and to see how amazingly free it is, go to Github.

Get started

To get started, first include jQuery and import the plugin’s files:

<script src=”https://code.jquery.com/jquery-3.3.1.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css/jquery-eu-cookie-law-popup.css”/>
<script src=”js/jquery-eu-cookie-law-popup.js”></script>

(Mind you, you need to run the code on a webserver to be able to set cookies.)

Simple popup

In its simplest form, you can add an EU Cookie Law popup by simply adding the “eupopup” classes to any HTML tag.
<body class=”eupopup eupopup-top”>

You can also choose from these layouts:

jQuery EU Cookie Law popups (demo)

  • Top of the page (“eupopup”, or “eupopup eupopup-top”)
  • Fixed banner on top (“eupopup eupopup-fixedtop”)
  • Fixed to bottom (“eupopup eupopup-bottom”)
  • Fixed window, to bottom left (“eupopup eupopup-bottomleft”)
  • Fixed window, bottom right (“eupopup eupopup-bottomright”)
  • Inline (“eupopup eupopup-block”)

And these colours or styles:

jQuery EU Cookie Law popups (demo)

  • White text on dark background (“eupopup-color-default”)
  • Dark text on light background (“eupopup-color-inverse”)
  • Compact (“eupopup-style-compact”)

Custom HTML

To use a custom HTML markup, you can either add it as a Javascript parameter (read about it later), or by adding a DIV with the classname “eupopup-markup”.
<div class=”eupopup eupopup-container eupopup-container-block”>
  <div class=”eupopup-markup”>
    <div class=”eupopup-head”>This website is using cookies</div>
    <div class=”eupopup-body”>We use cookies to ensure that we give you the best experience on our website. If you continue using the site, we\’ll assume that you are happy to receive all cookies on this website.</div>
    <div class=”eupopup-buttons”>
      <a href=”#” class=”eupopup-button eupopup-button_1″>Continue</a>
      <a href=”//www.wimagguc.com/?cookie-policy” target=”_blank” class=”eupopup-button eupopup-button_2″>Learn more</a>
    </div>
    <div class=”clearfix”></div>
    <a href=”#” class=”eupopup-closebutton”>x</a>
  </div>
</div>

Parameters

The script takes quite a few parameters. The suggested method to override these is from the init method (find the out-of-the-box one in the jquery-eu-cookie-law-popup.js):
$(document).euCookieLawPopup().init({
  cookiePolicyUrl : ‘https://www.wimagguc.com/?cookie-policy’,
  popupPosition : ‘top’,
  colorStyle : ‘default’,
  compactStyle : false,
  popupTitle : ‘This website is using cookies’,
  popupText : ‘We use cookies to ensure that we give you the best experience on our website. If you continue without changing your settings, we\’ll assume that you are happy to receive all cookies on this website.’,
  buttonContinueTitle : ‘Continue’,
  buttonLearnmoreTitle : ‘Learn more’,
  buttonLearnmoreOpenInNewWindow : true,
  agreementExpiresInDays : 30,
  autoAcceptCookiePolicy : false,
  htmlMarkup : null
});

Events

If you need to be notified about the consent somewhere in your code (for example, to enable the cookies in other parts of your software), you can listen to the events.

‘user_cookie_consent_changed’ event is fired right after the user accepted or rejected the popup.

‘user_cookie_already_accepted’ event is fired on page load if the user already accepted using cookies in a previous session.

$(document).bind(“user_cookie_consent_changed”, function(event, object) {
  // true or false
  console.log(“User consent: ” + $(object).attr(‘consent’) );
});
$(document).bind(“user_cookie_already_accepted”, function(event, object) {
  // true or false
  console.log(“User consent: ” + $(object).attr(‘consent’) );
});
 

GDPR compliance

There are certain things that the website simply cannot do without the user’s consent. With this plugin you can ask the user first and perform certain actions based on their decision, using the built-in events.

Using Google Analytics integration as an example: it’s still safe to add most of their code as per usual, but only call the initialisation function when the user consent status changed.

<!– still include most of the snippet –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-1″></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

// Don’t call the init functions just yet:
// gtag(‘js’, new Date());
// gtag(‘config’, ‘UA-XXXXXXXX-1’);

function initialiseGoogleAnalytics() {
  gtag(‘js’, new Date());
  gtag(‘config’, ‘UA-XXXXXXXX-1’);
}

// Subscribe for the cookie consent events
$(document).bind(“user_cookie_already_accepted”, function(event, object) {
  initialiseGoogleAnalytics();
});

$(document).bind(“user_cookie_consent_changed”, function(event, object) {
  const userConsentGiven = $(object).attr(‘consent’);
  if (userConsentGiven) {
    // User clicked on enabling cookies. Now it’s safe to call the
    // init functions.
    initialiseGoogleAnalytics();
  }
});
</script>

Released under MIT, do-with-the-code-whatever-you-please License