Using Google Analytics with Turbolinks
Feb 26, 2017Read time: 2 mins
I recently wrote about a few roadblocks and tips I found while rebuilding this site on Jekyll. Another somewhat related issue I ran into, was how do I make sure Google Analytics is getting page views sent when using Turbolinks?
We’re all familiar with Google Analytics and how it works. You add a script provided by Google, that puts a global
ga object with methods and values that we can use to send tracking information to Google. Included by default in the code provided by Google is a call to send a page view.
ga( 'send', 'pageview');
How do we fix it?
Luckily, Turbolinks emits several events during its lifecycle, letting you hook in where needed. You can see a full listing of its events here.
The important event here is
turbolinks:load – on this event, we can trigger the
ga.send() function manually like so:
// CoffeeScript document.addEventListener "turbolinks:load", (event) -> if typeof ga is 'function' ga 'send', 'pageview', location.pathname
It’s important to note that I checked to make sure
ga was actually available so we don’t error out early in the event that
ga isn’t available. And now that we’re calling it manually, make sure to go back and remove the line from the code Google provided so you don’t get duplicates:
// remove this line from the code Google provided ga( 'send', 'pageview');
And that’s it! This should correctly fire the
ga.send() function on each page load even when Turbolinks is running.
An extremely handy tool when working with Google Analytics has been the Google Analytics Debugger Chrome Extension. It logs debug info into the console for every event coming from GA.