How to Set Up Google Analytics with Autotrack.js

After reviewing the Google Analytics data for my Death Clock project this morning, I saw that the bounce rate was really high, and I started exploring why this was the case.

Background & Confusion Phase

Indeed, it seems like there’s a limitation in how the default Google Analytics setup works with Single Page Applications (SPAs). Basically, using the recommended approach of adding the gtag.js tracking snippet, only the first page view would be tracked and not any subsequent site navigations that are made via the History API which is common for single page applications.

Turns out, there’s a library written by some people that work at Google called autotrack that can help with this. A little confusion ensued since autotrack uses another tracking Google tracking snippet called  analytics.js, while the Google itself recommends using gtag.js (and actually doesn’t even present the code for analytics.js on the tracking code page). Turns out both are still fully supported.

After some research, two approaches I found were to use Google Tag Manager to emulate the behavior of autotrack.js and deploying autotrack.js with Google Tag Manager. I actually began implementing the second approach, but one critical limitation of that approach is that it only works with plugins that fire AFTER the page the page view has been sent. This would mean that cleanUrlTracker, which helps us only track canonical urls, without the query part, wouldn’t work with this approach.

Turns out, Google Tag Manager is completely unnecessary for this setup.

Why use autotrack at all?

Autotrack helps us with a bunch of stuff, such as tracking outbound links, merging similar urls that in the default setup get reported as different pages (for instance /contact/ and /contact and /contact?someparam ) and enable’s easy event tracking among other things.

Solution / TLDR

Turns out, the solution is quite simple and straightforward once you understand how the different tools, snippets and libraries relate to each other.

Basically the process only has two steps:

  1. Switch to using analytics.js instead of gtag.js. Don’t worry, it’s still fully suported by Google.
  2. Load autotrack.js with whatever plugins you want to use. I chose to do it via a cdn since I didn’t want to self-host, but that’s an option as well.

TLDR, the final tracking code ended up being something like


<!-- Google Analytics -->
<script>
window.ga = window.ga || function () {(ga.q = ga.q || []).push(arguments);};
ga.l = +new Date;
ga('create', 'UA-YOUR-TRACKING-CODE', 'auto');

ga('require', 'cleanUrlTracker', {
stripQuery: true,
indexFilename: 'index.html',
trailingSlash: 'remove',
});
ga('require', 'urlChangeTracker');
ga('require', 'eventTracker');
ga('require', 'maxScrollTracker');
ga('require', 'outboundLinkTracker');
ga('require', 'pageVisibilityTracker', {
sendInitialPageview: true,
visibleThreshold: 2000,
});

// The command below is no longer needed because it is triggered by pageVisibilityTracker
// ga('send', 'pageview')
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<script async
src="https://cdnjs.cloudflare.com/ajax/libs/autotrack/2.4.1/autotrack.js"></script>
<!-- End Google Analytics -->

Leave a Reply

Your email address will not be published. Required fields are marked *