Google Analytics

Deploying autotrack.js through Google Tag Manager

*autotrack.js has been updated! See this post for more information*

Just 2 days ago, the Google Analytics team released a plug-in called autotrack that packs a lot of new functionality into Google Analytics. The thinking behind autotrack is that far too many clients deploy the default GA snippet and stop there. By packaging up advanced GA tracking capabilities into one, easily deployed plug-in, clients will gain more value out of their GA account. These tracking capabilities include:

• Event Tracking – Track when users click on any HTML element with a certain data attribute
• Media Query Tracking – Track breakpoints, orientation, and resolution
• Outbound Form Tracking – Track when users submit forms that land them off-site
• Outbound Link Tracking – Track when users click on an outbound link
• Session Duration Tracking – More accurately track the duration of sessions by firing an event when the user closes their browser window
• Social Button Tracking – Track when users click on social sharing buttons
• URL Change Tracking – Track when the URL changes but the page does not refresh (important for single page applications)

While utilizing these enhancements goes beyond a “beginner” understanding of GA, by packaging them up in this easy-to-use plug-in it brings them from the clouds and into the hands of anyone with a basic understanding of GA and HTML.

Naturally after discovering this plug-in, I wanted to deploy it on my own website, www.noisetosignal.io. However, I quickly learned that GA plug-ins are not officially supported by Google Tag Manager which is what I’m using to load Google Analytics. Specifically, GTM does not provide any way to call the ga(‘require’, ‘plug-in name’) command necessary to load GA plug-ins.

With a little tinkering, I was able to get the plug-in and GTM to play nice with one another.

Step 1.

First, download the autotrack.js JavaScript from GitHub and upload it somewhere on your server where it’s accessible from your code.

Step 2.

Rather than attempting to load the plug-in into the GA tracker that will be created by GTM (with a randomly generated tracker name), we’ll create a brand new tracker solely for the purpose of loading the plug-in.

In Google Tag Manager, create a new “Custom HTML” tag called “Load Autotrack”. In the HTML portion of the tag, enter this information:

<script>
 ga(function() {ga.create('{{GA Property ID}}', 'auto', 'autotrackTracker');});
 ga('autotrackTracker.require', 'autotrack');
</script>
<script type="text/javascript" src="{{Path to autotrack.js}}"></script>

Here I’m assuming that you have a variable created called “GA Property ID” that will load your property ID in the format of UA-XXXXX-Y. You should also replace {{Path to autotrack.js}} with the file path you created in step 1.

Finally, save the tag without including any “Fire On” rules.

Step 3.

Within GTM, Navigate to your main GA pageview tag. In this tag, navigate to the configure tag/advanced settings/tag sequencing section, check “Fire a tag after GA Pageview fires.” and select the “Load Autotrack” tag that was created in step 2.

Doing so will ensure that GA has been properly loaded and a cookie has been set before we fire the “Load autotrack plug-in” tag. As Google documents, this new “Autotrack” tracker will use the existing cookie created by your main Google Analytics pageview tag.

Step 4.

Preview and test! At this point, you should be able to preview your GTM changes, navigate to your website, click an outbound link, and view resulting event in GA’s real-time reports (remember to use an “All Data” view that doesn’t filter your traffic).

Caveat

While this solution works for 6 out of 7 of the plug-in’s features, due to the fact that we’re loading the plug-in AFTER the initial pageview hit is sent, the mediaQueryTrack functionality of the plug-in will not apply its custom dimensions to the pageview hit.