Today I needed a way to detect an adblocker.
You might think why? In this case, I wanted to verify some user data with an external system, but adblockers will block this call (mainly ghostery).
So I tried and research ways to detect adblockers!
When doing my research, I came across several ways of which some in theory work, but not for all browsers/adblockers. Let me walk you through the options we have.
JavaScript onError callback
This method, I only found late in the game and is the solution I went for.
I like the simplicity, and it worked for by far the most combinations I tried!
So in the HTML we add the following:
<!-- Fake js script to inject, adblockers will block this script load -->
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
onerror="adBlockFunction();"
></script>
The idea is this script will be blocked by adblockers and if it does it will run the adBlockFunction.
So the function:
var adblocker = document.getElementById('adblock-message');
adblocker.style.display = 'block';
Then we can have a simple adblocker div which is hidden by default.
<div id="adblock-message" class="hidden">Sorry, you have your adblocker on!</div>
As mentioned, this way works for most combination of browsers/adblockers.
Alternative JavaScript method
Another way, you'll come across quite a lot if defining a JavaScript file like this:
<script src="/js/ads.js"></script>
inside:
var canRunAds = true;
And then have a JavaScript as such:
if (window.canRunAds === undefined) {
var adblocker = document.getElementById('adblock-message');
adblocker.style.display = 'block';
}
This is almost the same as solution one, but I found that it doesn't work with Adblock in the latest Chrome.
CSS Height
Another way, is by using a fixed "ad" in your html:
<div
id="detect"
class="ads ad adsbox doubleclick ad-placement carbon-ads"
style="background-color:red;height:300px;width:300px;position: absolute;left:0;top:0;"
>
</div>
This should be blocked by adblockers so if we then go and check for the height, it shouldn't work:
var testAd = document.getElementById('detect');
window.setTimeout(function() {
if (testAd.offsetHeight === 0) {
var adblocker = document.getElementById('adblock-message');
adblocker.style.display = 'block';
}
testAd.remove();
}, 100);
As mentioned very cool solution, but not rock solid!
Try them all on Codepen.
See the Pen Detect Adblockers by Chris Bongers (@rebelchris) on CodePen.
Other ways?
Let me know if you know of any other ways, without using any plugin!
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Top comments (14)
I would say that if a key part of functionality on your site is rendered inoperative by the presence of an adblocker, you're doing something wrong. It will look very unprofessional to ask them to switch off an adblocker in order to be able to use the site
AdBlockers kill the sign up process in JetPack for WordPress, and I've seen in countless other applications and websites besides.
Privacy Badger in particular is aggressive and effective, but it has controls.
Interesting. I've yet to come across a site that asks me to switch off an adblocker to sign up. To be honest, if I did, I'd think twice about signing up
No, it blocked the authentication of a Google Account with JetPack — no warning messages, nothing.
As I said, Privacy Badger is good but aggressive, and I've lost count of the number of times I've been sat staring at a blank patch on a web page wondering what's supposed to be there, or happen!
If you're using adblocking, check out the Independent, and you should see a warning, and there are more out there.
No warnings there. I use uBlock Origin
I always close a page when it needs me to turn off adblocker to do what i came to do.
Internet is infinite, my time and privacy are very finite, and once lost, impossible to get it back.
You are right, but from a marketing perspective you must understand adblockers might be too aggresive sometimes (I am 100% on your site as a browsing user, I do the same) but look at it from the builders point of view as well.
You just might not always be able to do the core of what you want too.
I mean some are just too aggresive in blocking anything external (which doesn't mean it's an ad!)
It happens a lot! it depends on the adblocker, but imagine you owning a marketing suite which is on a different domain, some ad blockers will block this!
Devil's marketing team
It truly is, I mean I hate sites who popup to disable my adblocker, but once you needed to build that one thing for a client that a adblockers blocks, it's just like oh shit...
Yes, at least it's good to know how it works. Thanks for the reading ;)
It could be worth coming at this from the perspective of interrogating the browser to see what extensions or plugins are installed — a quick Google revealed a few approaches.
Interesting! But i do think this doesn't go for all browsers right?
I know it was a thing in Chrome but also read they plan on disabling this again?
Some comments may only be visible to logged-in visitors. Sign in to view all comments.