Noise to Signal

◂ Blog



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.

GTM load autotrack

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.




Author

Adam Ribaudo


Adam Ribaudo is the owner and founder of Noise to Signal LLC. He works with clients to ensure that their marketing technologies work together to provide measurable outcomes.

Discussion

01. Dan Russell


Thanks! Works great. I’m using Autotrack.js from a CDN. In case anyone else runs into this, Google Tag Manager does not support Subresource Integrity (SRI) attributes in the tag.

02. Fred Vaughn


Thanks for the write-up Adam – helpful. Question – why would you do this?: “Finally, save the tag without including any “Fire On” rules.”

03. Adam Ribaudo


Fred, if you look at Step 3 you’ll see that we instruct GTM to fire the autotrack.js tag after the GA Pageview tag fires. Therefore, we don’t need to set a ‘fire on’ trigger on the autotrack.js tag itself. In other words, the GA Pageview tag is responsible firing the autotrack.js tag.

04. Dries


Stumbled upon this post looking for a way to integrate autotrack & gtm.
Is there a reason why you’re not using the full tracker code in the custom script + you’re leaving out the allowLinker parameter?
I’m referring to a post form Simo: http://www.simoahava.com/analytics/access-the-tracker-object-in-your-page-view-tag/

05. Adam Ribaudo


Hi Dries, we don’t need the full tracker code in this example because I’m assuming that you’ve already fired a normal GA Pageview tag which will insert the code (and handle cross-domain linking if you so desire). This Custom HTML snippet creates a new tracker solely for the purpose of loading autotrack.js. Managing the entire Pageview tag in Custom HTML is painful and not very maintainable in the long term. Think, for instance, if you need to track 10 custom dimensions in that Custom HTML tag (yuck!).

06. Paul


Is there anything else I need to add? I want to just use the url change tracker. Following the instructions above does not show these as page views when the url changes in an SPA.

07. Adam Ribaudo


Paul, a new version of autotrack has been released. Did you follow the instructions in this post? https://www.noisetosignal.io/2016/08/google-analytics-autotrack-js-updated-see-whats-new/ if so, leave a comment there and we can look at it.

Also note that the autotrack SPA tracking doesn’t track hash changes to the URL

08. Young


Hi Adam,
What does ‘autotrack’ parameter in “ga(‘autotrackTracker.require’, ‘autotrack’);” mean ?
If I’d like to utilize cleanUrlTracker plugin, should I code like “ga(‘autotrackTracker.require’, ‘cleanUrlTracker’, options);” as the tutorial(https://github.com/googleanalytics/autotrack) says?

Leave a Reply



Home   Blog   Portfolio   Contact  

Bringing clarity to marketers in a noisy world © 2018