A European cookie law that regulates the use of web browser cookies is now in effect in the UK. That cookie law is based on guidelines set by the European Union. In a nutshell, the law states that websites must get a user’s consent before storing cookies on their device (computer, mobile phone, iPad, etc). There’s a lot of confusion around the UK law, and the EU regulation:
- Does it apply to companies based outside the UK?
- It allows an exception for cookies that are ‘strictly necessary’. What counts? Shopping cart cookies do. But what about analytics? Login cookies?
There are no clear answers. The UK did promise to phase in enforcement over time. But if this law succeeds, more cookie regulation is on the horizon. If you own a web site, chances are, you’re placing cookies on visitor’s computers, and you need to comply.
So, we’ve built a simple way to comply with the regulation and its free. Read on to get the code and implement it on your own site.
Note: You use this code at your own risk. We’re not responsible if the UK finds you in violation of their law.
The Solution
Portent has come up with a simple javascript solution to help you comply with the new European cookie laws. Using the help of a javascript location detection script from GeoBytes.com, the script prompts a user in the EU to consent to the site writing cookies to their device. If the user consents, a cookie is written, set to expire in 90 days, giving the user full access to the site and the cookies it normally writes. If the user does not consent, the script will redirect the user to a static cookie consent information page.
Update (8/7/12): We have learned that about 1 in 50 requests to GeoBytes.com may redirect to an undesired page. This is the result of using the free version of the geolocation service by GeoBytes. I never encountered this in my testing, but I never did any stress testing. To avoid this, you will have to sign up for the GeoBytes service, which seems to be somewhere in the range of $10 (USD) per 10,000 geolocation requests.
The Script: cookieConsent.js
cookieConsent.js code on Pastebin
Copy the script code above and create a file named cookieConsent.js. Then, make sure you include the javascript file on every page of your site that writes cookies. This will most likely be all of them, especially if you have analytics tracking throughout your site. Put this includes in your header:
<script src="cookieConsent.js" type="text/javascript"></script>
To initiate the script, after page load, put this code snippet just above the end body tag on every page that writes cookies:
<script src="http://gd.geobytes.com/gd?after=-1&variables=GeobytesInternet,sGeobytesCountry,sGeobytesMapReference"></script> <script language="javascript">cookieConsent(sGeobytesInternet,sGeobytesMapReference);</script>
Static Cookie Consent HTML page: cookie-consent.htm
This is the page that should be created that gets redirected to when a user does NOT consent to allowing cookies on your site. This page should not write any cookies (analytics, etc.), but provide the user with more information about the cookies used on your site and the choice to accept them again. Here is an example of information for a site that uses cookies for tracking a user’s statistics on the site:
cookie-consent.htm code on Pastebin
You must talk to your attorney before you set up this page. Portent is not a law firm, and we’re not giving legal advice.
More Information
For more information regarding the EU Cookie Laws and suggested updates, see the following:
Demo
For an interactive demo, please visit cookieconsent.portent.com.
The script will require any user located in Europe or North America (for demo purposes) to consent to cookies being written on the site. If you’re having troubles implementing the script, try viewing the source code of the demo. Also, take a look at the comments below for additional assistance!
I have included the cookieConsent’js file.
I have put %MINIFYHTML9881e79e6573336846d5e252fd68f10812%%MINIFYHTML9881e79e6573336846d5e252fd68f10813% at the bottom of the page but all it does is print the %minify… line.
I need help.
Regards
John h
Hey John,
There were some display issues on the post with displaying the correct source code. I went through and fixed it. Try and follow the instructions now.
Hi Andy.
I cannot see what is wrong. I use Serif WebPlus and it should be as simple as putting the cookieConsent.js file in the scripts folder, adding the scripts folder to the path in the header and go (as far as I can see! – I am not a programmer), but nothing happens. Although the code looks OK in Notepad++, these lines get highlighted in blue from where I have marked ** in the WebPlus code editor.
for ( i = 0; i < **a_all_cookies.length; i++ ) {
a_temp_cookie = a_all_cookies[i].split( '=' );
Deleting them and re-entering manually makes no difference.
I don't have the code active on my website as yet. I have tried using it as an in-line fragment and an include. It is very likely I am missing something fundamental here. Please help.
Hey there, sorry for any confusion you may have encountered. I updated the blog post and added some things. Check out my reply with the updates: http://www.portent.com/blog/design-dev/web-browser-cookie-law.htm#comment-32416
If you’re still having problems, let me know and I’ll follow up and try and help!
Hey Andy,
I cam across your script in my own endeaver to find a solution for this not so great EU regulation, however I’ve installed your scripts on our own web server and they don’t work, the scripts don’t throw any errors but neither do the pop-up’s appear, hence they don’t work?
I then thought, OK I’ll visit the full portent site and see it in action, and it doesn’t work on that either, I assume you are running it on your own site?
I’d appreciate any feedback you can give, I’ve tested in Chrome and IE 8, and also on my Mac’s version of Chrome but all to no avail, I can see the principle of your solution and Geobytes variables are showing I am getting Europe as the variable when I browse the URL directly so I don’t understand why it’s not working
🙁
Hey Craig,
sorry for any confusion you may have encountered. I updated the blog post and added some things. Check out my reply with the updates: http://www.portent.com/blog/design-dev/web-browser-cookie-law.htm#comment-32416
If you’re still having problems, let me know and I’ll follow up and try and help!
Nice idea, but I have the same problem, nothing happens, while I followed everything to the letter. I’m using WordPress and googleanalytics. Perhaps this is due to the fact that I’m located in Belgium?
I removed the script in the meantime because it might work in the UK and I have no idea how it would behave in that case.
In any case, thanks for the effort!
Hey there, sorry for any confusion you may have encountered. I updated the blog post and added some things. Check out my reply with the updates: http://www.portent.com/blog/design-dev/web-browser-cookie-law.htm#comment-32416
If you’re still having problems, let me know and I’ll follow up and try and help!
For anyone struggeling I personally found there were 2 problems with teh script:
1) This may not affect everyone but for me Eurpe is detected with a space at the end – ie. “Europe ” rather tehn “Europe” – I solved this by trimming the space (google trim javascript for details as it a bit long but straight forward)
2) I alo cannot see any trigger for the cookieConsent functiion so I added this after the call to the geobytes site to initiate the check.
cookieConsent(sGeobytesInternet,sGeobytesMapReference);
Hey Jason,
Thanks for your comment. You are indeed correct with your suggested updates. I apologize for any confusion that people had with the code. I had some issues with pasting the code directly in to this blog post and some things got lost in translation.
I have since updated the post with Pastebin links to the code.
I updated cookieConsent.js to trim the country check. Please use the latest version of cookieConsent.js as shown on Pastebin. Be sure to update the domain accordingly.
I also added back in the javascript trigger to the blog post.
Lastly, I set up a demo site: http://cookieconsent.portent.com
I made it so that anyone in Europe and North America have to consent for the purpose of the demo. If you’re having troubles, check out this demo site and view the source!
I hope this helps. Thanks for your comments.
Hi
I think you mih have a logic error in the funcion cookieConsent – the final clause
else if ( Get_Cookie( ‘cookieConsent’) == false )
will never be called, because any time that test is true, the first clause
if (! Get_Cookie( ‘cookieConsent’ ) == true )
is also true and has been run instead?
Hey Phil.
Good eye, but I think that clause is still handling a return of NULL. Have you taken a look at the demo site? http://cookieconsent.portent.com
It’s working appropriately there.
I hope this helps!
Hi Andy – this is GREAT. I’ve tried several offerings to achieve this on a particular site of mine, and this is the first time I’ve had a success. Much appreciated.
Thanks for this, it works quite well. It’s good to see an effort to identify European users (it’s not quite EU, but that would be difficult to implement), rather than firing the dialog regardless.
There’s a catch, however, worth pointing out. After implementing it I found my site would occasionally redirect to some website about life expectancy in the UK. I thought I was going mad until a colleague in the US got redirected to the same site, but for life expectancy in the US – which is when I realised it was something to do with this script.
At first I was naturally concerned about malware or something, but the answer was much simpler. Turns out the Geobytes service redirects one in 50 requests for the geolocation information, but that this can be removed by paying for the service (something like $10 per 10,000 requests).
Thanks Lukas, good catch. I tried to keep this as free as possible, and that is why I went with Geobytes. Unfortunately, it seems that a more substantial Geobytes subscription is required for sites with more traffic.