Compliance Solution for the E.U. Cookie Law
by Andrew S. | 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.
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
- 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.
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.
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.
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.
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 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 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.