As a publisher that is highly dependent on ad revenue, it is important to know how many people are blocking your ads with a browser extension as AdBlock. It it possible to track how many users are using this software in Google Analytics with some help from the Google Tag Manager.
The trick is loading some Html which is blocked by AdBlock. With some Javascript we detect if this Html is blocked whether or not. I have used a solution that is mentioned on Stackoverflow.com.
First we have to create a new Custom Html tag. Inside it we have our fake Advertisement.
|
1 |
<div id="bottomAd" style="font-size: 2px;"> </div> |
After this we include jQuery, and our script to dectect if our fake advertisement is shut down by determining the height of our div.
We wil fire this tag on All pages.
And the code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div id="bottomAd" style="font-size: 2px;"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready( function() { window.setTimeout( function() { var bottomad = $('#bottomAd'); if (bottomad.length == 1) { if (bottomad.height() == 0) { dataLayer.push({'event': 'adBlock', 'adBlockDetected': 1 }); } else { dataLayer.push({'event': 'adBlock', 'adBlockDetected': 0 }); } } }, 1); }); </script> |
Code explanation
If our fake advertisement is reduced to a height of zero there’s an AdBlocker in town. When this is the case we would update our dataLayer. We instantiate a new event called adBlock and set adBlockDetected to 1. When there isn’t a Adblocker we set adBlockDetected to 0.
|
1 2 3 4 5 6 7 8 |
if (bottomad.height() == 0) { dataLayer.push({'event': 'adBlock', 'adBlockDetected': 1 }); } else { dataLayer.push({'event': 'adBlock', 'adBlockDetected': 0 }); } |
To retrieve the value of our updated dataLayer we could create a new Data Layer variable. We are searching for the adBlockDetected variable name. Besides we set a default value of 0 in case the variable isn’t updated.
Next step is setting up a new trigger based on a Custom Event. We will fire it when our event, named adBlock, occurs.
To store the information we could use Google Universal Analytics. With a custom dimension it is possible to store this info on a User scope.
Browse in the Google Universal Analytics admin to Custom Dimensions. Create a new Custom dimension here. Set the scope to User and make it active.
After creating it, we have to remember the index. In my example it is number 9.
Now we have set the Custom Dimension we could use it to setup our Google Universal Analytics tag.
Set Non-Interaction Hit to True. Because this event should not affect your bounce rate. Tap More settings and add the below given settings. Use your own index number!
Fire this tag with our Event – Adblock trigger.
Test if everything works fine.
Now our info will be stored in Google Analytics after a couple of hours (about three)!
I do consider all the concepts you’ve offered in your post.
They’re very convincing and can definitely work. Nonetheless, the posts are very short for beginners.
Could you please lengthen them a bit from next time?
Thanks for the post.
For sure! I’m trying to find a balance between the length of a post and the amount of info to keep it readable for non-beginners. I will serve additional explanations on a later moment!
Marthijn thanks for the good explanation!
Really nice post!
One caveat, what if the blocker e.g. UBlock blocks Google Tag Manager?
This method does not cover that problem.
I have written a new blogpost about this subject. Check it out here https://marthijnhoiting.com/detect-if-someone-is-blocking-google-analytics-or-google-tag-manager/
I have written a new blogpost that will solve this issue. https://marthijnhoiting.com/detect-if-someone-is-blocking-google-analytics-or-google-tag-manager/
Hi Marthijn, Thanks for this post. We’ve used it, and improved it a little bit so we have not dependency for jQuery. Also, we are working on a series of posts to get more insights on the people that use ad-blockers. You might want to cvheck it out at http://www.themarketingtechnologist.co/our-first-insights-in-the-ad-blocking-consumer/. Thanks again :).
Hi Siebe, thanks for mentioning. I think removing the jQuery dependency is a good improvement. P.s. The anchor text of your link to this blogpost is misspelled 😉
What’s the best way to test all this??
Hi Marthijn,
this is a nice one! Haven’t test it yet but does the custom HTML also working with an older jquery libary?
Thank you!
Hi Marthijn,
I have used your method on several websites and always see 0.01% of Internet Explorer users using Adblock. Do you have any idea what the problem can be?
It seems to work fine with other browsers (18% on Firefox).
Thanks
Michael
Interesting, maybe there is no adblock add on for IE? I will take a look at that.
Another reason could be that the typical Adblock user isn’t using Internet Explorer anymore.
Yeah, I was expecting a lower percentage but almost 0% seems low, considering that adblock seems to be available (https://adblockplus.org/en/internet-explorer)
Do you get the same kind of results on your website ?
Thanks for sharing, Marthijn!
Why would you need the if (bottomad.length == 1) and window.settimeout though? Shouldn’t if(bottomad.height == 0) be sufficient? And what’s the point of delaying your code for 1 millisecond.
Hi David, to prevent javascript errors, just in case jQuery wasn’t loaded.
For the timeout i have to refer to the Stackoverflow topic:
Thanks for getting back to me,Marthijn! I’m testing the implementation right now.