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 businesses' websites must be disclosed and explicit consent for their use be obtained from your users. The Information Commissioner's Office has given UK businesses 12 months in which to achieve compliance.
Many people think this is a big step backwards, some that the legislation is so unworkable it will 'have' to be amended, but, as it stands, UK business websites will be required to make this disclosure from 26 May 2012. Fines of up to £500,000 could apply where businesses aren't following the law.
The good news is that cookiesDirective.js is a script you can easilly add to your website, which will take care of your cookie disclosure. Version 1.5 is now available.
* The nature of the legislation and the required disclosure will inevitably impact user experience (UX) however you choose to handle the directive's requirements. Who's going to like that?
You can get the latest guidance from the ICO on implementing Cookies disclosure on your website here (442KB PDF).
How to use
Just three simple steps.
-
Place this wrapper function html at the bottom of your page before the closing
</body>tag. If you don't have any cookie creating scripts you're done on this step.
<script type="text/javascript"> function cookiesDirectiveScriptWrapper(){ // Cookie creating scripts etc here.... } </script>
If you have cookie creating scripts in your page, move them into this function, which will prevent their execution until the user has agreed to receiving cookies (remove any surrounding<script type="text/javascript"> & </script>html tags from the scripts).
Sometimes the 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. In these situations it is not sufficient to move the scripts into the wrapper function. Instead, you'll need to use thecdScriptAppend()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.
For example, this page uses Google Analytics' asynchronous tracking script. Google recommend it is placed between the<head>and</head>tags. I pasted the code Google provided to me in a file I named 'google.js' and saved that to the root of this website. Then I used the cdScriptAppend function to load it before the closing</head>tag in the page. See the snippet below;
<script type="text/javascript"> function cookiesDirectiveScriptWrapper(){ // Cookie creating scripts etc here.... cdScriptAppend('google.js', 'head'); } </script>
-
Next, paste this html just before your closing
</body>tag (i.e below the code added in Step 1 above);
<script type="text/javascript" src="http://js.cookiesdirective.com/1.5.js"> </script>
You can (should) download the javascript file (zip, 7KB) and host it locally on your website so you'll be able to customise it easilly - just remember to change the path to the file!
-
Finally, paste the below code before your closing
</body>tag (i.e below the code added in Steps 1 and 2 above). From version 1.3 the function cookiesDirective() accepts four arguments. The first (required) is the position in your page you want to serve the disclosure; value can be 'top' or 'bottom'. The second (required) is the number of times you want to keep showing the disclosure if cookies are not being accepted. Enter a nunber of your choice. For example entering 5 will display the disclosure up to 5 times for each visitor. Entering 0 will display the disclosure on all page views. Please note this does not infer consent and start setting restricted cookies it just stops showing the banner. The third argument (required) is the URI of your site's privacy policy where you can explain the Cookies directive and how you handle cookies (and privacy) in more depth. The fourth is an optional string argument which can contain a comma delimited list of third party scripts your site uses which will set cookies if the user accepts them (i.e the scripts you moved to the wrapper function in Step 1).
Example 1 - no third party scripts to declare<script type="text/javascript"> // The position of the disclosure ('top' or 'bottom') // Number of times to display disclosure. Enter 0 to show it forever!!!! // The URI of your privacy policy cookiesDirective('top',5,'privacy.html'); </script>
Example 2 - third party scripts declared<script type="text/javascript"> // The position of the disclosure ('top' or 'bottom') // Number of times to display disclosure. Enter 0 to show it forever!!!! // The URI of your privacy policy // A comma separated list of scripts which will create cookies cookiesDirective('bottom',0,'privacy.html','Google Analytics,My Stats'); </script>
What it does
This script makes your site compliant in-so-far as it notifies your users that some cookies, presumably those of your CMS, Blog or Shopping Cart have already been created (we believe these qualify as "necessary"). It also communicates what "additional" cookies will be created if your user consents to receiving cookies, and points out that whilst cookies can be blocked by your users, access to your site may be limited as a result. Finally, it provides a link to your site's privacy policy.
Once consent is given no further disclosure is made on the site and your users can browse normally, even when they return to your website (that uses a cookie too). Until consent is given, the dialog will continue to be displayed, and cookie creating scripts placed in the wrapper function will not be running.
From version 1.3, the disclosure is removed after 10 seconds if consent has not being given. It is also possible to set the number of times the disclosure should be made if cookies are not being accepted which seemed like a good idea.
Limitations
The legislation and the disclosure don't make for the best welcome for your visitors. I've tried to minimise impact on UX but it seems you can't make a purse from a sows ear. Who knew?
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 } ?>
It's a little flakey in IE when running under certain doc types. I'll look at this when time permits, but any assistance in this respect much appreciated (improved in v1.4).
The script uses jQuery. If it's not loaded on your site, we load the compressed version of it from Google's CDN, which is fast so should have little impact on your site load times. The cookiesdDirective.js file is hosted on Rackspace CloudFiles but you can host it locally on your webserver if you're concerned about website load times, in fact I'd prefer that you did.
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
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 Ltd a Cheshire web design company and Director/Developer at IFA Portals Ltd who provide websites, compliant content and tools for IFAs. You can find me on Twitter at @ollieflips. You may also wish to follow @ifaportals and @eantics.
Hopefully, we won't all have to deface our websites with disclosure like this come May 2012 but, if you're a business owner with a website, both you and your web designer should be considering how to address this in case commonsense does not prevail. Why not send your designer a link to this website - the hard work has been done for them!
If this script saves you a few quid in getting your own solution developed, why not buy me a beer via PayPal!
