How to Detect if an Adblocker is Being Used with JavaScript

It is common for prosumers and technical individuals, such as programmers, to utilize adblockers. On my website, I estimate that around 20% to 25% of visitors use some form of adblocker. While I have no issues with this, as I support the blog using ads, I wanted to implement a strategy that promotes one of my own products only to those with adblockers enabled. This way, instead of seeing ads from Carbon, the network I use, they will see a link to something I want to promote.

It is important to note that I do not recommend using this technique to display a “disable the adblocker!” message, as it can be annoying for users. If you choose to implement this strategy, consider promoting your own products instead of advertising other companies’ products. It’s just an idea to enhance the user experience.

If you have an adblocker enabled right now, you can see a “Sponsor” right after the title. That is the product I am promoting—it’s something I am currently building and testing by monitoring the number of sign-ups on the waiting list. Without an adblocker, that space is occupied by an ad. I don’t want to overload the page with too many ads, which could negatively impact the experience for the kind people who help keep this blog running.

To achieve this, I use the following JavaScript snippet:

let adBlockEnabled = false;
const ad = document.createElement('div');
ad.innerHTML = '&nbsp;';
ad.className = 'adsbox';
document.body.appendChild(ad);
window.setTimeout(function() {
  if (ad.offsetHeight === 0) {
    adblockEnabled = true;
  }
  ad.remove();
  console.log('Blocking ads? ', adblockEnabled);
}, 100);

Ensure that you place this snippet at the bottom of the page to run it when the DOM is loaded, or wait for the DOMContentLoaded event.

Once you know the value of adblockEnabled, you can add your own custom ad to the page. Here’s the script I use for that:

if (adblockEnabled) {
  const link = document.createElement('a');
  link.setAttribute('href', 'https://flaviocopes.com');
  link.setAttribute('target', '_blank');
  const img = document.createElement('img');
  img.src = '/img/image.png';
  img.style.paddingBottom = '30px';
  img.style.margin = '0 auto';
  img.style.maxWidth = '65%';
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    img.style.filter = 'invert(100%)';
  }
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    const newColorScheme = e.matches ? 'dark' : 'light';
    if (newColorScheme === 'light') {
      img.style.filter = '';
    } else {
      img.style.filter = 'invert(100%)';
    }
  });
  link.appendChild(img);
  document.querySelector('.promotion').classList.remove('hidden');
  document.querySelector('.promotion').appendChild(link);
}

In this script, I load an image and invert it if the user is in dark mode. The image is then transformed into a link that directs to the https://flaviocopes.com website. Finally, I add the image to the page.

Tags: adblocker detection, JavaScript, web development, website monetization

How to Detect if an Adblocker is Being Used with JavaScript#

How to Detect if an Adblocker is Being Used with JavaScript