How to detect Adblocker using JavaScript ?
Last Updated :
05 Mar, 2021
In this article, we will be developing an adblocker detector using JavaScript. Adblocker is an extension that is used to block the ads which are served by the website. Adblocker blocks the DOM and the script which has the code to show ads. The adblockers have massive data of blocklist file names and the adblockers detect if the website is using any files from them, It restricts that file from downloading, so the ad script does not load. easylist.text is a huge list of blocklists that contains most of the adblocking file names.
According to a survey, 10% of people use adblocker for browsing with any ads. It means 10% less revenue by the website. This is sad for the websites that solely rely on ads, some of them use adblocker detecting script and restrict the user to enter the website without disabling the adblocker (But this is a bad idea from an SEO point of view).
Detect adblocker using bait script: In this method, you have to create a div with the class name ad-zone. Make the div 1px height. Now write a script that checks if the offset height of parent div becomes zero, then the user is using an adblocker. The adblocker blocked that div from rendering, so the offset height becomes zero. If the offset height of the div remains unchanged then there is no adblocker present in the browser. The reason is the class name ad-zone, the adblocker used to inspect which element has the class name that looks like an ad.
The easylist.text has a huge list of such class names. Every adblocker has its own set of class names which will be blocked that's why we should not rely on only one class name. Some common class names are textads, banner-ads, banner_ads, ad-unit, ad-zone, ad-space which are detected by the adblocker for an ad.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.ad-zone{
height: 10px;
}
</style>
</head>
<body>
<h1>
<center>GeeksforGeeks</center>
</h1>
<center>
<p id="msg">checking for adblocker...</p>
</center>
<div
class="ad-zone ad-space ad-unit textads banner-ads banner_ads">
</div>
</body>
</html>
JavaScript
let x = document.querySelector(".ad-zone");
let x_height = x.offsetHeight;
let msg = document.getElementById("msg")
if(x_height){
msg.innerText = "No Adblocker detected"
} else{
msg.innerText = "Adblocker detected"
}
Output :
Example 2: The following code can be used in any webpage under the <script> tag.
JavaScript
let fakeAd = document.createElement("div");
fakeAd.className =
"textads banner-ads banner_ads ad-unit ad-zone ad-space adsbox"
fakeAd.style.height = "1px"
document.body.appendChild(fakeAd)
let x_width = fakeAd.offsetHeight;
let msg = document.getElementById("msg")
if(x_width){
console.log("No AdBlocker Detected")
}else{
console.log("AdBlocker detected")
}
Output : You can paste this code in any browser console, or you can use it in a script tag.
Adblocker detector
Similar Reads
How to detect browser autofill using JavaScript? We will learn how to detect browser autofill using javascript. Here we are going to use 3 programming languages HTML, CSS, Jquery to solve this problem in the best and well-defined way. In all web browser autofill is the feature that automatically fills the form fields such as email, address, passwo
4 min read
How to Detect Keypress using JavaScript ? In this article, keyboard detection is performed using HTML and CSS. HTML stands for "Hypertext Markup Language". HTML language helps the developer to create and design web page elements like links, sections, paragraphs, headings, and blockquotes for web applications. CSS stands for "Cascading Style
2 min read
How To Detect ad-blocker Using Mutation Observer API ? 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 alternati
4 min read
How to Detect Network Speed using JavaScript? Network speed detection in JavaScript involves measuring the time it takes to download a known file or resource and calculating the download speed. To calculate the speed of the network a file of known size is chosen from a server to download. The time taken to start and complete the download is rec
2 min read
Detect a device is iOS or not using JavaScript In order to detect a device whether it is iOS or not. We're going to Navigator platform and Navigator userAgent property. Navigator userAgent property This property returns the value of the user-agent header which is sent by the browser to the server. Returned value, have information about the name,
2 min read
How to detect copy paste commands Ctrl+V, Ctrl+C using JavaScript ? In this article, we will detect copy-paste commands Ctrl+V, and Ctrl+C using JavaScript. To detect the combination of keys with "Ctrl", we use the ctrl property of the keydown event. ApproachEvent Listener: The script adds an keydown event listener to the document.Element Access: It accesses the HTM
2 min read