Noise to Signal

◂ Blog

Google Analytics Autotrack.js Updated – See What’s New

On August 2nd, Google announced the release of an updated and much improved autotrack.js plug-in that solves many common challenges that people face when implementing Google Analytics. One major change is that the autotrack library is broken out into 9 different discrete plug-ins that can be included in your solution independently of one another through the “Require” command. While there is thorough documentation from Google, I couldn’t find a nice concise description of each plug-in so I’ve provided that here.

  • Clean URL Tracker – Helps you establish a single, canonical URL path for each page. Avoids common issue of pageviews being split between page paths with and without a trailing slash or query string at the end. 
  • Event Tracker – Allows content authors who have access to updating HTML, but not JavaScript, to define HTML elements that should fire GA events. Useful for tracking clicks on elements within a blog post.
  • Impression Tracker – Fires an event once a specified HTML element is visible in the browser. Utilizes a more recent browser API command called “IntersectionObserver” which is native to Chrome 51+ but requires additional JS files to support other browsers.
  • Media Query Tracker – Stores media query information such as breakpoints, resolution, and orientation in GA custom dimensions. Allows reporting on which version of a responsive website users are viewing.
  • Outbound Form Tracker – Detects when a form submission is about to bring the user to an exernal site and fires an event.
  • Outbound Link Tracker – Detects when a user clicks on a link pointing to an external website and fires an event.
  • Page Visibility Tracker – Addresses issues that arise when users leave tabs open for extended periods of time. Without this enabled, a user who views your site, changes tabs, and comes back 30 minutes later will appear as 1 pageview and 1 session. With this plug-in enabled, a new pageview and session will be started when the user returns to your tab after 30 minutes. 
  • Social Widget Tracker – Fires a social interaction hit when users interact with the default Facebook & Twitter buttons
  • URL Change Tracker – Resolves a common issue present in single-page-websites: tracking pageviews on URL change. Detects changes in the URL and automatically sends new pageviews.

As covered in a previous post, you can use Google Tag Manager to deploy any plug-ins that can be fired *after* the pageview hit. In other words, plug-ins like outboundFormTracker are fine, but the cleanUrlTracker will not work with this method. Here is the custom HTML tag that I have set up in Google Tag Manager:

 ga(function() {ga.create('{{GA Property ID}}', 'auto', 'autotrackTracker');});
 //Tracks how long pages are visible / hidden when browser tabs change
 ga('autotrackTracker.require', 'pageVisibilityTracker', {
 hiddenMetricIndex: 1,
 visibleMetricIndex: 2
 //Track impressions on the home page contact form
 ga('autotrackTracker.require', 'impressionTracker', {
 elements: ['contact-15-wp']
 ga('autotrackTracker.require', 'outboundLinkTracker');
<script type="text/javascript" src="/static/autotrack.js"></script>

As I covered in the previous post on autotrack.js, I created a dummy tracker called “autotrackTracker”, called “require” on that tracker to load the plug-ins, and set this tag to fire after the completion of the main GA pageview tag.

Have a unique implementation of autotrack.js that you want to share? Let me know in the comments!


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.


01. THomas Bosilevac

Have you been able to get the PageVisibility plugin to also work with GTM? If so I would be interested as to what settings you used. I am having difficulty getting that portion to work.

Leave a Reply

Home   Blog   Portfolio   Contact  

Bringing clarity to marketers in a noisy world © 2023