JavaScript Ninja Techniques - Discovering Ad-Block + Implementation Example

Posted at

Discover if the browser is running any version of *AdBlock*.

place this in your html.

<div class="afs_ads">&nbsp;</div>

the discover part should be in a non-blocking DOM-segment, we would like to give AdBlock plugin "a chance" to be loaded and handle all of page-ads.

for example:
window.discover_adblock = function(){
  setTimeout(function() {
    //  ... here ...
  }, 1000);
}, false);

the timeout may be applied when executing the function, which is a better practice,
and thats the way I'm gonn'a use.

running the method is done, as a trigger to "window load complete" event.
if(!! window.addEventListener){
  window.addEventListener("load", window.discover_adblock, false);
  window.attachEvent("onload", window.discover_adblock); //IE

b.t.w a more compatible way is:
it will work even in IE4, Mozilla and Netscape..
var old = window.onload;
window.onload = function(){
  old.apply(this, arguments);
  window.discover_adblock.apply(this, arguments);

the main problem is how to know if an ad has being blocked.
AdBlock method of removing or hiding element varies based on their browser and version,

while Firefox's AdBlock uses Dom-Removal, Chrome does mostly hiding, but newer versions also avoid modifying the element itself but wrapping it with a hidden container (which evidently hides it..),

have a look (4th wall break :) ) this implementation

<div class="afs_ads">&nbsp;</div>

<!-- of the page..... -->

window.discover_adblock = function(){
var target, isBlocked = false;

target = document.querySelector(".afs_ads"); //or null..
realstyle = (window.getComputedStyle) && window.getComputedStyle(target); //or null..
parent_realstyle = (window.getComputedStyle) && window.getComputedStyle(target.parentNode); //or null..
isBlocked = ("undefined" === typeof target) || //Firefox's plugin is a killer
(!!target.innerHTML && target.innerHTML.length === 0) ||
(!!target.clientHeight && target.clientHeight === 0) ||

//older AdBlock for Chrome used to hide the element itself.
(!!realstyle && realstyle.height === 0) ||
(!!realstyle && realstyle.width === 0) ||
(!!realstyle && realstyle.display.toLowerCase() !== "none") ||
(!!realstyle && realstyle.visibility.toLowerCase() !== "hidden")

//newer are also (or "only") wrapping the element in a hidden container.
(!!parent_realstyle && parent_realstyle.height === 0) ||
(!!parent_realstyle && parent_realstyle.width === 0) ||
(!!parent_realstyle && parent_realstyle.display.toLowerCase() !== "none") ||
(!!parent_realstyle && parent_realstyle.visibility.toLowerCase() !== "hidden")
if(isBlocked === true){
console.log("adblock note: an adblock is used.");
console.log("adblock note: an adblock is NOT being used.");

var old = window.onload;
window.onload = function(){
var _this = this, _arguments = arguments; //made available along the way..

old.apply(_this, _arguments);
window.discover_adblock.apply(_this, _arguments);
}, 1000);

By The Way (#2).
-- someone have already thought about it,
-- the following AdBlock list actually doing some counter fighting and removes the "discover method" in some sites..
it is called Anti-AdBlock-Filters (Adblock Warning Removal List) :) :) :)

if you have any comments feel free to email me (my email is on the top right of the page..)