How to Detect an Ad Blocker

By  on  

One of the unspoken rules of the internet is that most content is "free"... at the cost of webpage being littered with advertisements and trackers. This was't a big problem in the early internet days but trackers and advertisements have become so intrusive and unapologetically aggressive that you almost need to use an ad blocker browser extension.

Ad Blocker Plus is hugely popular and a browser like Brave boasts about being centered around ad blocking. Oftentimes I'll go to a site and see a modal as me to disable my ad blocker, which got me to thinking about the best way to detect an ad blocker. After a variety of tests and experimentation, I found a really simple way to detect an ad blocker!

Essentially my method attempts to load Google's ad service JavaScript file, and if the request fails, it's likely due to the user having an ad blocker:

// Determines if the user is likely using an ad block extension
async function checkAdBlocker() {
  // Used to cache the result
  let isBlocked;

  async function tryRequest() {
    try {
      return fetch(
        new Request("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", {
          method: 'HEAD',
          mode: 'no-cors'
        }))
        .then(function(response) {
          // Google Ads request succeeded, so likely no ad blocker
          isBlocked = false;
          return isBlocked;
        }).catch(function(e) {
          // Request failed, likely due to ad blocker
          isBlocked = true;
          return isBlocked;
        });
    } catch (error) {
      // fetch API error; possible fetch not supported (old browser)
      // Marking as a blocker since there was an error and so
      // we can prevent continued requests when this function is run
      console.log(error);
      isBlocked = true;
      return isBlocked;
    }
  }

  return isBlocked !== undefined ? isBlocked : await tryRequest();
}

// Using the ad block checker
const usingBlocker = await checkAdBlocker();

The logic behind this is as follows:

  • Google's ad file, adsbygoogle.js, is the perfect sample file, because it is considered enemy number 1 -- the first file an ad blocker would want to block due to Google's ad service popularity
  • The file is also paramount to Google's business so 99.999999999% uptime is practically guarateed
  • There's little chance a network issue would come into play; false positives may come from network connectivity issues or a bad service worker
  • If you don't consider adsbygoogle.js your best sample file, you can easily switching it out for any other URL

From a content creator perspective, a navigator property that would let you know if an ad blocker was employed would be ideal...but that isn't happening anytime soon (...never, really). Using simple snippets like this, however, provide a reasonable hint toward the user enabling an ad blocker!

Recent Features

  • By
    9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    CSS Ellipsis Beginning of String

    I was incredibly happy when CSS text-overflow: ellipsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation.  CSS ellipsis was also very friendly to...

  • By
    Morphing Elements Using MooTools and CSS

    Morphing an element between CSS classes is another great trick the MooTools JavaScript library enables you to do. Morphing isn't the most practical use of MooTools, but it's still a trick at your disposal. Step 1: The XHTML The block of content that will change is...

Discussion

  1. Using this code to “know” if your end user has an ad blocker installed is handy information… however what are you going to do with that information?

    If your intent is to alienate your audience by holding your content hostage until they whitelist your site… you will find that you will quickly lose that audience. If you want to place subtle hints, go for it, but putting up physical blockers causes tension, frustration and anger (and won’t get any adblock users to whitelist you).

    • @Stephen, It is not necessary to ask users to whitelist you (although this is not bad, in my opinion), and even more so to demand something and block content. You can, in case of detection of Ad Blocker, insert alternative advertising (a referral link to some service that you use or something similar).

      Indeed, in fact, the majority of users of ad blockers are not against advertising in general, but against intrusive, excessive, and inappropriate advertising.

      But it so happened that after installing the blocker, you don’t need to blacklist each site you visit – they are all already in it. Both that have more advertising than useful content, and those that do everything to not inconvenience their visitors.

  2. content editor

    Stephen, why should we share our content with you if you’re not willing to pay neither accept ads ? Just please give me one single reason.
    Philanthropy ?

  3. How more accurate is this method compared to simple analysis of HTML elements? Making an extra request is not good, I think.
    I use a very simple thing in my projects:

    window.onload = function() {
    	setTimeout(function() {
    		var ad = document.querySelector("ins.adsbygoogle");
    		if (ad && ad.innerHTML.replace(/\s/g, "").length === 0) {
    			//blocked
    		} else {
    			// not blocked
    		}
    	}, 2000); // here is 1 or 2 secs delay
    };
    

    I really did not test it thoroughly, but it seems to work fine.

  4. Mickey Aharony

    I have two ad blockers running. I find sites detect ad blocker (plus) but the second one I use goes undetected. Or vice versa.

  5. Captain

    Whichever method is used, it’s easy enough to just disable javascript for the page and enjoy the ‘unscripted’ page. Re-enable when you leave and annoying “Do this or else…” messages are gone.
    All these methods for detecting ad-blockers have an Achilles Heel by relying on javascript loading to detect if javascript is loading or not. Javascript is thankfully 100% unnecessary for most sites that try to block you before you can read the page.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!