Autotrack is a JavaScript library built on top of analytics.js that makes it easier for web developers to track the user interactions that are common to most websites.

To help you get an idea of what the data collected by autotrack might look like, this demo includes visualizations of the actual data captured by using autotrack on this site.

Outbound link tracking

The table below shows the top ten links visitors to this site have clicked on in the last seven days. Autotrack uses events to track outbound link clicks and sets the event label to the link's URL.

Declarative Event Tracking

To make capturing events easier, autotrack supports declarative event binding. Demos & Tools uses this technique on the sign-in and sign-out buttons to help track the usage of those features.

Here's an example of what declarative event binding looks like for the sign-out button:

<button
  data-event-category="User"
  data-event-action="signout">
  Sign Out
</button>

And the following table shows the actual usage data for these buttons on this site:

Media query tracking

The Demos & Tools site tracks media query usage for the following categories:

Breakpoints:

The screen sizes where the site layout changes to fit the content (resize your browser window to see this in action).

Resolution:

The popularity of high-dpi screens (such as retina displays) is increasing. It's useful to know whether your user's screens have such capabilities, so you can build your site accordingly.

Orientation:

How you decide to design your site's layout may be influenced by whether your users view your site primarily in landscape or portrait mode.

As you can see from the pie charts below, most Demos & Tools users are on large screens, at regular resolution, in landscape mode:

The tables below outline how each of the media query values are defined:

Breakpoints

Resolution

Orientation

For more information on how to configure media query tracking for your site, refer to the mediaQueryTracker configuration section of the autotrack documentation.

Media query change tracking

If you're tracking media query values, it's often useful to know if and when those values change. Autotrack captures this information as well by sending an event any time a media query stops matching one value and starts matching another, it also updates the tracker object so subsequent hits are associated with the correct media value.

This chart shows how frequently the breakpoint media query values changed on this site over the last seven days as well what breakpoints were most commonly changed to/from:

Getting started with autotrack

To you use autotrack on one of your own sites, the best place to start is the usage documentation on Github. To see an example implementation from Demos & Tool, check out the source code.