EU Cookie Law

Tuesday, June 26th, 2012

We all knew it was coming, and were wondering about what we would have to do about it when it came. Well now we know, and the answer is surprisingly simple.

On May 26th 2011 the EU Cookie Directive (or law) came into effect which requires website owners to make changes to their sites. It was feared that the law may change the way we all browse and shop on the Internet. The Cookie Law amended privacy legislation so that websites were required to get a visitor’s consent before storing or retrieving about them in such a way that you are satisfied that visitors to your website understand how and why you are using cookies. If they do not have this understanding then you do not have their implied consent.

Studies have shown that if asked to opt in when visiting a website, something like 43% of internet users refuse to accept cookies but nearly everyone (99.9%) gave their consent if they were simply notified that a website uses cookies. Since the Cookie Law came into effect notification appears to be the most common way of complying with the law and getting a visitors implied consent. So now let’s look at how we can simply implement this on any website.

Cookie Law Compliance

First of all you should begin by making a list of all the cookies that are used on your site, for example;

Cookie Name	What it does
PHPSESSID	Created by our servers to manage your session on our website.
__utma __utmb __utmc __utmz	Created by Google Analytics to track visit numbers/conversions etc.
PREF NID	These are 3^rd party cookies supplied by Google’s plusone and is required for linking content to your Google 1+ account.
X_LI_IDC	This is a 3^rd party cookie supplied by LinkedIn and is needed to view our LinkedIn social status.
VISITOR_INFO1_LIVE	This is a 3^rd party cookie supplied by youtube
K	This is a 3^rd party cookie set by twitter and is needed to view our twitter social status and if you want to link content with your twitter account.
HelpOnClick_auto_inv HelpOnClick_user HelpOnClick_online	These are 3^rd party cookies set by our live-chat and are vital to use this feature of our site.
Twitter_sess Guest_id	These are 3^rd party cookies supplied by Twitter and are needed to view our Twitter social status.
_pinterest_sess	This is a 3^rd party cookie supplied by Pinterest and is needed to view our Pinterest social status.
Datr Lsd Reg_fb_gate Reg_gb_ref wd	These are 3^rd party cookies supplied by Facebook and are needed to view our Facebook social status.

This list can be placed in a file along with an explanation of your cookie policy. It will inform visitors to your site which cookies you use and their purpose. This file will be linked to your cookie banner declaration which we will create in the following steps.

JavaScript is ideal for creating the cookie that we will use to store the visitors compliance. You can either place the script in the head tags, just before the </head> tag, or create a JavaScript file and reference it in the same place (<script src=”/js/cookies.js”></script>). I am presuming that users will be aware of how to to create and reference a ‘js’ or JavaScript folder and files at this point. However if you create a js folder and create a file in it called ‘cookies’, then here is the code that you will place in that JavaScript file;

function SetCookie(c_name, value, expiredays) {
var exdate = new Date()
exdate.setDate(exdate.getDate() + expiredays)
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
}

function SetCookie(c_name, value, expiredays) {

var exdate = new Date()

exdate.setDate(exdate.getDate() + expiredays)

document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())

}

This code creates a cookie for the visitor, with an expiry date of one year, so that unless they clear their cookies on their PC they will not have to select the option to allow cookies each time they visit the site.

Next we need to decide where to show the cookie banner on your site. Ideally the banner should show on every entry point to your site but it should be saved in a PHP file wherever it is. In my Zend projects I save it in the relevant layouts, in other projects it may be index.php or whatever you choose.

<?php
// cookie implicit compliance
if(!isset($_COOKIE["consentcookie"]))
{
?>
<div class="cookiebar">
<div class="cookieheader">
<!--Title-->
<h2> Our Cookie Policy </h2>
<!--Your Declaration -->
<p class="cookietext">
We use cookies to ensure that you are given the best experience possible when using our website and our new cookie policy
details which cookies we use and how they improve your experience of our website. Continuing without changing your
settings will mean you receive all the cookies used on this website. If you would like to change your settings, please view this page on 'How to manage cookies'
</p>
<p class="cookiebuttons">
<!--On the following line replace URL with the URL of the page this code will be on-->
<a href="URL" onClick="SetCookie('consentcookie','consentcookie','time()+31556926')">Close</a>
<br />
<!--On the following line replace CookiePolicy with the URL of the cookie policy created earlier-->
<a href="CookiePolicy"> Our Cookie Policy </a>
</p>
</div>
</div>
<?php
}
?>

<?php

// cookie implicit compliance

if(!isset($_COOKIE["consentcookie"]))

{

<h2> Our Cookie Policy </h2>

We use cookies to ensure that you are given the best experience possible when using our website and our new cookie policy

details which cookies we use and how they improve your experience of our website. Continuing without changing your

settings will mean you receive all the cookies used on this website. If you would like to change your settings, please view this page on 'How to manage cookies'

</p>

<a href="URL" onClick="SetCookie('consentcookie','consentcookie','time()+31556926')">Close</a>

<br />

<a href="CookiePolicy"> Our Cookie Policy </a>

</p>

</div>

<?php

}

Now it needs a bit of basic styling so you can use the following CSS code but feel free to change it to suit your site.

/*
COOKIE BANNER
*/
.cookiebar {
background: #EEE;
padding: 8px;
width: auto;
margin: 0px auto;
font-size: 14px;
height: 90px;
}
.cookieheader {
margin: 0px auto;
width: 900px;
}
.cookieheader h2 {
color: #555;
font-size: 18px;
}
.cookieheader p {
}
.maintext {
float: left;
margin: 0px auto;
color: #666;
width: 745px;
}
.cookiebuttons {
float: right;
color: #FFF;
font-size: 16px
}
.cookiebuttons a {
font-size: 16px
}

COOKIE BANNER

.cookiebar {

background: #EEE;

padding: 8px;

width: auto;

margin: 0px auto;

font-size: 14px;

height: 90px;

}

.cookieheader {

margin: 0px auto;

width: 900px;

}

.cookieheader h2 {

color: #555;

font-size: 18px;

}

.cookieheader p {

}

.maintext {

float: left;

margin: 0px auto;

color: #666;

width: 745px;

}

.cookiebuttons {

float: right;

color: #FFF;

font-size: 16px

}

.cookiebuttons a {

font-size: 16px

}

I hope this helps anyone looking for a quick and simple solution to the problem of making your website compliant with the Cookie Law as it stands, but please don’t rely on the information given here to be always correct. You should check with the relevant legal experts in all cases or at least do some research into the current legal situation. In other words, it’s not my fault if you break the law.

Tags: cookie law, CSS, JavaScript, PHP

One comment on "EU Cookie Law"

Pingback: max

Comments are closed.