Site icon SmartTutorials.net

Detect AdBlock Using JavaScript and Show Adblocker Indication in modal popup using Bootstrap and jQuery

muni

AdBlocking severely affects those who are running the site by only depending on ads revenue. Here is the way to detect AdBlock with JavaScript and show Adblocker Indication in modal popup using Bootstrap and jQuery.

Detect AdBlock with JavaScript Demo

 

Following script will detect if user has enabled the AdBlocker in his browser. If user has enabled the AdBlocker, then the AdBlocker will set the height of the <div> with class ‘adsbox’ to zero/auto.

So when <div> offsetHeight is zero/auto, we will trigger the modal popup to show Indication to the user to disable AdBlocker for our site.

                            
/* Adblock */
$(document).ready(function(){
    (function(){
        var adBlockFlag = document.createElement('div');
        adBlockFlag.innerHTML = '&nbsp;';
        adBlockFlag.className = 'adsbox';
        $('body').append(adBlockFlag);
        window.setTimeout(function() {
          if (adBlockFlag.offsetHeight === 0) {
            showAdBlockPopUp();
            $('body').addClass('adblock');
          }
          adBlockFlag.remove();
        }, 100);

        function showAdBlockPopUp(){
            var adBlockerPopup = $('#adBlockerPopup');
            adBlockerPopup.modal({
                backdrop: 'static',
                keyboard: false
            });
            adBlockerPopup.modal('show');
        }

        $(document).on('click', '#adBlockerPopupRefresh', function(){
            location.reload();
        });

    })();
});
/* Adblock */
Download Detect AdBlock with JavaScript
Instant Download This Script

 
Next I will show you the integration of this How to Detect Ads Blocker On Your Website, and also show you implementation of Adblocker Indication in bootstrap modal popup using Bootstrap and jQuery.

Step 1: Create index.html file with following basic html in it. 

                            
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Detect AdBlock Using JavaScript and Show Adblocker Indication in modal popup using Bootstrap and jQuery</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12">
                <div class="main-content">
                    <h1>
                            Detect AdBlock Using JavaScript and Show Adblocker Indication in modal popup using Bootstrap and jQuery
                        </h1>
                </div>
            </div>
        </div>
    </div>



    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
</body>

</html>

Step 2: Add following html markup before end of </body> tag. This markup related to modal popup which will be shown to the user, if user have enabled adblocker in his site. 


<div class="modal fade" id="adBlockerPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
                <h4 class="modal-title text-center" id="myModalLabel">AD BLOCKER DETECTED</h4>
            </div>
            <div class="modal-body">
                <div>
                    <p>
                        We have noticed that you have an ad blocker enabled which restricts ads served on the site.
                    </p>
                    <p>
                        Please support us by disabling ad blocker for <a href="http://www.smarttutorials.net/">smarttutorials.net </a> ...
                    </p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="adBlockerPopupRefresh">
                    <i class="fa fa-refresh" aria-hidden="true"></i> Refresh
                </button>
            </div>
        </div>
    </div>
</div>

Step 3: Add this simple CSS to style modal popup.

                            
#adBlockerPopup .modal-header{background: #e74c3c;color: #fff;}
#adBlockerPopup .modal-header h4{color: #fff;}
#adBlockerPopup .modal-footer{text-align: center;}
#adBlockerPopup .modal-footer i{color:#fff;padding-right: 5px;}
#adBlockerPopup .modal-footer .btn{border-radius:0px;width: 200px;height: 40px;font-size: 17px;}

Step 4: Finally add the following JavaScript, which will detect AdBlocker, and show the modal popup to the user.

                            
/* Adblock */
$(document).ready(function(){
    (function(){
        var adBlockFlag = document.createElement('div');
        adBlockFlag.innerHTML = '&nbsp;';
        adBlockFlag.className = 'adsbox';
        $('body').append(adBlockFlag);
        window.setTimeout(function() {
          if (adBlockFlag.offsetHeight === 0) {
            showAdBlockPopUp();
            $('body').addClass('adblock');
          }
          adBlockFlag.remove();
        }, 100);

        function showAdBlockPopUp(){
            var adBlockerPopup = $('#adBlockerPopup');
            adBlockerPopup.modal({
                backdrop: 'static',
                keyboard: false
            });
            adBlockerPopup.modal('show');
        }

        $(document).on('click', '#adBlockerPopupRefresh', function(){
            location.reload();
        });

    })();
});
/* Adblock */
Exit mobile version