
Good content takes time and effort to come up with.
Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.
Hello fellas! In this article, I will show you how to detect if the browser has AdBlocker plugins enabled. If it's enabled then how to request your website visitors not to block ads and increase your Ads Revenue.
Code is available in GitHub @ Detect AdBlocker
We will cover
Very basic knowledge of HTML & Javascript.
Adding Ads might be the main source income for you to run website, I totally understand. But keep in mind not to add too much Ads in between the content it might be very distracting or piss of your viewers.
Your content might be great but you will loose viewers who constantly come to your website.
I have seen couple of websites where they totally block the content till the user doesn't disable the ads which is totally not a good idea for website owners. I know I can feel your pain, but as wisely said "customer is the king" .
Instead you can show some alert text for your viewers to disable the ads. Believe me at least 80% of them will definitely support you if you really have good content for them :)
Oh! Boy enough blabbering. Lets get start with implementation.
Following is the project folder structure:
index.html
assets/
js/
blockadblock.js /** Library File Locally Included, Will show CDN Version Too */
checkads.js /** Code To Detect The AdBlocker */
index.html - Here we will add normal content along with alert text when viewer uses adblocker
blockadblock.js (Not Required If We Use CDN
link) - Its just the library file which is included locally as I use cache in my website. So need to pull too many times. Even we can use CDN over here to avoid including this file.
checkads.js - In this file we will detect the adblocker. Surely we can add it in index.html file but as your project increases it will be bit cumbersome to mange it.
We are using FuckAdblock
javascript library for implementation
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js" integrity="sha256-3zU5Lr4nIt3K/BgGOQMduajtZcPV9elIM/23RDXRp3o=" crossorigin="anonymous"></script>
If the above script doesn't work for you then please use this URL to get the new script tag Fuck AdBlock.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AdBlocker Demo</title>
<style>
#adblock-alert{ display: none; }
#adblock-alert .alert{ padding: 20px; background: red; border-radius: 4px; colour: #fff; }
</style>
</head>
<body>
<div id="adblock-alert">
<div class="alert">
Good content takes time and effort to come up with. <br><br>
Please consider supporting us by just disabling your <strong>AD BLOCKER</strong> and reloading this page again.
</div>
</div>
<p>This is simple page.</p>
<!-- AdBlock Library CDN URL -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js" integrity="sha256-3zU5Lr4nIt3K/BgGOQMduajtZcPV9elIM/23RDXRp3o=" crossorigin="anonymous"></script>
<!-- Detect Adblock Code Implementation -->
<script src="./assets/js/checkads.js"></script>
</body>
</html>
Observe the following javascript code in above index.html file.
<!-- AdBlock Library CDN URL -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js" integrity="sha256-3zU5Lr4nIt3K/BgGOQMduajtZcPV9elIM/23RDXRp3o=" crossorigin="anonymous"></script>
<!-- Detect Adblock Code Implementation -->
<script src="./assets/js/checkads.js"></script>
// Function called if AdBlock is not detected
function adBlockNotDetected() {
var adContent = document.getElementById('adblock-alert');
adContent.style.display = 'none';
}
// Function called if AdBlock is detected
function adBlockDetected() {
var adContent = document.getElementById('adblock-alert');
adContent.style.display = 'block';
}
// We look at whether FuckAdBlock already exists.
if(typeof fuckAdBlock !== 'undefined' || typeof FuckAdBlock !== 'undefined') {
// If this is the case, it means that something tries to usurp are identity
// So, considering that it is a detection
adBlockDetected();
} else {
// Otherwise, you import the script FuckAdBlock
var importFAB = document.createElement('script');
importFAB.onload = function() {
// If all goes well, we configure FuckAdBlock
fuckAdBlock.onDetected(adBlockDetected)
fuckAdBlock.onNotDetected(adBlockNotDetected);
};
importFAB.onerror = function() {
// If the script does not load (blocked, integrity error, ...)
// Then a detection is triggered
adBlockDetected();
};
importFAB.integrity = 'sha256-xjwKUY/NgkPjZZBOtOxRYtK20GaqTwUCf7WYCJ1z69w=';
importFAB.crossOrigin = 'anonymous';
importFAB.src = 'https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js';
document.head.appendChild(importFAB);
}
We are enabling or disabling the adblock alert text with the following functions. You will be able to see it in the above code
function adBlockNotDetected() {
var adContent = document.getElementById('adblock-alert');
adContent.style.display = 'none';
}
// Function called if AdBlock is detected
function adBlockDetected() {
var adContent = document.getElementById('adblock-alert');
adContent.style.display = 'block';
}
Using blockadblock.js Instead Of CDN
Copy and paste this URL FuckAdblock in your browser. It will show the minified code, copy and paste this code in blockadblock.js file. Once you add it you need to include in your index.html file as follows
<!-- Detect Adblock Code Implementation -->
<script src="./assets/js/blockadblock.js"></script>
<!-- Detect Adblock Code Implementation -->
<script src="./assets/js/checkads.js"></script>
NOTE: Once you disable your adblock make sure to reload the page. Else the changes made wont take affect
The following is how your website looks when adblock is detected
The following is how your website looks when adblock is not detected
Note: Most of the adblocker gets detected with the above library but few of them like Ublock Origin
was undetected as my friend Zontir highlighted in the the comments below.
So along with the above adblocker detecting library I have used the following custom code to get it detected. Hope you guys like it.
Add the following script before the closing body as follows
var canRunAds = true;
Yup thats the only piece of code in ads.js
file.
<script src="{{ asset('js/ads.js?cb='. env('CB_VERSION')) }}"></script>
<script>
function adDetected() {
const checkad = document.getElementById('ad-content');
checkad.style.display = 'block';
}
if( window.canRunAds === undefined ){
adDetected();
}
</script>
Basically most of the adblockers detects ads
from scripts and tries to block it.
Hope you liked the article. Please share with your friends and keep following :)
Code is available in GitHub @ Detect AdBlocker
PHP file_put_contents failed to open stream: Permission denied
PHP extension ext-intl * is missing
Send Email In PHP With PHPMailer
Free SSL Certificate With Lets Encrypt/Certbot In Linux (Single / Multiple Domains)
Upload File From Frontend Server {GuzzleHttp} To REST API Server In PHP {Laravel}
Setup MAMP Virtual Hosts For Local PHP Development
Free SSL Certificate For CPanel
Install NGINX In Linux / Ubuntu And Managing
What Is Laravel Resourceful Controllers?
Test Your Local Developing Laravel Web Application From Phone Browser Without Any Software