Please enable JavaScript to view this site.
Here is a simple script that detects whether your visitor is using an ad blocker. If one is detected, it asks the reader to consider pausing his ad block software.
The script creates a div with class names designed to bait the ad blocker. The script measures whether the div has been reduced to zero. If so, it then displays the alert.
Instead of using the default JavaScript alert, it uses the customizable Sweet Alerts.
The HTML script follows below:
<!DOCTYPE html>
<html>
<head>
<title>Anti-Adblock Script</title>
<script src='https://code.jquery.com/jquery-3.6.1.min.js'></script>
<script src='https://unpkg.com/sweetalert/dist/sweetalert.min.js'></script>
<style>
.swal-title {font-size:30px; color: #000;}
.swal-text {background-color:#fff; text-align:center; font-size:20px; color:#000;}
.swal-icon--info{border-color:#9de0f6; background-color:#fff;}
</style>
</head>
<body>
<div class='ad-zone ad-space ad-unit textads banner-ads banner_ads'> </div>
<script>
setTimeout(function() {
var x = document.querySelector('.ad-zone'),
b = x ? (x.offsetHeight ? false : true) : true;
if(b == true){
swal('Ad Blocker Detected','Please consider pausing your ad blocker.','info');
}
}, 200);
</script>
</body>
</html>
If you run the script with no ad blocker, you will see a blank screen. If an ad blocker is turned on, you will get an alert.
This script works with most browsers and ad blockers but not all. The end of this entry will show an expanded method.
The script works by measuring the adzone div section to see if it has been reduced to 0. It uses the timeout function to cause a slight delay. Some adblockers will leave the adzone div alone but remove the div section from the DOM document. The timeout must be used to see if the adzone div has been removed from the DOM.
Test Adblock Detector Version 1.
The script creates a div with class names designed to bait the ad blocker. The script measures whether the div has been reduced to zero. If so, it then displays the alert.
Instead of using the default JavaScript alert, it uses the customizable Sweet Alerts.
The HTML script follows below:
If you run the script with no ad blocker, you will see a blank screen. If an ad blocker is turned on, you will get an alert.
This script works with most browsers and ad blockers but not all. The end of this entry will show an expanded method.
The script works by measuring the adzone div section to see if it has been reduced to 0. It uses the timeout function to cause a slight delay. Some adblockers will leave the adzone div alone but remove the div section from the DOM document. The timeout must be used to see if the adzone div has been removed from the DOM.
Test Adblock Detector Version 1.
* posted by Robert on Wed, Dec 07, 2022
Reply 1:
What if the visitor has JavaScript disabled? If so, he will
never see your alert asking him to allow ads.
To compensate, you could display a message seen only by those not using JavaScript. This expanded version does exactly that. The visitor will see a message that will not go away unless he turns JavaScript back on.
<!DOCTYPE html>
<html>
<head>
<title>Anti-Adblock Script</title>
<script src='https://code.jquery.com/jquery-3.6.1.min.js'></script>
<script src='https://unpkg.com/sweetalert/dist/sweetalert.min.js'></script>
<style>
.swal-title {font-size:30px; color: #000;}
.swal-text {background-color:#fff; text-align:center; font-size:20px; color:#000;}
.swal-icon--info{border-color:#9de0f6; background-color:#fff;}
</style>
<script>
var str= '#javascript{display:none;}'
var pa= document.getElementsByTagName('head')[0];
var el= document.createElement('style');
el.type= 'text/css';
el.media= 'screen';
el.appendChild(document.createTextNode(str));
pa.appendChild(el);
</script>
</head>
<body>
<div id='javascript'>
<br><br><br><br><br><br>
<blockquote>
<strong>JavaScript is disabled by your browser. Many features will not work.</strong>
</blockquote>
<br><br><br><br><br><br>
</div>
<div class='ad-zone ad-space ad-unit textads banner-ads banner_ads'> </div>
<script>
setTimeout(function() {
var x = document.querySelector('.ad-zone'),
b = x ? (x.offsetHeight ? false : true) : true;
if(b == true){
swal('Ad Blocker Detected','Please consider pausing your ad blocker.','info');
}
}, 200);
</script>
</body>
</html>
Test Adblock Detector Version 2.
To compensate, you could display a message seen only by those not using JavaScript. This expanded version does exactly that. The visitor will see a message that will not go away unless he turns JavaScript back on.
Test Adblock Detector Version 2.
* posted by Robert on Fri, Dec 09, 2022
Reply 2:
The previous two instances were in what is known as
<!DOCTYPE html>
<html>
<head>
<title>Anti-Adblock Script</title>
<script src='https://code.jquery.com/jquery-3.6.1.min.js'></script>
<script src='https://unpkg.com/sweetalert/dist/sweetalert.min.js'></script>
<style>
.swal-title {font-size:30px; color: #000;}
.swal-text {background-color:#fff; text-align:center; font-size:20px; color:#000;}
.swal-icon--info{border-color:#9de0f6; background-color:#fff;}
</style>
<script>
var str= '#javascript{display:none;}'
var pa= document.getElementsByTagName('head')[0];
var el= document.createElement('style');
el.type= 'text/css';
el.media= 'screen';
el.appendChild(document.createTextNode(str));
pa.appendChild(el);
</script>
</head>
<body>
<div id='javascript'>
<div style='position:fixed; left:0; top:0; width:100%; height:100vh; z-index:9999;
background-color:rgb(238, 238, 238);'>
<div style='margin-left:auto;margin-right:auto;margin-top:6%;min-width:90%;min-height:30%;
z-index:10000; font-family:Helvetica, geneva, sans-serif;
line-height:normal; font-size:16pt; text-align:center !important;
padding:12px; display:block; margin-left:30px; margin-right:30px; visibility:visible;'>
<div style='color:#999; font-size:30pt; color:#777777; font-family:Helvetica, sans-serif;
font-weight:200; margin-top:70px; margin-bottom:10px; text-align:center;'>
Please enable JavaScript to view this site.
</div></div></div>
</div>
<div class='ad-zone ad-space ad-unit textads banner-ads banner_ads'> </div>
<script>
setTimeout(function() {
var x = document.querySelector('.ad-zone'),
b = x ? (x.offsetHeight ? false : true) : true;
if(b == true){
swal('Ad Blocker Detected','Please disable your ad blocker.','info',
{buttons:false, closeOnClickOutside:false, closeOnEsc:false});
}
}, 200);
</script>
</body>
</html>
Test Adblock Detector Version 3.
nagmode. The visitor can click on OK or even outside the box and then view your site without enabling ads. But what if you want to ensure that the visitor must pause the ad blocker? The following script will not allow the visitor to escape or click out of the alert. If the visitor turns off JavaScript, he won't be allowed to see anything but your message to enable JavaScript:
Test Adblock Detector Version 3.
* posted by Robert on Wed, Dec 14, 2022
Reply 3:
Expanded Method
Some ad blockers will remove the ad without affecting the adzone div in any way. I noticed this with the Spectrum Security Suite's ad blocker. The ads were not showing even though Adblock had been turned off.
To circumvent the Spectrum adblocker, I had to use JavaScript to measure the length of the page at the outset and after a short delay. If ads are showing, the second length measurement should be longer than the first. If the measurements are the same, then the script determines that the ads have been blocked.
Note: This method has its weaknesses. If the advertiser either does not send an ad or is slow to send an ad, the script will think that an ad is being blocked. If the advertiser is using an overlay ad that does not increase the length of the page, the script will think that that the ad is being blocked.
I only use this script for the desktop version of my site and not the mobile version.
The HTML script for my expanded version follows below:
<div class='ad-zone ad-space ad-unit textads banner-ads banner_ads'> </div>
<script>
let originalheight = document.body.scrollHeight;
setTimeout(function() {
var x = document.querySelector('.ad-zone'),
b = x ? (x.offsetHeight ? false : true) : true;
let newheight = document.body.scrollHeight;
if((b == true) || (newheight == originalheight) ){
swal('Please allow ads.','Check both your browser extensions
and security software for ad blockers.','info');
}
}, 1000);
delete originalheight;
delete newheight;
</script>
Some ad blockers will remove the ad without affecting the adzone div in any way. I noticed this with the Spectrum Security Suite's ad blocker. The ads were not showing even though Adblock had been turned off.
To circumvent the Spectrum adblocker, I had to use JavaScript to measure the length of the page at the outset and after a short delay. If ads are showing, the second length measurement should be longer than the first. If the measurements are the same, then the script determines that the ads have been blocked.
Note: This method has its weaknesses. If the advertiser either does not send an ad or is slow to send an ad, the script will think that an ad is being blocked. If the advertiser is using an overlay ad that does not increase the length of the page, the script will think that that the ad is being blocked.
I only use this script for the desktop version of my site and not the mobile version.
The HTML script for my expanded version follows below:
* posted by Robert on Wed, Nov 15, 2023
Site built and hosted by RJdesign.one