Compliance Solution for the E.U. Cookie Law

by | June 1st, 2012

With the EU Cookie Law quickly coming into effect, PINT developed a solution for compliance.

Problem:  Provide a way for our partners at ZingChart to comply with a European Union law requiring that sites targeting EU audiences notify users, and ask permission to store cookies on their browser – without disrupting user experience.
Solved With: JavaScript, HTML/CSS, Design, UI, Marketing

This past weekend, the U.K. brought into law its long awaited cookie law.  The law, which seeks to prevent sites from storing cookies on users’ browsers without their permission, has been a source of confusion for many companies, as achieving compliance has not been a clear process.  With the deadline coming to a close, major sites like the BBC have finally rolled out their own solutions.  Here at PINT, we realized the impending deadline for compliance and built a solution for ZingChart that adheres to the law’s requirements.

Requirements for EU Cookie Law Compliance

After we gained a thorough understanding of the law, its implications, and how to achieve compliance, we set out to create a solution.  In order to comply with the law we needed to:

  • Block all unnecessary cookies until accepted
  • Tell users the cookies the site stored on their browsers
  • Provide access to a Privacy Policy and Cookie Policy on every page
  • Request permission to store cookies from users

Our goal was to create a tool that not only complied with the law, but also fit the look and feel of our test site and gave users the information they would need to approve cookie use.

Competing Forces

The cookie law is about privacy and giving users the ability to opt-in of cookies being stored on their browsers (rather than the traditional opt-out via plugins, or addons), particularly for cookies that track users (i.e. ad cookies).  However, we had to take into account that many sites use cookies that are fairly important for marketing, site improvements, and so on.  That being said, many organizations, ours included, needed to make a toolbar that informed quickly enough to gain consent so that cookies could be used and so that the user didn’t lose interest, get scared, or completely ignore the tool.

Designing the Tool

Creating the most appropriate design for the tool was a challenge.  We needed to request permission on the site in a clear and effective way. However, a popup would likely be ignored, an overlay coming down from the top would block content, and a floating window in the corner might get ignored.

Keeping Content in Mind

One of our goals was to avoid blocking content or detracting from a site’s design while being as noticeable as possible.  With this in mind, we concluded that a simple 60 pixel bar running across the top of the browser window would be most effective.

Providing Cookie Info

To provide the necessary info on the site’s cookies quickly and effectively, we added a drop down box containing the information of all the cookies the site used.  This box would overlay the site, but only if a user clicked “More Info.” Within the box we provided different categories of cookies used on so users could see at a glance the types of cookies used, then dig in to the details where desired.


Providing Choices

With the addition of the More Info box, we toyed with the idea of allowing users to accept only the cookies they wanted by selecting the category and clicking an “Allow only these cookies” button.  Ultimately, the idea didn’t make into the final build.  Adding more buttons would create too many choices for a user to make and could cause some confusion as to which “Allow” button was the right one to click for their intended action.

Look and Feel

After putting together a quick wireframe, our design team put together a tool that matched the look and feel of  The contrasting lime green color ensured that the bar stood out from the rest of the page and the shadow below it gave it the look of being pushed out from the page.


Finding Cookies

The first part of complying with the cookie law required a “cookie audit.”  The audit is used to discover all the cookies a site uses so a user can be appropriately informed of them and they can be blocked.  We performed audits using the Firefox extension Firebug.


Blocking Cookies

Once we discovered all the cookies in use on a site we needed to prepare a way to block the cookies from storing on a user’s browser before they accepted them.

All of the cookies we needed to block on were third party cookies, meaning they were cookies from external services like Google Analytics and Twitter.   To prevent these services from setting cookies, we needed to keep scripts from ever loading without permission.  To achieve this our tech team removed all third-party scripts from each page.  When “Allow Cookies” was clicked, the scripts were placed back into the page using JavaScript and the accepted cookies could be stored.

All third-party scripts required the same treatment, however the ZingChart Twitter feed needed more attention than other third-party scripts.  A cookie from Twitter allowed a feed of recent Tweets to stream on the ZingChart homepage, which meant by blocking these cookies the feed would be gone.  This lead us to create replacement content that says “Allow Cookies to view this content,” in place of the Twitter feed.
Once cookies are accepted, the scripts are placed back in and the Twitter feed replaces the placeholder content.



Lastly, once cookies were accepted we stored a cookie called “USER_ALLOWS_COOKIES” to remember that the user has accepted and prevent the tool from showing on subsequent pages.  If the user doesn’t accept, then the script is set to NULL and no cookie is stored.


To ensure that only users in Europe saw the tool, we used Maxmind for geo-targeting services.  We input the script provided by Maxmind and configured the cookie bar to only set on European browsers.  For users outside the E.U. we set the “USER_ALLOWS_COOKIES” cookie to prevent the bar from showing and keep the scripts running on the page.



After setting the cookie tool on the site, we loaded and ran FireBug.  Our post-implementation cookie audit showed that the cookies were prevented from storing.


While the Twitter content was being replaced properly with additional “Allow Cookies” text (right).

without_cookie_tool with_cookie_tool

With a click of the “Allow cookies” the scripts are allowed to run and the blocked cookies are stored, along with “USER_ALLOWS_COOKIES” to prevent the tool from appearing on subsequent pages and visits.



In a few short weeks, PINT gained an understanding of requirements for the EU Cookie Law, established a way to comply with the law, designed and programmed a tool to achieve compliance, and implemented it before the deadline.

Check out the custom ZingChart Cookie Tool Demo.

  • Great work and article, team!

    I wanted to add a bit of detail that we dug up regarding who needs to address this policy:

    “The below (“Article 4”) indicates who the law is applicable to and I think we can conclude with this, and the excerpt from the previous email, that:

    1) Companies operating in the EU with sites targeting EU users must adhere to the law.

    2) Companies operating outside the EU with sites, products, or services targeted to EU users are strongly urged to comply with the law.

    3) Companies operating outside the EU with products or services obtainable by EU users (e.g. a US site from which EU users can obtain a product or service) are strongly urged to comply with the law.

    4) Companies operating outside the EU with sites that can simply be viewed by EU users (and store cookies on their browsers), but do not target or offer goods or services to them, are recommended to follow the EU’s push for site transparency and privacy protection as a best practice measure.

    Article 4

    National law applicable

    1. Each Member State shall apply the national provisions it adopts pursuant to this Directive to the processing of personal data where:

    (a) the processing is carried out in the context of the activities of an establishment of the controller on the territory of the Member State; when the same controller is established on the territory of several Member States, he must take the necessary measures to ensure that each of these establishments complies with the obligations laid down by the national law applicable;

    (b) the controller is not established on the Member State’s territory, but in a place where its national law applies by virtue of international public law;

    For reference:

    (d) “controller” shall mean the natural or legal person, public authority, agency or any other body which alone or jointly with others determines the purposes and means of the processing of personal data; where the purposes and means of processing are determined by national or Community laws or regulations, the controller or the specific criteria for his nomination may be designated by national or Community law;”

  • Pingback: PINT Blog » 21 Steps to a Smarter Web Presence()