What is CookieCuttr?
Click here for the WordPress Plugin
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
}
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.
Demos
Just Analytics?View
Options:
cookieAnalytics: true,
cookieAnalyticsMessage: "message",
cookieWhatAreTheyLink: '/insert-link/'
Preview:
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:
Disable parts of your page and display a message?View
Options:
cookieCutter: true,
cookieAnalytics: false,
cookiePolicyLink: ‘/insert-link/’,
cookieDisable: ‘.divnamehere’
Preview:
You want an explicit decline button? View
Options:
cookieDeclineButton: true
Preview:
You want an explicit reset button? View
Options:
cookieResetButton: true
Preview:
You want a different message on your policy page? View
Options:
cookieAnalytics: false,
cookiePolicyPage: true,
cookieDeclineButton: true,
cookiePolicyPageMessage: 'You can change the message here'
Preview:
You want a really discreet box, which you can position? View
Options:
cookieDiscreetLink: true,
cookieDiscreetPosition: "topright",
cookiePolicyLink: "/privacy-policy/"
You want no message on any page, apart from the privacy policy page? View
Options:
cookieNoMessage: true
You want to Delete Google Analytics Cookies when declined? View
Options:
cookieDomain: "yourdomainhere.com"