Image credit: getadblock.com
Hi guys!
In this post, I will discuss four ways to detect adblockers in browsers using Javascript with jQuery framework. I shall stick to adblocking browser extensions only. This application of code enables you to notify the user of your site whether an adblocking extension is active in the user’s browser or not. The use cases are based on Google Chrome browser and AdBlock browser extension.
1. Offering a DIV as bait to the adblocker
First we create a wrapper DIV. Inside this div we create another DIV having no content and add some CSS classes to the inner DIV such as “adBanner”, “adsBanner”, etc.
We then browse to our webpage with the DIVS in it and with “AdBlock” adblocker extension installed and active in the browser. On opening the Developer tools in the browser, we will see that the inner DIV with the aforementioned CSS classes does not show at all. What happened? The adblocker blocked the element! Now, how do we detect this programmatically?
Simple. We detect the height of the inner DIV with the CSS classes on it. It will be returned as ‘0’ (zero). This can be done with only Javascript or even with jQuery. What action do we take on getting the inner DIV height as 0? We can notify the site visitor that their adblocker is on with say, a popup. We can also ask them politely to switch it off if we have painstakingly monetized our site with adverts, since all those adverts are blocked now.
When the visitor to our site switches off their adblocker and refreshes the page, the inner DIV will not be blocked. (Hopefully!) So then we can choose not to show the popup again.
First, include jQuery file in your test webpage. Now, let’s have a look at code:
The following code goes into the <body> tag of your webpage:
<style>
.adsBanner{
background-color: transparent;
height: 1px;
width: 1px;
}
</style>
<script>
jQuery(function(){
if(jQuery('.wrapper').height() == 0)
{
alert("Ad Blocker is active");
}
else
{
alert("Ad Blocker is NOT active");
}
});
</script>
<h2>Detect addons AdBlock Div Demo</h2>
<div class="wrapper">
<div class="adBanner adsBanner"></div>
</div>You will see an alert with a message saying “Ad Blocker is active” in your Chrome browser on browsing to your web page with AdBlock extension active.
Reference: https://html-online.com/articles/detect-adblock-javascript/
2. Offering a dummy ad script to the ad blocker
We create a javascript file called ads.js and keep in the same folder as our test web page. We then create a boolean variable that will be true. Immmediately after this line of code, we make a call to our dummy ad script ads.js. In the dummy script, we set this variable to false. So, when the ad blocker is active, the variable is true. If not, the variable is false.
This simple technique works for many ad blockers but not for some of them such as Privacy Badger. So, when the boolean variable is true, we can choose to show the notification and not show it when the variable is false.
Let’s have a look at the code:
First, the dummy ad script, ads.js:
//simple ad script usingAdBlocker = false;
Then, the test web page. The following code goes in your <body> tag of your page. Be sure to include the jQuery file in your <head> tag of the page.
<script>var usingAdBlocker = true;</script>
<script src="ads.js"></script><!-- dummy ad script-->
<script>
if(usingAdBlocker == true)
{
alert("Ad Blocker active");
}
else
{
alert("Ad Blocker NOT active");
}
</script>
<h2>Detect addons AdBlock JS Demo</h2>If your AdBlock extension is active, you will see an alert with the message “Ad Blocker active”
Reference: https://www.labnol.org/code/19818-detect-adblock-javascript
3. Sideloading a web accessible resource of an adblocking browser extension
The more advanced and more popular adblocker extensions do not follow the element blocking technique. They follow a more advanced method of blocking adverts. To deal with this, we side load a web asccessible resource that is part and parcel of the extension itself. How do we find such a resource?
For this example, I will use the Google Chrome browser and the “AdBlock” extension.
You can find the id of the extension by going to your extension manager in Chrome and clicking on the “Details” link corresponding to your adblocker. Here “gighmmpiobklfepjocnamgkkbiglidom” refers to the extension “id” that is assigned to it.
Browse to the following URL in Chrome:
chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/manifest.json
You will see a large JSON object with one key in the array that is “web_accessible_resources”. Choose any one of the URIs under this key. We will use the “adblock-onpage-icon.svg” URI for our example.
Browse the following URL:
chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/adblock-onpage-icon.svg
Verify that this URL loads properly.
What will we have to do to use this URL? We will simply load it in a browser request, ajax or fetch, via Javascript/ jQuery and wait to receive the HTTP response. If we get a HTTP response code of 200, we can be sure that the plugin or extension is active, since it is possible to load it. We can then perform functions identical to point number 1 and 2 as above.
The following code goes in your <body> tag of your page. Be sure to include the jQuery file in your <head> tag of the page.
<h2>Detect addons AdBlock Side Load Demo</h2>
<script>
console.log(navigator);
//JSON Object for extension details
var ExtensionObj =
{
"extensionName": "AdBlock",
"extensionID": "gighmmpiobklfepjocnamgkkbiglidom",
"resourceURL": "/adblock-onpage-icon.svg", //icon128.png
"fileType": "image",
"protocolPrefix": "chrome-extension://",
"browser": "Chrome"
};
//fetch extension resource
function UrlExistsExt(protocolPrefix, extId, resourceURL, fileType, cb)
{
var url = protocolPrefix+extId+resourceURL;
$.ajax({
url: url,
dataType: fileType,
type: 'GET',
complete: function(xhr){
console.log(xhr.status);
if (typeof cb == 'function')
cb.apply(this, [xhr.status]);
}
})
}
//Ghostery
var ShowPopupExt = false;
//mai function
function UnblockerExtFunc(ExtensionObj)
{
var currExt = ExtensionObj;
if(navigator.userAgent.indexOf(currExt.browser) != -1)
{
console.log("Browser matched.");
UrlExistsExt(currExt.protocolPrefix, currExt.extensionID, currExt.resourceURL, currExt.fileType, function(status){
if(status == 200)
{
ShowPopupExt = true;
alert('Extension Detected'); //show dialog here
}
else{
alert('Extension Not Found');
}
});
}
}
UnblockerExtFunc(ExtensionObj);
$(document).ajaxStop(function(){
if(ShowPopupExt)
{
alert("Show Popup"); //if dialog is to be displayed
}
});
</script>If your AdBlock extension is active, you will see an alert with the message “Extension Detected” and another with the message “Show Popup”.
Reference: https://developer.chrome.com/docs/extensions/mv3/manifest/web_accessible_resources/
4. Using the default adblocker behavior towards standard ad script URLs
There is a third class of adblockers that use even more advanced techniques of blocking ads. And, they provide no web accessible resources to latch on to. So what do we do? We utilize the default adblocking behavior of these extensions towards standard URLs of adblocking scripts.
The logic is as follows: We try to load a standard adblocker script URL using javascript or jQuery. If an adblocker is active, a request to such a script URL will be blocked. If it is not active, it will yield an HTTP response code of 200 or “OK”.
So if we get a HTTP status code of 200 from a request to any standard javacript ad script URL, we can be certain that an adblocker is not active and is not blocking the request.
We can then perform functions identical to point number 1, 2 and 3 as above.
The following code goes in your <body> tag of your page. Be sure to include the jQuery file in your <head> tag of the page.
<h2>Detect addons New URLs</h2>
<script>
var FlaggedURL = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; //standard ad script
jQuery(function($){
function callMe(FlaggedURL)
{
$.ajax({
url: FlaggedURL,
type: 'GET',
complete: function(xhr){
console.log(xhr.status); //200 for OK
if(xhr.status === 200)
{
alert("NO adblocker active");
}
else if(xhr.status === 0)
{
alert("Adblocker active");
}
}
});
}
console.log('ready');
callMe(FlaggedURL);
});
</script>You will see an alert with a message saying “Adblocker active” in your Chrome browser on browsing to your web page with AdBlock extension active.
Conclusion
So, in this article, I have given four ways of detecting adblockers in browsers using javascript/jQuery. You can easily apply these code snippets to make plugins, scripts, etc.
Did you like the article? Let me know in the comments below!