Come to the EU, we have cookies

2013-09-05 by Senko Rašić

If you’re involved in building a website or a web application that caters to the EU visitors, you’ve probably heard of the EU cookie law. Ideally, the law would provide website visitors with transparency of how the sites they visit are tracking them. In reality, the effect is that the sites have to display annoying banners and (ironically) use cookies to remember whether the visitor has seen the cookie information or not.

Recently our good friends at Infinum built an open-source Ruby gem to make it easy to comply with the law if you’re building a Rails-based site. The gem was soon ported to PHP and .NET as well, and we briefly thought about doing a Django port as well.

Then we stopped and thought: why can’t it be done just once and be usable on any platform? After all, the server back-end doesn’t need to do anything. Modern JavaScript is powerful enough to do everything on the client-side. So we decided to build it as a purely JavaScript component you can just add it to your pages.

Then we took a step further: Why would you need to copy the script to your server? Why couldn’t you just copy-paste a single line into your HTML page and be done with it? Turns out, you can, and that’s what we built.

Cookie Banner

Cookie Banner is the result. It’s fully open source, hosted on GitHub, but it’s also a hosted “service” on cookiebanner.eu, and it takes a single line copy-paste to start using it:

<script type="text/javascript" id="cookiebanner"
    src="http://cookiebanner.eu/js/cookiebanner.min.js"></script>

Of course there’s loads of options if you need to customize it, including changing the text, colors or banner position.

The Geek Stuff

These days most JavaScript developers just slap jQuery and a couple of plugins on the page, just because they can. Since the banner will be loaded into already full-blown sites, we didn’t want to add bloat, cause potential library conflicts, and make the sites slower. So we built the script to be as lightweight as possible, and have no dependencies on anything.

That means:

  • no jQuery for DOM modifications or event listening, we’re using createElement, addEventListener and friends directly,
  • no external CSS, we set the default style directly on the HTML elements but still allow customization using CSS,
  • no external images or custom fonts, so we’re using Unicode for the close button.

To make the customization easy (including specifying the text and the more info URL), we’re using data-attributes on a script tag. While not something you can see often, in this case this allowed us to be able to have all the customization in one place, without you needing to add additional placeholder HTML tags or linking external CSS sheets.

The cookiebanner JavaScript file is served directly from Amazon S3, which is pretty fast, can take a punch and basically never goes down (if it ever does, I guarantee you’ll have much more trouble using the Internet than the convenience of Cookie Banner not working). The file is served from Ireland, so it’s geographically close to the european customers, meaning loading will be fast. Oh, did we mention the script is tiny? Less than 3kB minified.

Come to the EU. We have cookies.

Author
Senko Rašić
We’re small, experienced and passionate team of web developers, doing custom app development and web consulting.