Considering how complicated it would be to do this otherwise, this is quite simple – only two steps:

But can you see it? You won’t until you scroll down and it comes into view in the browser. And if you watch your Javascript console, you will see that an event fires when you can see 90% of the button.

This is an example of how the Impression Tracker works. The browser technology behind Impression Tracker is called the Intersection Observer API.This recent addition to Firefox and Chrome provides information about how much of an element is visible on the page. It is experimental and not available in all browsers yet. But luckily, Autotrack.js solves this with a polyfill to accommodate older browsers.

The Impression Tracker feature solves a problem that many CROs and publishers face. This plugin allows you to capture an event when an element becomes visible on the page (and to the user). This means answering whether a user has truly seen an advertisement (true-view impression) or determining if an important CTA button is ever visible to a user – providing one more data point in a conversion funnel.

Media Query Tracker

You don’t have to look very deep into Google Analytics to recognize how a user’s device impacts their behavior. This plugin extends that insight into something that is much more actionable to you and your designers.

The Media Query Tracker collects three data points: it fires an event when the layout changes in a responsive design (based on breakpoints) and records the layout as a custom dimension, it records the device resolution as a custom dimension, and it records the device orientation (for phones and tablets) as a custom dimensions. This helps answer not only the “what” behavior differences associated with device types, but also the “why.”

Let’s Measure Bootstrap Breakpoints

To demonstrate this, let’s see what happens when you resize the width of your browser. At the point that the browser window is narrow enough to apply the “Medium” layout (aka less than 992px, aka Bootstrap’s “md”), then an event will fire. The category for this event will be “Breakpoint,” and it will have custom dimensions defined by the breakpoint values, the screen resolution, and the screen orientation. Try it!

Implementing Media Query Tracker

It looks like a lot of code to implement this plugin but if you know the breakpoints of your site’s layout, it’s quite easy – just assign custom dimension names and values and define rules for when a breakpoint is crossed. Below is the code that is used on this page. It starts with loading the plugin and then customizes the plugin’s settings below. These breakpoint settings are based on the Bootstrap CSS framework that this page uses.

ga('require', 'mediaQueryTracker', { definitions: [ { name: 'Breakpoint', dimensionIndex: 10, items: [ {name: 'xs', media: 'all'}, {name: 'sm', media: '(min-width: 768px)'}, {name: 'md', media: '(min-width: 992px)'}, {name: 'lg', media: '(min-width: 1200px)'} ] }, { name: 'Resolution', dimensionIndex: 11, items: [ {name: '1x', media: 'all'}, {name: '1.5x', media: '(min-resolution: 144dpi)'}, {name: '2x', media: '(min-resolution: 192dpi)'} ] }, { name: 'Orientation', dimensionIndex: 12, items: [ {name: 'landscape', media: '(orientation: landscape)'}, {name: 'portrait', media: '(orientation: portrait)'} ] } ] });