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.

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.

Sign Up for this Amazing Offer!

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

<a href="#" 
 ga-on="click" 
 ga-event-category="Auto Event" 
 ga-event-action="click"> 
 Big Click Button</a>

<a href="#" 
 ga-on="mouseover" 
 ga-event-category="Auto Event" 
 ga-event-action="mouseover">
 Big Mouseover Button</a>

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:

• Clean URL Tracker
• Outbound Form tracker
• Page Visibility Tracker

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:

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.