Google Analytics Autotrack.js Interactive Demo and Tutorial

Hello, AutoTrack!

This is a short and sweet interactive tutorial and demonstration of a few features of Google Analytics Autotrack.js that I found most interesting. Autotrack standardizes the approach to implementing both simple and complex tracking in Google Analytics. It makes tracking interactions, collecting data and implementing Google Analytics code much easier. This implementation is set to full debug-mode so you can see everything as it is logged to the Javascript console.

Open up your developer tools and let’s go!

Click Here to Start!

Impression Tracker

The Impression Tracker feature solves a problem that many CROs and publishers face. This plugin allows you to capture an event when an element becomes visible on the page (and to the user). This means answering whether a user has truly seen an advertisement (true-view impression) or determining if an important CTA button is ever visible to a user – providing one more data point in a conversion funnel.

This glass is 0% full.


This is an example of how the Impression Tracker works. The browser technology behind Impression Tracker is called the Intersection Observer API.This recent addition to Firefox and Chrome provides information about how much of an element is visible on the page. It is experimental and not available in all browsers yet. But luckily, Autotrack.js solves this with a polyfill to accommodate older browsers.

Magnificent Call-to-Action Below!

But can you see it? You won’t until you scroll down and it comes into view in the browser. And if you watch your Javascript console, you will see that an event fires when you can see 90% of the button.

Implementing Impression Tracker

Considering how complicated it would be to do this otherwise, this is quite simple – only two steps:

Load the polyfills script:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

Load the plugin and set the tracker options:

// Define the impressionTracker options

var options = {
  elements: [
    {
      id: 'magnificent-cta',
      threshold: 0.9
    }
  ]
}

// Load the plugin with the options
// specified above.

ga('require', 'impressionTracker', options);

Media Query Tracker

You don’t have to look very deep into Google Analytics to recognize how a user’s device impacts their behavior. This plugin extends that insight into something that is much more actionable to you and your designers.

The Media Query Tracker collects three data points: it fires an event when the layout changes in a responsive design (based on breakpoints) and records the layout as a custom dimension, it records the device resolution as a custom dimension, and it records the device orientation (for phones and tablets) as a custom dimensions. This helps answer not only the “what” behavior differences associated with device types, but also the “why.”

Let’s Measure Bootstrap Breakpoints

To demonstrate this, let’s see what happens when you resize the width of your browser. At the point that the browser window is narrow enough to apply the “Medium” layout (aka less than 992px, aka Bootstrap’s “md”), then an event will fire. The category for this event will be “Breakpoint,” and it will have custom dimensions defined by the breakpoint values, the screen resolution, and the screen orientation. Try it!

Implementing Media Query Tracker

It looks like a lot of code to implement this plugin but if you know the breakpoints of your site’s layout, it’s quite easy – just assign custom dimension names and values and define rules for when a breakpoint is crossed. Below is the code that is used on this page. It starts with loading the plugin and then customizes the plugin’s settings below. These breakpoint settings are based on the Bootstrap CSS framework that this page uses.

ga('require', 'mediaQueryTracker', {
            definitions: [
              {
                name: 'Breakpoint',
                dimensionIndex: 10,
                items: [
                  {name: 'xs', media: 'all'},
                  {name: 'sm', media: '(min-width: 768px)'},
                  {name: 'md', media: '(min-width: 992px)'},
                  {name: 'lg', media: '(min-width: 1200px)'}
                ]
              },
              {
                name: 'Resolution',
                dimensionIndex: 11,
                items: [
                  {name: '1x',   media: 'all'},
                  {name: '1.5x', media: '(min-resolution: 144dpi)'},
                  {name: '2x',   media: '(min-resolution: 192dpi)'}
                ]
              },
              {
                name: 'Orientation',
                dimensionIndex: 12,
                items: [
                  {name: 'landscape', media: '(orientation: landscape)'},
                  {name: 'portrait',  media: '(orientation: portrait)'}
                ]
              }
            ]
          });

Auto Event Tracker

The Auto Event Tracker plugin is like a hard-coding Google Tag Manager auto event listeners. It makes assigning interactive events a bit cleaner and easier than before. With Autotrack, instead of dealing with a bunch of Javascript, all you have to do is add some HTML attributes to the element you want to track.

Implementing Auto Event Tracker

The button “Big Click Button” below is being tracked by Auto Event Tracker. It uses data attributes to assign category and action values to the event hit. To listen for click events on the button below, the HTML looks like this:

<a href="#" 
 ga-on="click" 
 ga-event-category="Auto Event" 
 ga-event-action="click"> 
 Big Click Button</a>
Click the button to fire an event.

Auto Event Tracker can also listening for other Javascript event associated with the given element. For example, the contextmenu or mouseover events could be tracked. The button below fires an event on mouseover:

<a href="#" 
 ga-on="mouseover" 
 ga-event-category="Auto Event" 
 ga-event-action="mouseover">
 Big Mouseover Button</a>
Hover over the button to fire an event.

The mouseover event is silly, but you get the idea.

To make this work, along with setting the ga-on-{{js event name}} attributes, you have to tell Auto Event Tracker what events it should be listening for on the page. This is done in the options object, the third argument to the require function when loading the Auto Event Tracker plugin:

ga('require', 'eventTracker', { events:['click','mouseover'] });

There are more options to set, but you can check out the documentation to see them all.

Outbound Link Tracker

The final two plugins I will cover her, Outbound Link Tracker and Social Widget Tracker are similar to the Auto Event Tracker, as they track interaction on the page. They are quite easy to setup – the preset options are sufficient to cover most cases.

By default, Outbound Link Tracker records link clicks to other domains and subdomains of the same root domain. Events are recorded with the following parameters: Category; “Outbound Link”, Action; event type (eg. “Click”), Label; link href (eg. “http://www.externaldomain.com/some-page”)

Implementing Outbound Link Tracker

All you have to do is load the plugin. You can specify how and what links are, or are not tracked, with rules based on the link href, current page URL, or anything else you want with Javascript. The basic setup looks like this:

ga('require', 'outboundLinkTracker');

If you want to test this some more, there are a few more plugins that I didn’t cover in this demo. But if you want to check them out, here are their docs on Github:

Social Widget Tracker

What a perfect time to talk about sharing! The final plugin in this tutorial is all about that mysterious report in Google Analytics that displays data about the moments when people find the kindness in their heart share the work that you have put so much of your time, will, and effort into.

The Social Widget Tracker plugin makes it easy to see how and when people share you content on Facebook and Twitter. Coincidentally, I have this really nice interactive demo for this below:

Tweet all the things!

Share all the things!

Implementing the Social Widget Plugin Tracker

Again, this one is very easy – just plug(in) and play. Just load the plugin by require-ing the plugin and the plugin will track shares as social interactions by default. If you would like to track them as events instead, you can change that the plugin options.

ga('require', 'socialWidgetTracker');

That’s all for now!

Thanks for checking this out. I hope it was helpful in understanding the capabilities and wonders of Autotrack.js. If you have any questions, let me know on Twitter or LinkedIn. Any suggestions? Let me know and I will update the demo.