How to Detect Adblocker using Javascript

Deepanshu Bhalla Add Comment

This tutorial explains how you can detect if an adblocker is being used by your reader using Javascript. Ad Blocking extensions are used to stop showing annoying ads in the websites. It creates user-friendly experience to readers without ads but causes a significant proportion of revenue loss. The revenue loss to publishers due to use of adblocker is close to 15-25% of their earning.

Detect AdBlocker using Javascript

Lots of adblockers exist like AdblockPlus, AdBlock and AdGuard. To detect them, we need a solution that works for any ad blocker and any browser.

Once detected, the following program gives user a message to turnoff ad blocker. Refer the snapshot of alert message below.

Popup Message
Solution 1

The following Javascript checks if adsense ads are blocked from running by checking the size of the AdSense element.


function adBlocker() {
    setTimeout(function() {
        var ad = document.querySelector("ins.adsbygoogle");
        if (ad && ad.innerHTML.replace(/\s/g, "").length === 0) {
            myPopup();
        } else {
            myPopup();
        }
    }, 2000);
}

function myPopup() {
  var modalDiv = document.createElement("div");

  // Add styles
  modalDiv.style.display = "block";
  modalDiv.style.position = "fixed";
  modalDiv.style.zIndex = "1";
  modalDiv.style.left = "0";
  modalDiv.style.top = "0";
  modalDiv.style.width = "100%";
  modalDiv.style.height = "100%";
  modalDiv.style.overflow = "auto";
  modalDiv.style.backgroundColor = "rgba(0,0,0,0.4)";

  // Set inner HTML content for the modal
  modalDiv.innerHTML = `
    <div style="background-color: white; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); max-width: 400px; margin: 15% auto; padding: 20px;">
      <div style="padding: 15px; background-color: #f2f2f2; border-bottom: 1px solid #ccc;">
        <h2 style="margin: 0;">It looks like you are using an ad blocker!</h2>
      </div>
      <div style="padding: 15px;">
        <p style="margin: 0;">To continue reading, you need to turn off the ad blocker and refresh the page.</p>
      </div>
    </div>
  `;

  // Append the modal
  document.body.appendChild(modalDiv);

}

adBlocker();

Solution 2

The following Javascript checks if amazon ads are blocked from running.


function adBlocker() {
    try {
        fetch(new Request("https://c.amazon-adsystem.com/aax2/apstag.js", {
                method: 'HEAD',
                mode: 'no-cors'
            })).catch(error => {
		myPopup();
        });
    } catch (e) {
        myPopup();
    }

}

function myPopup() {
  var modalDiv = document.createElement("div");

  // Add styles
  modalDiv.style.display = "block";
  modalDiv.style.position = "fixed";
  modalDiv.style.zIndex = "1";
  modalDiv.style.left = "0";
  modalDiv.style.top = "0";
  modalDiv.style.width = "100%";
  modalDiv.style.height = "100%";
  modalDiv.style.overflow = "auto";
  modalDiv.style.backgroundColor = "rgba(0,0,0,0.4)";

  // Set inner HTML content for the modal
  modalDiv.innerHTML = `
    <div style="background-color: white; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); max-width: 400px; margin: 15% auto; padding: 20px;">
      <div style="padding: 15px; background-color: #f2f2f2; border-bottom: 1px solid #ccc;">
        <h2 style="margin: 0;">It looks like you are using an ad blocker!</h2>
      </div>
      <div style="padding: 15px;">
        <p style="margin: 0;">To continue reading, you need to turn off the ad blocker and refresh the page.</p>
      </div>
    </div>
  `;

  // Append the modal
  document.body.appendChild(modalDiv);

}

adBlocker();

How to Customize the Code

Replace the following script in the code with the script that the adblocker is blocking.

https://c.amazon-adsystem.com/aax2/apstag.js

If you are using blogger or any other blogging platform you can wrap the above CSS and Javascript code in the tags like below.

<script type="text/javascript">
  //<![CDATA[ 
YOUR JAVASCRIPT CODE //]]> </script> 
Related Posts
Spread the Word!
Share
About Author:
Deepanshu Bhalla

Deepanshu founded ListenData with a simple objective - Make analytics easy to understand and follow. He has over 10 years of experience in data science. During his tenure, he worked with global clients in various domains like Banking, Insurance, Private Equity, Telecom and HR.

Post Comment 0 Response to " How to Detect Adblocker using Javascript"
Next → ← Prev