Compliance Solution for the E.U. Cookie Law

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 zingchart.com 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 ZingChart.com.  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 zingchart.com 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.

Geotargeting

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.

Results

After setting the cookie tool on the site, we loaded zingchart.com 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).

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.