Ultimate Guide To Detecting AdBlock

AdBlockers are web browser plugins, extension or addon that block advert such as Google Adsense found an any website such as AdBlock plus. Most internet users have this plugin activated and that number is in the increase.
If you as a site owner, your main source of income is from displaying Ads of various Ad-network on your website, this can be frustrating because there is a drastic deep in revenue generation.

Dealing With Adblock

Most website prefer to do nothing in dealing with AdBlock menace, others politely ask users to whitelist them while some completely hide it content or redirect users to given page on detection of AdBlock.

How To Detect AdBlock

Am going to be showing us how to detect AdBlock using JavaScript and jQuery code. i wasn’t having the time to set up a demo page but i can assure you, it works like charm.

Using Javascript

• Create a JavaScript file named advert.js or advertisement.js (for this tutorial, am using the former) containing the code below
  [javascript] document.write(‘<div id=”tester” style=”display:none”>an advertisemen</div>’); [/javascript]
• Use the below script to detect if Adblock is enabled or not.
  [javascript]
  <script type=”text/javascript” src=”advert.js”></script>
  <script type=”text/javascript”>
  if (document.getElementById(“tester”) == undefined)
  {
  document.write(‘ TEXT TO DISPLAY IF ADBLOCK IS ACTIVE’);
  }

  </script>
  [/javascript]

Code explanation – firstly, we create a JavaScript file using the Adblockplus blacklisted name “advert” to fool Adblock that you are actually serving a JS advert. next we embedded the created “advert.js” file. we created a javascript code to detect the presence of advert.js via the CSS ID “tester”.
if the ID has not been assigned a value, then it has been blocked by Adblock, hence the notice that AdBlock is enabled.

Using jQuery

• Wrap your Ad code for example Google Adsense Ad using a CSS class or ID. for example

  <div class="myTestAd">
  	<!-- Adsense Ad code goes here -->
  </div>

• Use the below jQuery code to detect Adblock
  [javascript]
  if ($(‘.myTestAd’).height() == 0) {
  document.write(‘ TEXT TO DISPLAY IF ADBLOCK IS ACTIVE’);
  } [/javascript]

Note if your Ad code was wrap with a CSS ID rather than a class, for example

<div id="myTestAd">
	<!-- Adsense Ad code goes here -->
</div>

Then change the .myTestAd in the Adblock JS code to #myTestAd

Using jQuery II

Similar to the Javascript code above. the only difference is, this is jQuery and the other is javascript.

• Wrap your AAd code for example Google Adsense Ad using a CSS class or ID. for example

  <div id="myTestAd">
  	<!-- Adsense Ad code goes here -->
  </div>

• Use the below jQuery code to detect Adblock

  [javascript]
  <script type=”text/javascript”>
  jQuery(document).ready(function(){
  if (jQuery(‘#myTestAd’).height() == 0) {
  document.write(‘ TEXT TO DISPLAY IF ADBLOCK IS ACTIVE’);
  }
  });
  </script>
  [/javascript]

Using Google Adsense Visibility And Javascript

This code is quite handy if you do not want to wrap your existing Adsense code with a CSS ID or class. it utilizes the fact that Google’s ad code creates an iframe with the id “iframe”. So as long as you don’t already have something on your page with that ID, this’d work for you too.

[javascript]
<script type=”text/javascript”><!–
if(document.getElementsByTagName(“iframe”).item(0) == null)
{
document.write(“TEXT TO DISPLAY IF ADBLOCK IS ACTIVE”);
}
–></script>
[/javascript]

If your website is built on or powered by WordPress, MailOptin is a great AdBlock detection plugin. Go get it.