CookieCuttr - A tailorable jQuery plugin to deal with the EU Cookie Law

What is CookieCuttr?

I've been trying to come up with a way of implementing a sensible solution to the impending EU cookie law due to be enforced on 26th May. I wanted to develop something I could use easily and add to all of my client websites and my own websites with a really quick and configurable implementation.

I've come up with a tailorable solution, depending on how you or your client chooses to “interpret” the new law.

Now that the ICO have announced "implied consent" is acceptable as long as you clearly signpost the Privacy Policy, I have interpreted the law as follows:

The website is only going to store cookies that are seen as essential to the functionality of the website. e.g. a shopping cart requires cookies for login, remembering cart items - they’re ok
The website is going to store all other non essential cookies until the website visitor declines, as long as I have clearly signposted the Privacy Policy.

You can read more about the EU Cookie Law here, here and here.

To try and explain the impact of declining (or not accepting) cookies I've added the following on to my company website in the privacy policy:

"PLEASE NOTE, not accepting the below cookies will severely harm our business, we will no longer be able to track visits to our website, see what the most popular pages are or devices looking at our website, it will be the equivalent of running a sweet shop (candy store), blindfolded with no stock-taking facility available."

Any questions or queries, please feel free to tweet me, all the code is on github so feel free to fork and improve it.

Changelog

WordPress 3.4 tested :)

NEW! We've now added an option that allows the deletion of the Google Analytics cookies when a user declines, have a look at the demos

26th May 2012 - The ICO released a change to the enforcement, "implied consent" is now allowed as long as you make it clear where your privacy/cookie policy is. I've added a couple more options: No message, ability to turn on/off 'Accept' button and now the element disabler can also work only when you the visitor has declined cookies, check out the demos

NEW!! Due to further developments on the EU Cookie law, I've added a slightly softer option, an accept/decline message that you can display on just your policy page. You can use this on its own or in conjunction with a standard (or discreet) message on the rest of your website by combining the options below, take a look at the demos

UPDATE!! The plugin is now translatable, every text based output is translatable, please check the options below

What do you need?

jQuery library (http://jquery.com)
The jQuery Cookie plugin (https://github.com/carhartl/jquery-cookie)
This plugin - 1 JavaScript file and 1 CSS file
Espresso or Notepad or your code editor of choice :)

Implementation

If you don't mind a number of http connections, include all of the above individually as follows in the <head> section of your HTML (HTML5 markup).

Please note, there is a space in the first line before "libs" so I could easily line wrap the text for mobile devices, make sure you remove that!


						<script src="//ajax.googleapis.com/ajax/ libs/jquery/1.7.1/jquery.js"></script> 

						<script>window.jQuery || document.write("<script src='assets/js/libs/jquery-1.7.1.min.js'>\x3C/script>")</script>

						<script src="jquery.cookie.js"></script>

						<script src="jquery.cookiecuttr.js"></script>

These files must all run BEFORE any other javascript on the page, I know some people like to add jQuery to the end of the document to speed up page load and you can do if you can control the third party software on your website, if you can’t its best to add it to the head, I’ll detail exactly why later.

Add in the link to the CSS file underneath all of your other CSS files


					<link rel="stylesheet" href="cookiecuttr.css">

For any JavaScript you want to disable, you need to wrap the following if statement around it:


					  if (jQuery.cookie('cc_cookie_accept') == "cc_cookie_accept")  {

						// insert the code you do not want to run UNTIL cookies are accepted here

					}

For example, lets take the most common example, Google Analytics, you can do the following to disable UNTIL cookies are accepted:


					<script>

					  if (jQuery.cookie('cc_cookie_accept') == "cc_cookie_accept") {

					  	var _gaq = _gaq || [];

					  	_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);

					 	 _gaq.push(['_trackPageview']);

					

					  	(function() {

					   	 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

					    	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

					    	var s = document. getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

					  })();

					  }

					</script>

Or you can do the following to enabled UNTIL cookies are declined:


					<script>

					  if (jQuery.cookie('cc_cookie_decline') == "cc_cookie_decline") {

					  // do nothing 
					  

					  } else {

					  	var _gaq = _gaq || [];

					  	_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);

					 	 _gaq.push(['_trackPageview']);

					

					  	(function() {

					   	 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

					    	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

					    	var s = document. getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

					  })();

					  }

					</script>

You just then need to call the function to run CookieCuttr - you can add this to your page, anywhere underneath the initial files you loaded in the head within the following code, the default setup will show the standard analytics message:


					$(document).ready(function () {

						    $.cookieCuttr();	

					});

You can also add this in to a central JavaScript file you may use to run your website.

I’ve included a generic CSS file which will give you some essence of style out of the box, with responsive media queries for tablet and mobile breakpoints.

I've also setup a jQuery variable that you can wrap around any jQuery elements:


			
			if( $.cookieAccepted() ) { 

					// insert the code you do not want to run UNTIL cookies are accepted here

			}

Options

I’ve added the following options within the plugin, these will give you ultimate control when deploying the plugin.

cookieCutter - if you’d like to actively hide parts of your website set this to true, for example say you use a comments system that inserts cookies, you can put the div name in below to replace it with a cookie warning message.

cookieAnalytics - if you are just using a simple analytics package you can set this to true, it displays a simple default message with no privacy policy link - this is set to true by default.

cookieDeclineButton - if you’d like a decline button to (ironically) write a cookie into the browser then set this to true.

cookieAcceptButton - set this to true to hide the accept button, its set to false by default

cookieResetButton - if you’d like a reset button to delete the accept or decline cookies then set this to true.

cookieOverlayEnabled - don't want a discreet toolbar? this makes the whole message into a 100% height

cookiePolicyLink - if applicable, enter the link to your privacy policy in here - this is as soon as cookieAnalytics is set to false;

cookieMessage - edit the message you want to appear in the cookie bar, remember to keep the {{cookiePolicyLink}} variable in tact so it inserts your privacy policy link.

cookieAnalyticsMessage - edit the message you want to appear, this is the default message.

cookieWhatAreTheyLink - edit the link for the 'What are Cookies' link.

cookieErrorMessage - edit the message you’d like to appear in place of the functionality

cookieNotificationLocationBottom - this is false by default, change it to true and the cookie notification bar will show at the bottom of the page instead, please note this will remain at the top for mobile and iOS devices and Internet Explorer 6.

cookieDisable - list elements comma separated in here that you want to disable, this will only work if cookieCutter is set to true.

cookieAcceptButtonText - you can change the text of the green accept button.

cookieDeclineButtonText - you can change the text of the red decline button.

cookieResetButtonText - you can change the text of the orange reset button.

cookieWhatAreLinkText - you can change the text of the "What are Cookies" link shown on Google Analytics message.

cookiePolicyPage - set this to true to display the message you want to appear on your privacy or cookie policy page.

cookiePolicyPageMessage - edit the message you want to appear on your policy page.

cookieDiscreetLink - false by default, set to true to enable.

cookieDiscreetLinkText - edit the text you want to appear on the discreet option.

cookieDiscreetPosition - set to topleft by default, you can also set topright, bottomleft, bottomright.

cookieDomain - empty by default, add your domain name in here without www. or https:// or http:// to remove Google Analytics cookies on decline.

Implementing on a CMS?

I’ve tested the above on WordPress and it works fine, obviously you only need to load the files that the CMS doesn’t use. I’ve found that if you implement the code in the <head> of the HTML and you are using a third party plugin (that you don’t want to start hacking apart) that the third party cookie is not stored in the browser. Be warned though, I’ve only tested this on my implementations and you need to test this on every website you implement.

If you don't want the hassle of dropping all the correct files in everywhere and you want an easy configuration tool for you or your client to maintain, then we've developed a WordPress Plugin to help.

Click here for the WordPress Plugin

Demos

Just Analytics?View

Options:
cookieAnalytics: true,
cookieAnalyticsMessage: "message",
cookieWhatAreTheyLink: '/insert-link/'

Preview:
Screenshot of Cookie Overlay showing analytics text and single green accept button

You have a privacy/cookie policy?View

Options:
cookieAnalytics: false,
cookiePolicyLink: ‘/insert-link/’,
cookieMessage: Message <a href="{{cookiePolicyLink}}" title="read about our cookies">read about them here</a>

Preview:
Screenshot of Cookie Overlay showing privacy policy link and single green accept button