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.
- 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:
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!