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 And Increase Revenue | stackcoder.in


Detect AdBlocker With Javascript And Increase Website Ads Revenue


01st June 2020 5 mins read
Share On     Share On WhatsApp     Share On LinkedIn


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


  1. Don't Add Too Many Ads In Between Content
  2. Don't Block Whole Website Until They Disable AdBlock
  3. Implementing With Example
  4. 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 implementation


CDN 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

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

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







Author Image
AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing