Introducing Autotrack for analytics.js
February 18th, 2016 | Published in Google Analytics
The web has changed a lot since the early days of Google Analytics. Back then, most websites actually consisted of individual pages, and moving from one page to the next involved clicking a link and making a full-page request. With sites like this, it's possible to track the majority of relevant user interactions with a single, one-size-fits-all JavaScript tracking snippet.
But the web of today is much more complex and varied than it used to be. In addition to traditional, static websites, we have full-featured web applications. User interactions aren't limited to clicking links and submitting forms, and a "pageview" doesn't always mean a full-page load.
The web has changed, but analytics implementations have stayed pretty much the same. Most Google Analytics users copy and paste the default tracking snippet and that's it. They know there's more they can do with Google Analytics, but taking the time to learn is often not a priority.
Autotrack for analytics.js is a new solution to this problem. It attempts to leverage as many Google Analytics features as possible while requiring minimal manual implementation. It gives developers a foundation for tracking data relevant to today's modern web.
Note: autotrack is maintained by the Google Analytics developer relations team and is primarily intended for a developer audience. It is not an official Google Analytics product and does not qualify for Google Analytics premium support.
Note: autotrack is maintained by the Google Analytics developer relations team and is primarily intended for a developer audience. It is not an official Google Analytics product and does not qualify for Google Analytics premium support.
Features
The autotrack library is built as a collection of analytics.js plugins, making it easy to use the entire library as-is or to pick and choose just the plugins you need. The next few sections describe some of the features autotrack enables.
Outbound link and form tracking
When a user clicks a link that points to another page on a site, that other page typically sends a pageview hit once the user arrives. Because there's a series of pageviews, Google Analytics can figure out on the back end where the user navigated to (and from). But if a user clicks a link or submits a form to an external domain, that action is not captured unless you specifically tell Google Analytics what happened.
Historically, outbound link and form tracking has been tricky to implement because most browsers stop executing JavaScript on the current page once a new page starts to load. Autotrack handles these complications for you, so you get outbound link and form tracking for free.
URL change tracking for single page applications
If you're building a single page application that dynamically loads content and updates the URL using the History API, the default tracking snippet will not suffice -- it only tracks the initial page load. Even if you're sending additional pageviews after successfully loading new content, there can still be complications.
Autotrack automatically detects URL changes made via the History API and tracks those as pageviews. It also keeps the tracker in sync with the updated URL so all subsequent hits (events, social interactions, etc.) are associated with the correct URL.
Declarative event tracking
Sometimes it's easier to declaratively add an event to the HTML than to manually write an event listener in JavaScript. Tracking simple click events is a prime example of this. To track click events with autotrack, you just add data attributes to your markup.
When a user clicks on the above button, an event with the corresponding category and action (and, optionally, label and value) is sent to Google Analytics.
Media query tracking
Most sites today use responsive design to update the page layout based on the screen size or capabilities of the user's device. If media queries are used to alter the look or functionality of a page, it's important to capture that information to better understand how usage differs when different media queries are active.
Autotrack allows you to register the set of media query values you're using, and those values are automatically tracked via custom dimensions. It also tracks when those values change. (Note that media query tracking requires you to set up custom dimensions in Google Analytics. The process only takes a few minutes, and the instructions are explained in the mediaQueryTracker plugin documentation.)
These are just a few of the features you can enable when using Autotrack. For a complete list of all plugins and instructions on how to use them, refer to the Autotrack documentation on Github.
Who should use autotrack?
While anyone could use and benefit from autotrack, the library is primarily geared toward sites that do not customize their current analytics implementation and would like to take advantage of the features described in this article.
If you're just using the default tracking snippet today, you should consider using autotrack. If you already have a custom implementation of Google Analytics, you should first check the documentation to make sure none of the autotrack features will conflict and no data will be double-counted.
Next steps
To get started using autotrack, check out the usage section of the documentation. If you're curious to see what the data captured by autotrack looks like, the Google Analytics Demos & Tools site uses autotrack and has a page with charts showing the site's own Google Analytics data.
If you want to go deeper, the autotrack library is open source and can be a great learning resource. Have a read through the plugin source code to get a better understanding of how many of the advanced analytics.js features work.
Lastly, if you have feedback or suggestions, please let us know. You can report bugs or submit any issues on Github.
By: Philip Walton, Developer Programs Engineer