Thanks Europe, that's just delicious*
What's all the fuss?
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.
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
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 the
cdScriptAppend()function which can append the script to the
<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>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;
Next, paste this html just before your closing
</body>tag (i.e below the code added in Step 1 above);
Finally, paste the below code before your closing
Example 1 - no third party scripts to declare
Example 2 - third party scripts declared
What it does
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.
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 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 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.
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?
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 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
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!