Making Cross-Client Google Analytics Tracking Easy with Trackomatic

Albert Wavering, Former Digital Analyst

Article Categories: #Strategy, #Data & Analytics

Posted on

We do a lot of analytics work here at Viget. As we set up Google Analytics tracking on websites, we often find ourselves repeating the same setups across clients. To keep ourselves DRY and reduce our setup time, we’ve standardized some of this cross-client tracking into a JavaScript file we call Trackomatic.

Why use it?

To start, Trackomatic contains many of our best-practice analytics customizations by tracking viewport size, clicks on files, site exits, JavaScript errors, and some other metrics.

Although many of these customizations can be implemented in Google Tag Manager, this single JavaScript file is safer and faster than manual setup in GTM. It also gives us an easy tool to use if a client doesn’t want to install GTM. If we do use GTM, it keeps the container a little cleaner by reducing the total number of tags.

With a single JavaScript file handling our default tracking across clients, we can make instant changes to our analytics setup. If we want to track a new social media network across all our sites, we only have to change the syntax in trackomatic.js, and our tracking will be updated wherever we have Trackomatic installed.

Here are the events we track:

Generic Click Tracking: Trackomatic fires a Google Analytics event when it detects one of the following five events:

File clicks

  • Category: "File Click"
  • Action: link hostname
  • Label: link URL

Outbound clicks

  • Category: "Site Exit"
  • Action: link hostname
  • Label: link URL

Social Media clicks

  • Category: "Social Media Click"
  • Action: link hostname
  • Label: link URL

Email clicks

  • Category: "Mailto Click"
  • Action: link hostname
  • Label: link URL

Telephone clicks

  • Category: "Telephone Click"
  • Action: null
  • Label: telephone number

Viewport Size: GA already tracks screen resolutions, but many people size their browser to only take up part of their screen, which can impact how content displays. Trackomatic fires an event when the page loads with details of viewport size and ratio.

  • Category: “FED Viewport Size”
  • Action: Viewport width rounded to nearest 100px
  • Label: Viewport Ratio

Viewport Resize: when a visitor resizes their browser, Trackomatic fires an event with additional details.

  • Category: “FED Viewport Resize”
  • Action: “FED Resize Height” or “FED Resize Width”
  • Label: “taller”, “shorter”, “wider”, or “narrower”

JavaScript Errors: when an on-page script throws an error, we send some basic diagnostic information back to GA.

  • Category: “FED JavaScript Error”
  • Action: Error Message
  • Label: Error URL _ Error Line

First Input Method: after filtering out inputs used for scrolling, what is the first input type used on a webpage?

  • Category: “FED First Input”
  • Action: “mousedown” or “keydown”
  • Label: event.keyCode

Trackomatic is meant to provide baseline tracking across many different websites; however, it’s also useful to have some flexibility in the way it tracks events. For details about customizing these events for your website, see the “How do I configure it?” section below.

Trackomatic.js also makes certain internal utility functions public by way of the global js object called _trackomatic. The following functions are available under _trackomatic.util:

  • createCookie - writes a cookie
  • readCookie - reads a cookie
  • getURLParam - gets the value of the URL parameter passed to it
  • getPathname - gets the pathname of the URL passed to it
  • proper - turns any string into a properly capitalized string
  • slugify - turns any string into a slug
  • debounce - limits the number of events we send per second, so that we don’t fire unnecessary events.

How do I use it?

Plugins can’t (yet) be used with the prebuilt GTM GA tag, so you have to use a custom HTML tag or hardcode Trackomatic on the page within the GA JavaScript tag.

Installation is as simple as loading the trackomatic.js file in your header or footer and instantiating the plugin within your GA snippet, like this:

 ga('create', 'UA-XXXXX-Y', 'auto');
ga('require', 'trackomatic');
ga('send', 'pageview');

For best performance, we recommend rehosting trackomatic.js from a CDN endpoint like Amazon’s S3.

How do I configure it?

We realize that not everyone wants to track the same file types, and that’s okay. We added the ability to customize some of the tracking by using the _trackomatic.config object. To implement this functionality, include a third parameter in the plugin require statement, like so:

 ga('require', 'trackomatic', {files: '\.pdf|\.docx|\.pptx', networks: 'reddit\.com', redirectDelay: 100});

There are currently three configuration options:

files: takes a regex of file extensions to check against, and fires an event on click. If no files are specified, Trackomatic will check for .pdf files only.

networks: takes a regex of social media network URLs, and fires an event on click. If no networks are specified, Trackomatic will track the following networks:

  • Facebook
  • Twitter
  • Instagram
  • LinkedIn
  • Pinterest
  • Tumblr
  • Google Plus

redirectDelay: to make sure our tracking data reaches Google’s servers before a page reloads, Trackomatic adds in a small delay before loading the new page. By default, this delay is 100 milliseconds. You can make it longer or shorter if you prefer.

Although we’re releasing Trackomatic to the public today, we’re not done building it yet. We want to add tracking for events such as video interactions, Optimizely experiments, and on-page scrolling. If you think a feature would be useful to have in Trackomatic, add it to our list of issues on Github.

Related Articles