Thanks Europe, that's just delicious*

What's all the fuss?

On 26 May 2011 the European Commission made the controversial 'Cookies Directive' law. It applies to the UK and all european countries. It mandates that the use of cookies on european business websites must be disclosed and explicit consent for their use be obtained from your users, however in the UK the Information Commissioners Office (ICO) has suggested that it is sufficient to work on the basis of implied rather than explicit consent.

You can get the latest guidance from the ICO on implementing Cookies disclosure on your website here (442KB PDF).

The cookiesDirective.js

Summary

The script provides a mechanism for informing your visitors about how you use cookies on your website. It can also control cookie setting javascripts until consent for cookies has been obtained.

Version 2.0.0 of this script is available. This is a complete rewrite in the form of a jQuery plugin. It consolidates all the previous 'evolved' functionality and offers several new features including an implied consent mode as well as several customisation options. Version 1.5 is also still available to download but is no longer being developed.

Thanks to code contributions from users there is another version of this plugin which makes translation of the cookiesDirective plugin more easilly achievable. If you need to translate the text of this plugin, you'll be better off downloading this version from here. At some point these features may get merged into the main plugin.

This script is free to use, you can modify it, do whatever you want with it but, there's no warranty, express or implied. Read the license.

How to use

This covers setting up version 2.0.0

  1. If your site doesn't already use it, include jQuery in your website between the <head> and </head> tags. Everyone knows what jQuery is these days, so the script no longer checks for, or loads it for you. Something like this:

    								<head>
    								<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
    								</script>
    								</head>
    							
  2. Include jquery.cookiesdirective.js in your site like this, amending the 'src' attribute to point to the location of the script on your server. You should have something like this:

    								<head>
    								<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
    								</script>
    								<script src="jquery.cookiesdirective.js">
    								</script>
    								</head>
    							
  3. Call the plugin. You need to set just one option; the URI of your website privacy policy. If you don't want to customise it further, and you don't have any cookie setting scripts to disclose/control then you're done. Do this before the closing </body> tag.

    								<script type="text/javascript">
    									$(document).ready(function() {
    										$.cookiesDirective({
    											privacyPolicyUri: 'my-privacy-policy.html'
    										});
    									});
    								</script>
    							
    There are lots of options you can set. These are the defaults. To override simply pass the new value as we did for 'privacyPolicyUri' above.
    								explicitConsent: true, // false allows implied consent
    								position: 'top', // top or bottom of viewport
    								duration: 10, // display time in seconds
    								limit: 0, // limit disclosure appearances, 0 is forever		
    								message: null, // customise the disclosure message				
    								cookieScripts: null, // disclose cookie settings scripts
    								privacyPolicyUri: 'privacy.html',	// uri of your privacy policy
    								scriptWrapper: function(){}, // wrapper function for cookie setting scripts
    								fontFamily: 'helvetica', // font style for disclosure panel
    								fontColor: '#FFFFFF', // font color for disclosure panel
    								fontSize: '13px', // font size for disclosure panel
    								backgroundColor: '#000000', // background color of disclosure panel
    								backgroundOpacity: '80', // opacity of disclosure panel
    								linkColor: '#CA0000' // link color in disclosure panel
    							

Using with cookie setting scripts

Here's an example which discloses the fact we use 'Google Analytics' and 'My Stats' both scripts which set cookies. We want to disclose this and start tracking only when consent for cookies has been given.

  1. Follow steps 1 and 2 above.
  2. Call the plugin. Do this before the closing </body> tag. Set the 'cookieScripts' and 'scriptWrapper' options.

    								<script type="text/javascript">
    									$(document).ready(function() {
    										$.cookiesDirective({
    											privacyPolicyUri: 'my-privacy-policy.html',
    											cookieScripts: 'Google Analytics,My Stats', 
    											scriptWrapper: cookieController
    										});
    									});
    								</script>
    							
  3. Create the script wrapper function, place it above your call to the plugin. We called it 'cookieController'. Move your cookie scripts into there (remove any surrounding <script type="text/javascript"> & </script> html tags from the scripts).

    								<script type="text/javascript">
    									$(document).ready(function() {
    										function cookieController() {
    											// Cookie setting scripts in here
    										}	
    
    										$.cookiesDirective({
    											privacyPolicyUri: 'my-privacy-policy.html',
    											cookieScripts: 'Google Analytics,My Stats', 
    											scriptWrapper: cookieController
    										});
    									});
    								</script>
    							
  4. Sometimes a script might need to run in a certain place on your site, or it might contain the src attribute which links to a remote file. Or it might just be in an external file. In these situations it is not sufficient to move the script into the wrapper function. Instead, you'll need to use the the included '$.cookiesDirective.loadScript' function which can append the script to the <head> or <body> elements or, if you need it to run in a particular place in your page, as a child of any html element, by passing the element's id attribute. You specify the location using the second argument. Use 'head', 'body', or your own element's id.

    Lets include Google Analytics which sits in the file 'google.js' and My Stats which sits in the file 'mystats.js'. It's recommended that Google Analytics be placed in the header. But My Stats can be loaded in the body. We'd do it like this:

    								<script type="text/javascript">
    									$(document).ready(function() {
    										function cookieController() {
    											// Load Google Analytics to header
    											$.cookiesDirective.loadScript({
    												uri:'google.js',
    												appendTo: 'header'
    											});
    
    											// Load My Stats to body (default)
    											$.cookiesDirective.loadScript({
    												uri:'mystats.js'
    											});
    										}	
    
    										$.cookiesDirective({
    											privacyPolicyUri: 'my-privacy-policy.html',
    											cookieScripts: 'Google Analytics,My Stats', 
    											scriptWrapper: cookieController
    										});
    									});
    								</script>
    							

Limitations

The script expects the URI of your privacy policy. You should have one, but if not you'll need to write one.

The wrapper won't help you with cookies set serverside. It's assumed most of these will be cookies that your CMS/Blog/Cart 'has' to set for the purpose of session and login management. There's not much you can do about those but disclose them and point out that your user can block them but aspects of your site won't work - this script makes that disclosure.

It's not going to support all scripts. Some scripts weren't designed to be dynamically injected into the DOM via javascript. It's a case of suck it and see. But don't despair - if you're running a server-side scripting language like PHP, ASP, Ruby .NET, you also have the option of wrapping cookie setting scripts in conditional statements and holding them back until you can detect the consent cookie. Using this approach you restrain pretty much any cookie setting script, even those that don't play nicely when injected dynamically into the DOM, until consent has been granted.

PHP Example

	
						<?php if($_COOKIE['cookiesDirective']) { ?>	
							<script type="text/javascript">
								alert('This cookie is a bad boy');
							</script>	
						<?php } ?>	
					

Last but not least - it might not be right for you. Don't just implement this script without understanding how your website uses cookies and whether this script discloses their use properly. This was first and foremost a solution for websites I support. One size fits many, but never all.

FAQ

1. Do I need this script?
If your site sets cookies, whether itself, or through the use of scripts embedded in your webpages like Google Analytics then the answer is 'you probably need a script of some sort'.

2. What consititutes necessary use?
An example on the ICO's website cites 'necessary' as cookies set by an ecommerce website for the purpose of maintaining the shopper's basket. Without those cookies the website could not function. This logically extends to sites which use cookies to manage session and login functionality. Your users may block them but those functions may not work for them.

3. How do I implement this in my Blog/CMS?
Without using plugins, probably the best place to do all this is in your skin/theme file, specifically in any footer include (so you only have to do it once), it should work fine.

4. Is there a demo?
Yes, on this site. You should have seen it when you landed here. If you accepted but want to see it again, just clear your browser cookies and reload this page.

Version History

This project is now hosted on Bitbucket. Feel free to contribute.

Message Translations Branch available to download, 19/02/2014

  • Includes several more options to represent the text components of the plugin, these can be translated easilly. Thanks to Ravi Khubchandani and Torben Hansen for their work on this branch.
  • Download via this link

Version 2.0.1, 24/10/2013

  • live() replaced with click() handler as former deprecated
  • Removed old 1.5.js script from this package

Version 2.0.0, 03/10/2013

  • Rewritten as a jQuery plugin
  • Customisation. More options for customising appearance
  • Implied consent mode. For the UK. The ICO said it's ok. So less clicking and won't hold back your cookie setting scripts.

Version 1.5, 20/06/2012

  • Depending on Doctype IE 9.0 renders some sites in quirks/compatibility mode. This would break the script. In 1.5 script now detects IE 9 compatibilty mode and forces IE8 strict mode, meaning disclosure will be at top of screen regardless of settings. Sites IE 9.0 can render in strict mode are not impacted.

Version 1.4, 23/05/2012

  • Detects IE8 and lower, and forces disclosure to top of viewport with absolute not fixed CSS positioning
  • Removed erroneous commas which were causing IE problems.

Version 1.3, 10/05/2012

  • Able to specify how many times to make the disclosure. 0 is forever.
  • After 10 seconds the banner is removed from the page. They read it, didn't accept cookies. No point having it clutter up your page for longer than necessary.

Version 1.2, 19/03/2012

  • Disclosure can be made at 'top' or 'bottom' of browser viewport
  • No compressed version supplied. Some browsers seemed to struggle with this

Version 1.1, 17/03/2012

  • jQuery loader improved
  • cdScriptAppend function improved for more reliable loading of remote scripts

Version 1.0, 24/06/2011

  • Initial release

License

cookiesDirective.js is distributed under the MIT License. Read that here.

Who's behind cookiesDirective.js?

I'm Ollie Phillips, I wrote cookiesDirective.js and built this website. I'm owner/developer at Eantics, a Cheshire web design and web development company which specialises in concrete5, and I'm Director/Developer at Adviser Portals who provide websites, compliant content and tools for Financial Advisers. You can find me on Twitter @ollieflips.

If you're a business owner with a website, both you and your web designer should be considering how to address cookies disclosure as commonsense did not prevail. Why not send your designer a link to this website - the hard work has been done for them!

And, if this script saves you a few quid in getting your own solution developed, why not buy me a beer via PayPal!






Download the script

Grab the code here. It's a zip file of about 10KB

Download cookiesDirective


Donate

If this is useful to you, you could buy me a beer using Paypal.


Keep in touch

Leave me your email address below and I'll keep you up-to-date on this project.


Subscribe Unsubscribe


Useful Links

Information Commissioners Ofice
Cookie Law

Sell your digital files