Detect AdBlocker With Javascript And Increase Website Ads Revenue

https://ift.tt/2YgQzjX

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

Prerequisites

Very basic knowledge of HTML & Javascript.

1) Don’t Add Too Many Ads In Between Content

Adding Ads might be the main 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 
        checkads.js

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>

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js" integrity="sha256-3zU5Lr4nIt3K/BgGOQMduajtZcPV9elIM/23RDXRp3o=" crossorigin="anonymous"></script>

    
    <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

<script src="https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js" integrity="sha256-3zU5Lr4nIt3K/BgGOQMduajtZcPV9elIM/23RDXRp3o=" crossorigin="anonymous"></script>


<script src="./assets/js/checkads.js"></script>

checkads.js

function adBlockNotDetected() {
    var adContent = document.getElementById('adblock-alert');
    adContent.style.display = 'none';
}



function adBlockDetected() {
    var adContent = document.getElementById('adblock-alert');
    adContent.style.display = 'block';
}



if(typeof fuckAdBlock !== 'undefined' || typeof FuckAdBlock !== 'undefined') {
    
    
    adBlockDetected();
} else {
    
    var importFAB = document.createElement('script');
    importFAB.onload = function() {
        
        fuckAdBlock.onDetected(adBlockDetected)
        fuckAdBlock.onNotDetected(adBlockNotDetected);
    };
    importFAB.onerror = function() {
        
        
        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 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

<script src="./assets/js/blockadblock.js"></script>


<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

Conclusion

Hope you liked the article. Please share with your friends and keep following 🙂

Code is available in GitHub @ Detect AdBlocker

WHATS NEXT?

You might be interest to learn more on composer please find my whole article on it

Upload File From Frontend Server {GuzzleHttp} To REST API Server In PHP {Laravel}

Simple Way To Create Resourceful API Controller In Laravel

Move Uploaded Files From Local Computer Or Server To Amazon S3 Bucket In PHP

Why And How To Use PHP PDO With CRUD Examples

What Is Method Chaining In PHP?

Send Email In PHP With PHPMailer

How To Upload Multiple Files In PHP?

Proper Way To Validate MIME Type Of Files While Handling File Uploads In PHP

Happy Coding 🙂

programming

via Laravel News Links https://ift.tt/2dvygAJ

June 9, 2020 at 11:42AM