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.
Detect AdBlocker With Javascript And Increase Website Ads Revenue
01st June 2020
5 mins read
Share On
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
- Don't Add Too Many Ads In Between Content
- Don't Block Whole Website Until They Disable AdBlock
- Implementing With Example
- Custom AdBlocker As Fallback
Prerequisites
Very basic knowledge of HTML & Javascript.
1) Don't Add Too Many Ads In Between Content
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.
2) Don't Block Whole Website Until They Disable AdBlock
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 :)
3) Implementing With Example
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.
Javascript Library Used
We are using FuckAdblock javascript library for implementationCDN Usage
<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.
index.html
<!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>
We need to display adblock alert only when adblocker is detected. Hence hide the adblock alert content using display:none CSS.
Observe the following javascript code in above index.html file.
CDN Library
<!-- 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>
checkads.js
// 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
When AdBlocker Is Detected In Browser
The following is how your website looks when adblock is not detected
When AdBlock Is Paused And Page Reloaded
4) Custom AdBlocker As Fallback
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
ads.js
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.
Conclusion
Hope you liked the article. Please share with your friends and keep following :)
Code is available in GitHub @ Detect AdBlocker
Articles For You
Factory States For Clean And Fluent Laravel Testing
Why namespace And use Keywords Used In PHP
@stack @push and @prepend In Laravel Blade
Sass or SCSS @mixin vs @extends vs Placeholder (%)
Why And How To Use PHP PDO With CRUD Examples
Localization In Laravel REST API
Generate SSH Key with ssh-keygen In Linux / Unix
Create / Save / Download PDF From Blade Template In PHP Laravel
