How To Detect ad-blocker Using Mutation Observer API ?

Last Updated : 15 Apr, 2025

Ad blockers are browser extensions or tools that prevent ads from displaying on web pages. While they provide a cleaner user experience, they can impact website revenue for publishers who rely on ad income.

Detecting ad blockers allows websites to request users to whitelist them or provide alternative monetization options. One effective way to detect ad blockers is by using the Mutation Observer API in JavaScript which gives the developers access to monitor changes in the DOM (Document Object Model).

Table of Content

Key features of Mutation Obserever API

Overview of Ad-Blocker Detection

Ad-blockers have a function that blocks or removes elements associated with ads, such as <iframe>, <div>, and <script> tags. By using the Mutation Observer API, you can monitor these elements for removal or alteration and take appropriate action when such changes are detected.

What is Mutation Observer API?

The Mutation Observer API provides a way to asynchronously observe changes in the DOM tree. This includes the changes to attributes, child elements, and text content. It is particularly useful for detecting dynamic modifications to the DOM made by the ad-blockers

Key features of Mutation Obserever API:

Asynchronous Observation: It operates in an asynchronous manner, which means it won't block the main thread while monitoring DOM changes.
Wide Scope: It can be used to observe changes to child elements, attributes, and text content within the DOM.
Callback Function: The API triggers a callback function whenever a change is detected, enabling developers to respond in real-time.

How Ad-Blockers Affect DOM Elements?

Ad-blockers typically work by either blocking or removing elements in the DOM that are associated with ads. This can include elements that are hiding with specific class names or entirely removing ad-related <script> tags.

Detecting DOM Modifications by Ad-Blockers

Using the Mutation Observer API, you can monitor these modifications and detect when an ad-blocker is at work. This allows you to take appropriate action, such as notifying the user or loading alternative content.

Ad-blockers usually work by blocking or removing elements associated with ads. Such examples includes

<iframe>
<div>
<script>

. By using the Mutation Observer API, you can monitor for the removal or alteration of these elements and take appropriate action if they are found to be used.Now lets see the implementation of the mutation observer api to dedect the ad blockers with a simple example.

Steps To Detect Ad-Blocker

Follow the below folder struture for your project:

Since the project involves in tracking the ad block in the frontend of the website, for simplicity purposes, we are not using any backend functionalities and hence no dependencies required.

Step 1:

Create an Element to Observe the changes made by the ad-blocker. Firstly, create a dummy ad element that you expect to be removed or hidden by an ad-blocker.

HTML

<!DOCTYPE html> <html>  <head>     <title>Page Title</title> </head>  <body>     <div id="ad-container">         <p>This is a sample ad</p>     </div> </body>  </html>

Step 2:

Initialize the Mutation Observer for tracking the changes in the HTML tags.Set up the Mutation Observer to watch for changes in the ad element.

JavaScript

// Select the target node (ad element) const adContainer = document.getElementById('ad-container');  // Callback function to execute when mutations are observed const callback = function (mutationsList, observer) {     for (let mutation of mutationsList) {         if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {             console.log('Ad-blocker detected: Ad element was removed.');             // Take action, e.g., show a message or alternative content         }     } };  // Create an observer instance linked to the callback function const observer = new MutationObserver(callback);  // Start observing the target node for configured mutations observer.observe(adContainer, { childList: true });

Step 3:

Handle the Ad-Blocker Detection.When the ad element is removed successfully, the Mutation Observer's callback function will be trigger. You can then display an appropriate message to the user or load alternative content.

JavaScript

const showMessage = () => {     const message = document.createElement('div');     message.innerText = 'We noticed you are using an ad-blocker.      Please consider disabling it for our site.';     document.body.appendChild(message); };  const adContainer = document.getElementById('ad-container');  const callback = function(mutationsList, observer) {     for (let mutation of mutationsList) {         if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {             console.log('Ad-blocker detected: Ad element was removed.');             showMessage();         }     } };  const observer = new MutationObserver(callback); observer.observe(adContainer, { childList: true });

Step 4:

Handle the Attribute Changes.You can also monitor for changes to attributes of the ad element. This can detect cases where an ad-blocker hides the element instead of removing it.This is a rare case and if you are really dependent on the ads for your websites to run and you are afraid of keen users, you can make use of this step.

observer.observe(adContainer, { attributes: true, childList: true });