Last updated on May 4th, 2016 at 12:17 am

VN:F [1.9.22_1171]
Rating: 8.0/10 (1 vote cast)

This is a very simple script and we are not using any jquery or complex coding here. There are lot of AdBlock extensions / add-ons available in major browsers like Mozilla Firefox & Chrome. They can detect ads on a website and block them. Sometimes ads can be annoying when there are multiple pop ups and you will end up clicking ads without browsing the actual webpage, hence users install AdBlock 🙂

I recommend to have less ads that will in turn make your website more appealing.

In the below script you can either hide entire website with an alert when AdBlock is detected or redirect user to a different web page asking them to disable AdBlock.

So how to find out whether a browser has AdBlock enabled?

For that we need to create a div element with id “MAIN_AD” and wrap your ad code inside that div.

Lets start with the HTML section.

Please make sure that you modify div height accordingly. Always keep height value more than your AD height.

<div id="main_ad" style="background-color:#EEEEEE; height:400px; overflow:auto;"><!-- YOUR AD CODE GOES HERE--></div>

After you have added your ad code inside the div, the next step is to create a main div with the name MAIN_WEBSITE, you are good to have your own main div id if you have one.

Below i have added my own Ad code for demo purpose, you can modify it with yours.

<div id="main_website">
<div id="main_ad" style="background-color:#EEEEEE; height:400px; overflow:auto;">
<script id="mNCC" language="javascript">  medianet_width='728';  medianet_height= '90';  medianet_crid='';  </script><script id="mNSC" src="http://contextual.media.net/nmedianet.js?" language="javascript"></script></script>
</div>

HTML part is over and lets start the javascript piece.

It is very simple and the logic here is to check the height of div with id MAIN_AD and if it is 0 that means there is AdBlock enabled.

var get_ad_H = document.getElementById("main_ad").offsetHeight;
if(get_ad_H == "0")
{
document.getElementById("notice").innerHTML = "Please Disable Ad-Block To View This Website";
document.getElementById("main_website").style.display = "none";
}

The script above will hide main div id MAIN_WEBSITE that has the entire web page, when div id MAIN_AD height is equal to 0.

Here instead of hiding entire web page you can also use either of the redirect option [window.location.replace() or window.location.href]

var get_ad_H = document.getElementById("main_ad").offsetHeight;
if(get_ad_H == "0")
{
// similar behavior as an HTTP redirect
window.location.replace("http://YOURWEBPAGE/Ad_Block.html");

// similar behavior as clicking on a link
window.location.href = "http://YOURWEBPAGE/Ad_Block.html
";
}

Please find the entire code, just name it as test_ad.html

<html>
<title>
Check Ad Block Is Enabled On A Browser Using Javascript</title>
<body>
<div id="main_website">
<div id="main_ad" style="background-color:#EEEEEE; height:400px; overflow:auto;"><!--PUT YOUR AD CODE HERE-->
</div>
This is a website that has some ads. If one of the ad div area gets disabled then the entire website will not be displayed.
</div>
<div id="notice">
</div>
<!--Make Sure This Javascript Get Added Just Before Your </body> -->
<script>
var get_ad_H = document.getElementById("main_ad").offsetHeight;
if(get_ad_H == "0")
{
document.getElementById("notice").innerHTML = "Please Disable Ad-Block To View This Website";
document.getElementById("main_website").style.display = "none";
}
</script>
</body>
</html>

TIP: If you have multiple ad section i.e. For example on Header, Sidebars,Footer etc., of your website then you don’t have to modify every AD code, All you have to do is update any one of them according to the above format. Also make sure you place javascript part at the end just before the </body> tag.

On a flip side if you would like to install AdBlock on your browser just follow the below link. I personally recommend this plugin as they are really good especially when you unknowingly login to a spam website.

If you would like to install

CHROME
AdBlock For Chrome

Mozilla
AdBlock For Mozilla

VN:F [1.9.22_1171]
Rating: 8.0/10 (1 vote cast)

Leave a Reply

Your email address will not be published. Required fields are marked *