How to add Google Analytics tracking that works with Turbolinks

Mirko Akov
Evermore
Published in
1 min readMay 20, 2014

Turbolinks is a really nice way to improve your Rails 4 application’s speed. It uses AJAX to load the pages and just replace the body element of your page. The official Google Analytics tracking code does not play nice with this approach, but we can easily make it work.

The following code snippet is a nice and clean solution for a couple of reasons:

  • It works nicely with Turbolinks
  • Degrades to work even without Turbolinks enabled
  • Uses the new tracking code
  • You can use it to track page views manually by invoking GoogleAnalytics.trackPageview()

The only thing that you need to do, is add this code snippet to your main javascript file and load this file in your websites head. Don’t forget to change the TRACKING-ID with yours.

# google_analytics.coffee
class @GoogleAnalytics
@load: ->
# Load the analytics code
window['GoogleAnalyticsObject'] = 'ga'
window['ga'] = window['ga'] || ->
(window['ga'].q = window['ga'].q || []).push arguments
window['ga'].l = 1 * new Date()
# Add the script
googleScript = document.createElement("script")
googleScript.async = 1
googleScript.src = '//www.google-analytics.com/analytics.js'
firstScript = document.getElementsByTagName("script")[0]
firstScript.parentNode.insertBefore googleScript, firstScript
# Create the analytics
ga 'create', GoogleAnalytics.analyticsId(), 'auto'
# You can enable additional modules like so
# ga 'require', 'displayfeatures'
if typeof Turbolinks isnt 'undefined' and Turbolinks.supported
document.addEventListener "page:change", GoogleAnalytics.trackPageview, true
else
GoogleAnalytics.trackPageview()
@trackPageview: (url) ->
unless GoogleAnalytics.isLocalRequest()
if url
ga 'send', 'pageview', url
else
ga 'send', 'pageview'
@isLocalRequest: ->
document.domain.indexOf('dev') isnt -1
@analyticsId: ->
'TRACKING-ID'
GoogleAnalytics.load()

Fork the gist to meet your needs.

--

--

Mirko Akov
Evermore

Full stack developer @weareevermore #ruby #elixir #ember.js