2012-08-20

Since the 26th May we’ve seen cookie notices become increasingly visible across UK web sites.  They come in a variety of shapes and sizes with different technical solutions going on behind the scenes.  Whilst some companies have chosen to implement solutions that block cookies by default (such as those detailed in my previous blog post here), a significant volume of web sites are using notices that do not block by default.  Instead, these solutions alert users to the use of cookies and provide a means by which their users can block cookies if they so choose.  The solution described below follows this approach which is reflective of the change in guidance provided by the Information Commissioner’s Office (ICO) and discussed previously by Ben.

There are obviously pros and cons with any solution that a site implements.  We have tried to keep our solution lightweight, unobtrusive and highly customisable.  Against this, the solution is reliant on JavaScript and jQuery and does not block cookies by default.  Whilst we believe that the tool reflects the spirit of the current interpretation of the law, the tool has not been certified as compliant with the Information Commissioner’s Office (ICO) and professional legal advice should be sought for absolute guidance regarding the requirements of the law.

The tool applies the following logic, only serving the cookie notice to users who have not previously seen the information (unless they have cleared their cookies):

Cases where visitor will see notice:

New visitor

Returning visitor who has cleared their cookies

Returning visitor who has not previously seen the notice (visited since the tool was implemented)

Cases where visitor will not see notice

Returning visitor who has retained their cookies and has visited since the tool was implemented

Visitor who has navigated from another page on the same domain (i.e. navigating through internal links).

The tool is reliant on the following technologies which must be in place in order for the tool to function correctly:

A cookie information page with a unique URL

Google Analytics tracking script

jQuery JavaScript library

jquery.cookie.js jQuery plug-in

The jquery.cookie.js plug-in is available here:

https://github.com/carhartl/jquery-cookie/

Installation Instructions

Download the zip folder below and unzip the file.

jquery.simple-cookie-notice.zip

Copy the jquery-simple-cookie-notice.js file to your site’s script directory.  If not already completed, carry out the same process for the jquery.cookie.js plug-in.

Once the scripts have been copied to your site’s script folder they must be referenced within the
tags on every page of the site.  If your site is run on a Content Management System (CMS), this should be possible by simply adding the following code to the header template:

Where the bolded text must be replaced with the URL of your site’s script folder.  Note that this code must be placed below the reference to the jQuery library.  The cookie scripts require the jQuery library in order to function, therefore the library must be called prior to the scripts.

Configuration - Mandatory Parameters

The Simple Cookie Notice tool has been coded to allow customisation for use on different websites.  There are three mandatory parameters that must be set:

setImpDate

setURL

cookiePageURL

setImpDate

The should be set to the date that the tool was added to your site.  The following date format should be applied:

'(Full Month) (2 Digit Date), (Full Year)' i.e. 'August 02, 2012' or 'May 31, 2012'

setURL

This should be set to the URL of your site and must be in a JavaScript REGEX format.  Essentially this means that the following characters must be escaped with a back slash if being used within the URL string:

^ [ . $ { * ( \ + ) | ?
/

Additionally, the entire URL must be wrapped in forward slashes.  An example is shown below:

/http:\/\/www\.yourdomain\.co\.uk/

Note that the setURL should be configured to include/exclude “www.” dependent on whether your site uses the prefix by default (simply check in a web browser if you are unsure).

cookiePageURL

This should be set to the URL of your cookie information page e.g.:

'http://www.yourdomain.co.uk/cookies'

Setting The Mandatory Parameters

To set the mandatory parameters, the following code must be added immediately beneath the

code:

Configuration - Optional Parameters

Additionally, there are five optional parameters that may be set:

fadeInTime

showTime

fadeOutTime

cookieText

setCSS

fadeInTime, showTime, fadeOutTime

These parameters control how quickly the cookie notice fades in, how long the cookie notice stays visible and how quickly the cookie notice fades out respectively.  The parameters take an integer value representing the time set in milliseconds.  By default the values are set to 3000, 7500 and 3000 respectively (i.e. 3 seconds, 7.5 seconds and 3 seconds).

cookieText

This parameter allows the cookie notice introductory text to be altered.  By default the pop-up text box will read:

“We set cookies by default.  For more information ”

Note that “click here.” is appended to the end of this string with the “here” text hyperlinked to target the cookie information page.  This part of the cookie notice cannot be amended so any changes to the cookieText parameter should take this into consideration.

setCSS

By default the tool generates a 280px wide box with white text on a black background that appears in the bottom right corner of the page.  The hyperlink colour and font type will default to the styles defined in your site’s CSS files.

The setCSS parameter has been included to make the tool highly customisable by allowing the CSS properties to be altered to match the design of any page.  Not, however, that if this parameter is amended all of the default CSS settings are overwritten.  The default settings are visible within the jquery-simple-cookie-notice.js file if they need to be referenced.

Setting The Optional Parameters

The following code snippet is an example of how additions can be made to the mandatory snippet detailed previously in order to customise all of the optional parameters:

The above script amends the fadeInTime to 1.5 seconds, the showTime to 10 seconds, the fadeOutTime to 2.5 seconds and the full notice text to read “We use cookies. Learn more, click here.”.  The box is then resized to 150px wide with a white background and red text, appearing in the top left corner of the screen.

Feedback

If you find this free tool useful, please let us know in the comments below, and help us spread the word by sharing this article.  Please note that whilst the tool is cost and maintenance free, we may need to charge for any support above and beyond the installation guidance provided above.  The tool is dual licensed under the MIT or GPL Version 2 licenses.

Show more