#GTMTips: Send Page Visibility State to Google Analytics

One of my pet peeves about Google Analytics has to do with nomenclature. For example, a User isn’t really a user but a browser instance, and Direct traffic isn’t necessarily “direct” at all, but rather just traffic that has no discernible source. But being so invested in content analytics, my biggest gripe has to do with Pageviews.

A Pageview in Google Analytics is collected when a hit with the hit type pageview is received successfully by the Google Analytics endpoint. This hit is dispatched most often with a JavaScript library such as Google Tag Manager or gtag.js.

The problem with the name is that it doesn’t really tell you at all whether the page was viewed or not. It just tells you that a line of JavaScript was executed on the page.

Luckily, pageviews aren’t typically at the top of the list of Most Actionable KPIs, but you still see them being referenced especially in journals that rely on clicks rather than engagement.

With this #GTMTips post (my one hundredth!), I want to show you an extremely simple way of adding this crucial metadata of page visibility to your Google Analytics hits, so that you can segment your data for qualified pageviews, and maybe even ignore events that happen when the page is not visible.

Tip 100: Send page visibility state as a custom dimension to GA

The steps are simple:

1. Create a Hit-scoped Custom Dimension in Google Analytics, and make note of its index.

2. In Google Tag Manager, create a new JavaScript variable for document.hidden (see below).

3. Then, still in GTM, edit your Google Analytics Settings variable, and add a new Custom Dimension with the index from step (1) and the variable from step (2).

This is what the JavaScript variable looks like:

Note the Format Value settings. You need to cast the Boolean true and value (returned by document.hidden) into their string counterparts "true" and "false". Otherwise analytics.js has the annoying habit of converting Booleans to 1 and 0 which makes the reports difficult to intepret.

The document.hidden property is nicely supported by all the major browsers.

You don’t have to add the Custom Dimension to all your hits, but I personally think it makes sense. Why qualify just the pageviews? Events can happen “off-viewport” too, and it might make sense to focus only on the ones that happen in an active browser window. This is what the Google Analytics Settings variable would look like, assuming the index of the Custom Dimension is 13 and the variable name is {{document.hidden}}:

Finally, I’m not illusioned enough to think that this somehow “fixes” anything. Collecting visibility state doesn’t guarantee that the user is actually viewing anything, as they might be fetching their cup of coffee or dozing off in front of the screen. But I’m pretty convinced that this is an improvement especially when you want to consider pageviews to be true to their name.

So, that’s one hundred GTM tips all done. And it took me almost five years. I promise to get the next hundred done much, much faster!