Last updated on November 18th, 2022 at 06:24 pm
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. We can use this script to make user disable ad block to view the website.
I agree 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;">
<h2>Sample Ad</h2>
</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://xxxx/nmedianet.js?" language="javascript"></script></script>
</div>
Now let us 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.
As you can see we are using setTimeout() function giving some time for our javascript to detect the ad blocker. I am giving 1000 millisecond. It is up to you to decide this value. We are doing this to give some time for the web page to load. There are million other ways to do this but as I mentioned above I am focussing on some simple approach without much complex implementation techniques.
<script>
myTimeout = setTimeout(loadme, 1000);
//window.onload = loadme;
function loadme()
{
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>
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.
Now add the notice div tag next to the above javascript. This will make sure that the document.getElementById(“notice”).innerHTML can put the string we defined above inside the div id notice.
<div id="notice">
</div>
Bonus:
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 or anything of your choice
<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;">
<h2>Sample Ad</h2>
</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>
<script>
myTimeout = setTimeout(loadme, 1000);
function loadme()
{
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>
<div id="notice">
</div>
</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
admin