Detecting Ad Blockers

We've all had experience with Ad-Blockers some time or the other. Whether you are the frustrated website owner trying to earn a little bit of advertisement revenue, or the internet user trying to navigate your way though the plethora of advertisements. Ad-Blockers have become integral part of browsing the web.

It was the initial growth of Ad-Blockers such as AdBlock Plus which prompted many website owners into disguising their advertisements in an attempt to circumvent Ad-Blockers. However such techniques meant a lot of work. Renaming advertisement file-names, changing folder structures and ensuring none of the standard advertisement image sizes were used. Then if all that was met you only had a limited amount of time before the advert was noticed by someone with an Ad-Blocker and added to their "block" list.

Within the past few months however I have noticed that an increasing number of website owners are diverting their attention away from such time consuming techniques to instead taking a more direct approach by blocking visitors who use Ad-Blockers. The crux of this technique though is in the detection of Ad-Blockers. And it is this that aroused my curiosity. So after doing some research I have created a list (with sample code) of the most common methods for detecting Ad-Blockers that I found in use on websites across the net.

The methods used to detect Ad-Blockers

Compiled below (in no particular order) is a list of the most common methods for detecting Ad-Blockers.

Method 1. The honey-pot

The first method for detecting Ad-Blockers involves using an external JavaScript file, disguised as an advertisement, to alter the value of a local JavaScript variable.
If an Ad-Blocker is present then this external JavaScript will be blocked, thus stopping it from changing the variable's value. It is then a simple case of detecting the lack of any change to the variable.
<script type="text/javascript">
    //1. Sets the Ad-Blocker detection status to true
    var adBlockerDetected = true;
</script>

<script src="http://examplehost/advert_popup.js?trickstring=http://a.as-us.falkag.net/dat/njf/41/domain.com/ros_pop_tag.js" type="text/javascript">
    //2. External JS file which sets the adBlockerDetected variable to false
</script>
	
<script type="text/javascript">
    //3. Display message based on the detection status
    if(adBlockerDetected==true) alert("Ad-Blocker Detected");
</script>

Method 2. Checking the advert still exists

A simpler method is to check that the advertisement is still present within the page by checking for its ID attribute. This is a far from reliable method though, as it fails to take into account the fact that most Ad-Blockers simply hide adverts, as opposed to removing them.
<img id="ad_1" src="http://examplehost/images/fake_advert.jpg" />

<script type="text/javascript">    
    //1. Find Advertisement Image
    var objAdvertImage = document.getElementById('ad_1');

    //2. Check if the advert has been found
    if(!objAdvertImage)alert("Ad-Blocker Detected");
</script>

Method 3. Detecting changes to the advert's CSS Class

Due to the fact many Ad-Blockers don't actually remove the advertisement from the website, only hide it, the following method tries to detect the use of a CSS class added to the advertisement in order to alter its visibility.
<img id="ad_1" src="http://examplehost/images/fake_advert.jpg" />

<script type="text/javascript"> 
    //1. Find Advertisement Image
    var objAdvertImage = document.getElementById('ad_1');

    //2. Read the adverts Class Name
    var sClassName = objAdvertImage.className;

    //3. Display message if it has had a class added to it 
    if(sClassName!="")alert("Ad-Blocker Detected");
</script>

Method 4. Checking the styles relating to the advert's visibility

The most accurate, yet complicated, of the 4 methods checks each of the styles relating to the advertisement's visibility. Any style added to the advertisement that would result in it being hidden from the user triggers the "detector".
<img id="ad_1" src="http://examplehost/images/fake_advert.jpg" />

<script type="text/javascript">
    //1. Find Advertisement Image
    var objAdvertImage = document.getElementById('ad_1');

    //2. Set the variable that will contain the detection status
    var adBlockerDetected = false;

    //3.Check various CSS attributes of the advert
    if (objAdvertImage.style.display.indexOf('none') > -1) adBlockerDetected = true;
    else if (objAdvertImage.style.visibility == 'hidden') adBlockerDetected = true;
    else if (objAdvertImage.clientHeight == 0) adBlockerDetected = true;

    //4. Display message based on the detection status
    if(adBlockerDetected==true) alert("Ad-Blocker Detected");
</script>

Conclusion

Whilst researching the techniques being used to detect Ad-Blockers it became apparent that for every method of detection in use there exists a technique of circumvention. Leading to a fascinating cat-and-mouse game that is unlikely to stop any time soon.

If anyone has seen other methods that I may have missed then why not leave a comment explaining where it is, and how it works...