How to Track Ad Block Usage in Google Analytics through Google Tag Manager

In this guide, I’ll walk you through how to add track sessions that have ad blocking enabled, through Google Tag Manager (GTM) and Google Analytics (GA).

Here’s a glance, similar to what you will see in your Google Analytics profile, after implementing the tag and variable in GTM.

Data Preview

Step 1

Click into your container.

Step 2

Create a new Tag, as Custom HTML.

[sourcecode type=”javascript”]
<script>
(function() {
var ad = document.createElement(‘ins’);
ad.className = ‘AdSense’;
ad.style.display = ‘block’;
ad.style.position = ‘absolute’;
ad.style.top = ‘-1px’;
ad.style.height = ‘1px’;
document.body.appendChild(ad);
window.isAdBlockEnabled = !ad.clientHeight;
document.body.removeChild(ad);
return window.isAdBlockEnabled;
})();
</script>
[/sourcecode]

This Javascript snippet will create a 1×1 ad unit that will always be triggered by an adblocker. It checks to see if the unit was able to be created and has a height, and if it doesn’t, then it was blocked and therefor adblocking is enabled. By using window, we can set a global scope variable instead of a local scope variable.

Step 3

You want to enable this code to fire just before the Google Analytics tag fires. You can set this in your Google Analytics tag.

Click into Advanced Settings and make these adjustments.

Enter 9999 for the tag firing priority. This will ensure that your Google Analytics tag has the highest priority in the container, to fire first.

Set the Tag firing options to be Once per event.

Under Tag Sequencing, enable the option for “Fire a tag before…” (this label includes what you called your Google Analytics tag)

Under Setup Tag choose the tag you created in Step 2.

Step 4

Create a new Javascript Variable.

This variable will be used in the next step to actually populate the data from the Custom HTML Javascript tag you created in Step 2.

[sourcecode type=”javascript”]
function() {
return window.isAdBlockEnabled;
}
[/sourcecode]

Step 5

We need to create the custom dimension in Google Analytics so we that we an properly store the data from GTM.

At your Google Analytics Property-level (not Account, not View), click into Custom Definitions. This will expand a menu where you can click into Custom Dimensions.

Create a new dimension.

I labeled mine with isAdBlocked as an affirmative so 1 will be yes, and 0 will mean no, in the data.

Set the Scope to Session and set it to be active.

Take note of the Index number, where mine is 1, which will be used when inputting this into the Google Analytics tag in GTM.

Head back to GTM and open up the Google Analytics tag you created in Step 2.

Step 6

Enter the index number that was generated when you created a new Custom Dimension.

Click into More Settings, then Custom Dimensions. You will enter the number from Google Analytics — mine is “1” — and then click the + icon next to the Dimension Value input box.

This is where you will input the Javascript Variable you created earlier in Step 4. I named my variable isAdBlockEnabled so when I select that variable, it results in {{isAdBlockEnabled}}.

The

last step

is to publish the changes. It’s always a good idea to double check all the settings, the variable, the tags, to make sure they are configured correctly.

Submit the changes into production for your site.

To view the data being recorded from GTM into GA, open your GA view for your site.

I like to go to Acquisition > All Traffic > Source/Medium

But wait, I don’t see isAdBlocked .. where is it?

You must add a second dimension to the view each time to view the data being collected, like this.

NOTE this data will not and cannot be retro-active. I left myself an annotation for that day when I added the code to GTM so I could more easily see when I started tracking the data.

H/T to a few fellow bloggers for helping with the ground work for this tutorial. Simo and Kaushik.