Most effective way to detect ad blockers

Step 1 - Understand how ad blockers work

When a browser requests a website address it downloads the corresponding HTML file which includes internal & external references to Javascript files, CSS stylesheets and images. If the browser has an ad blocker installed, it will compare the names of referenced scripts & files against a "block list" and if there are any matches those files will be ignored.

View popular block list - easylist.txt  

Step 2 - Leverage the "block list" to reveal the ad blocker

All block lists include a reference to "bannerad3.js" because it's a common name for JavaScript files that are associated with serving ads. Knowing this, save the following JavaScript code which creates a hidden div to a file called "bannerad3.js" and place it in the root directory of your website.

var e=document.createElement('div');
e.id='ouLKhyDUTHYe';
e.style.display='none';
document.body.appendChild(e);

Note: the obscure div id is to ensure that it doesn't conflict with any other div's that your website might use.

Step 3 - Check if "bannerad3.js" was loaded or blocked

Place the following JavaScript within your website's HTML source code just above the </body> tag. It's purpose is to check if the hidden div created within "bannerad3.js" exists (ads are allowed) or not (ads are blocked). And that's all there is to it!

<script src="/bannerad3.js" type="text/javascript"></script>
<script type="text/javascript">

if(document.getElementById('ouLKhyDUTHYe')){
  alert('Blocking Ads: No');
} else {
  alert('Blocking Ads: Yes');
}

</script>

Example 1 - Send ad blocking data to Google Analytics

You can easily track your website's ad blocking activity within Google Analytics via the following script which supports all versions. Be aware that there's a data limit if you're using the free version.

<script src="/bannerad3.js" type="text/javascript"></script>
<script type="text/javascript">

if(document.getElementById('ouLKhyDUTHYe')){
  ouLKhyDUTHYe='No';
} else {
  ouLKhyDUTHYe='Yes';
}

if(typeof ga !=='undefined'){
  ga('send','event','Blocking Ads',ouLKhyDUTHYe,{'nonInteraction':1});
} else if(typeof _gaq !=='undefined'){
  _gaq.push(['_trackEvent','Blocking Ads',ouLKhyDUTHYe,undefined,undefined,true]);
}

</script>

Example 2 - Post ad blocking data to an external script

Using this method you can record your website's ad blocking statistics to your own database, but to save yourself a lot of development you'd be better off just using Adblock Analytics.

<script src="/bannerad3.js" type="text/javascript"></script>
<script type="text/javascript">

if(document.getElementById('ouLKhyDUTHYe')){
  ouLKhyDUTHYe='No';
} else {
  ouLKhyDUTHYe='Yes';
}

var r=new XMLHttpRequest();
r.open('POST','https://www.domain.com/script/');
r.setRequestHeader('Content-type','application/x-www-form-urlencoded');
r.send('blockingAds='+ouLKhyDUTHYe);

</script>

Example 3 - Display a message on your website

This is a little controversial, but if you're finding that the majority of your website's visitors are blocking ads then you might want to try displaying a friendly message asking them to disable it.

<style>
#CmQMdLPGZcoU {
display: none;
margin-bottom: 30px;
padding: 20px 10px;
background: #D30000;
text-align: center;
font-weight: bold;
color: #fff;
border-radius: 5px;
}
</style>

<div id="CmQMdLPGZcoU">
  Our website is made possible by displaying online advertisements to our visitors.<br>
  Please consider supporting us by disabling your ad blocker.
</div>

<script src="/bannerad3.js" type="text/javascript"></script>
<script type="text/javascript">

if(!document.getElementById('ouLKhyDUTHYe')){
  document.getElementById('CmQMdLPGZcoU').style.display='block';
}

</script>

This is what the message looks like: