Nithin Bekal

Posts About Notes Slides

Turbolinks and Google Analytics

27 Nov 2015

Google Analytics tracking code doesn’t play well with Rails apps using Turbolinks. For a long time, we were using Turbolinks compatibilty script, but then I noticed that our bounce rate was suspiciously low.

A bounce rate of under 50% would be considered quite good, but ours was hovering under the 5% mark. On looking at the requests, the script was sending in two pageview requests on each page.

The script was using the old Analytics code, so we decided to switch to the new analytics.js from Google, and make it work with Turbolinks. We’re now using a much simpler method, based on this stackoverflow thread.

First, put this code in the <head> section of your markup:

<script>
<%- if Rails.env.production? -%>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('require', 'linkid');
  ga('create', 'UA-XXXXXXXX-X', 'auto');
<%- else -%>
  function ga() { console.log("Google Analytics"); }
<%- end -%>
</script>

This is identical to the default script, except that it is missing the ga('send', ...) line. We’ll put that in a JS file which is part of the asset pipeline.

// app/assets/javascripts/analytics.js
$(document).on('page:change', function() {
  ga('send', 'pageview', window.location.pathname);
});

NOTE: The above code is for Turbolinks 2.x. As Michael mentions in the comments below, replace page:change with turbolinks:load if you’re using Turbolinks 5.0.

This triggers a pageview request every time Turbolinks loads a page. Switching over to this approach has fixed our problem with incorrect reporting.

Hi, I’m Nithin Bekal, a software craftsman with over 7 years of experience in shipping web applications. I mostly use Ruby, but lately have also been exploring Elixir. Co-founder of CrowdStudio.in, and helping organize Rubyconf India. Tweet to me at @nithinbekal.