DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Detect Adblockers
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Detect Adblockers

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>
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

inside:

var canRunAds = true;
Enter fullscreen mode Exit fullscreen mode

And then have a JavaScript as such:

if (window.canRunAds === undefined) {
  var adblocker = document.getElementById('adblock-message');
  adblocker.style.display = 'block';
}
Enter fullscreen mode Exit fullscreen mode

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;"
>
  &nbsp;
</div>
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
jonrandy profile image
Jon Randy

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

Collapse
 
octaneinteractive profile image
Wayne Smallman

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.

Collapse
 
jonrandy profile image
Jon Randy

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

Thread Thread
 
octaneinteractive profile image
Wayne Smallman • Edited on

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.

Thread Thread
 
jonrandy profile image
Jon Randy

No warnings there. I use uBlock Origin

Collapse
 
pavelloz profile image
Paweł Kowalski

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.

Thread Thread
 
dailydevtips1 profile image
Chris Bongers Author

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.

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

I mean some are just too aggresive in blocking anything external (which doesn't mean it's an ad!)

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

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!

Collapse
 
paul_melero profile image
Paul Melero

Devil's marketing team

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

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...

Collapse
 
paul_melero profile image
Paul Melero

Yes, at least it's good to know how it works. Thanks for the reading ;)

Collapse
 
octaneinteractive profile image
Wayne Smallman

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.

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

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.

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.