How to implement an usable cookie bar for your Rails application

Colorful cookies

Selling a service or products online in Europe makes us comply with the EU cookie law. It consists of displaying a message to the user so he knows that we are using cookies to track him. Because let’s be honest, is there any online shop out there not tracking users? Analytics are crucial to see which product or page is the most viewed, or where visits come from, and when!

The European Union thinks this would violate the user’s privacy, so pages doing this should warn the user clearly. And the most popular solution is displaying a bar, at the bottom or the top of the page.

Until we have the user’s consent, we cannot store cookies in the browser. So we can’t know where new users come from. This is highly problematic for most sites, so many of them don’t follow this rule and just display the message. It’s somewhat contradictory, but it’s how it’s being used currently. So this is how we are going to implement it.

Sample Rails application

Let’s create a new Rails application and go step by step. If you want to use your existing application, you can skip this section.

Add the faker gem to your Gemfile:

And rebuild Bundler dependencies:

Now let’s create a Home controller with an index view:

This will also create a new route for us, but we will replace it with a root route:

And the final step to get our sample app ready is to display some content. Delete all default content in app/views/home/index.html.erb and add this:

Start the Rails server:

And go to localhost:3000

Our sample application is now showing a large page enough to scroll.

Setting up required libraries

We will use the Bootstrap Sass version. So let’s add this add to our Gemfile:

Rebuild Bundler dependencies:

To require Bootstrap styles we must change our app/assets/stylesheets/application.css file extension to scss first. Go ahead, add an s before the extension.
Then delete all content and add this:

We are using Sass to import Bootstrap default styles, without using Sprockets directly. This is the recommended way to do it.

Require it from the app/assets/javascripts/application.js manifest file as well. You can place it below the turbolinks require statement.

To handle cookies in the client’s browser we are going to use the js-cookie JavaScript library. You can find it here: https://github.com/js-cookie/js-cookie
Download it, and copy the src/js.cookie.js file to your app/assets/javascripts directory.

Now require it from the application.js manifest file:

Building the message bar

Let’s create a partial to build the message bar. Save it to app/views/layouts/_cookies_bar.html.erb:

It could be convenient to add a link to that message containing some legal text and instructions to delete our cookies.

Now include it in the application layout located at app/views/layouts/application.html.erb, just below the yield call:

What we are checking here is a cookie named allow_cookies. This cookie does not exist yet, but we will deal with it later. Alternatively we could also display this partial only for the production environment this way:

Great! Refresh and you will notice our bar at the very bottom of the page. But it has a transparent background and looks messy. Let’s style it a little…

Styling the bar

Create a new main scss file at app/assets/stylesheets/main.scss and paste this:

Now in the application.scss file we modified before, add a new import at the end:

This is how the bar looks now:

Bar 1

Notice that I have used media queries to adapt it to the screen size. This is how it looks like in a small screen:

Bar 2

Creating the cookie

The only thing missing is actually creating the cookie. We’ll be using CoffeeScript to develop interactions.

Create the file app/assets/javascripts/main.coffee and paste this:

  • We use the cookiesAllowed internal variable to control the user permission.
  • Next we save the Google Analytics script to the variable ga.
  • Finally we define the allowCookies method that creates the actual cookie, appends the Analytics code, and fades out the bar.

Very straightforward, isn’t it? If you want this to only work on production, just wrap this code in a Ruby condition:

Remember not to apply indentation here, CoffeeScript is interpreted after ERB.

Now let’s go for the behaviors code:

First we get the cookie and define two behaviors to allow cookies:

  • The bar button is clicked.
  • The document is scrolled.

If cookies are already allowed, this will not happen.

Go on, refresh the page and either scroll or click the bar button. The bar should fade out, and the cookie should be installed in your browser, together with the Google Analytics code. Yay!

Deleting our cookies

What if the user disagrees later? How could we provide a way to delete all our cookies?

To do so, we should create a link in the instructions text I mentioned before. But to keep this simple, let’s create a link to the home text.

Prepend this link to app/views/home/index.html.erb:

Back to our CoffeeScript code, add the deleteCookies method below allowCookies:

And in the ready method, below the scroll behavior, paste this:

This will display the message we defined in the link after deleting all our cookies.

Try it out! Using your browser inspector you should see how they are deleted after clicking the button.

I have uploaded the sample application to GitHub: https://github.com/davidmles/eu-cookie-sample

Conclusion

It’s not that hard to implement our own solution to follow the EU cookies law. This way we will control it better instead of using a plugin that limits us in some way.

I hope this law changes soon so this is not necessary anymore, but meanwhile it’s a clean and simple solution. Have you found it useful? 🙂

Did you like it? Please share it:

Get my ebook for free

10 ideas that helped me become a better developer (and may help you too)

Subscribe to my mailing list and get my ebook on 10 ideas that helped me become a better developer.

About Me

David Morales

David Morales

I'm David Morales, a computer engineer from Barcelona, working on projects using Ruby on Rails and training on web technologies.

Learn More