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.
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.
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();
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();
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>
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.
Share Share Tweet