How to Detect an Ad Blocker

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 […]

The post How to Detect an Ad Blocker appeared first on David Walsh Blog.

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!

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn’t a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven…

  • 5 HTML5 APIs You Didn’t Know Existed

    When you say or read “HTML5”, you half expect exotic dancers and unicorns to walk into the room to the tune of “I’m Sexy and I Know It.”  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature…

  • Image Reflections with CSS

    Image reflection is a great way to subtly spice up an image.  The first method of creating these reflections was baking them right into the images themselves.  Within the past few years, we’ve introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without…

  • Create Your Own Dijit CSS Theme with LESS CSS

    The Dojo Toolkit seems to just get better and better.  One of the new additions in Dojo 1.6 was the use of LESS CSS to create Dijit themes.  The move to using LESS is a brilliant one because it makes creating your own Dijit theme…

Rojenx is a leading concept artist who work appears in games and publications

Check out his personal gallery here

This site uses Akismet to reduce spam. Learn how your comment data is processed.