Press "Enter" to skip to content

JavaScript: Detect AdBlock and show modal window, hide website content or show custom ads

If you are running a website, you must know how annoying are AdBlock users. You try to give the best possible content for your users for free and you want simply to earn some money by external advertising services like Google Adsense, but AdBlock users are constantly minimizing your incomes.

So… JUST DETECT ADBLOCK!

Sounds clever, doesn’t it?

There are several ways how we can use AdBlock detection on our sites and we will describe it below. Click link to scroll down:

  1. Generic way to detect AdBlock users.
  2. AdBlock detected: Show modal window and ask for disabling AdBlock.
  3. AdBlock detected: Hide part of content for AdBlock users
  4. AdBlock detected: Show custom ads (with image and link)

1. Generic way to detect AdBlock users

That’s very simple. We must do a few steps. Generally, when AdBlock is turned on, it means that container with ad like Adsense will have no real content, so it it’s CSS height value will be “auto”, than its real height without content (ads) will be equal to 0 px.

I was using in my examples the jQuery library to make everything easier.

We must do it of course by using JavaScript but we must also check that in right moment. External ads are not loaded in the same moment as our website content. It usually takes a short while to load the external ads, like AdSense. So we must run our code when whole content of website (also with external ads) is loaded. This is onload event triggered on window element.

In our example below AdBlock is detected and another (normal image banner with link) ads are displayed to the end user.

So in this generic method we must wrap external ads container (e.g. Google AdSense) with a <div class="ad"></div>  element, like:

<div class="ad">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-YOUR-ADSENSE-CODE"
             data-ad-slot="ADSENSE-CODE"
             data-ad-format="link"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

And in JavaScript code we must write simple code following above instruction with detecting ad’s container height:

(function () {
  $(window).load(function () {
    if ($(".ad").first().height() < 10) {
      //ADBLOCK IS TURNED ON!
      //DO SOMETHING
    }
  });
})();

2. Show modal window and ask for disabling AdBlock

This case is probably the most popular – when user has enabled AdBlock, then we will show very simple modal window. In this modal window we can write the ask to turn off the AdBlock and reason why it is so important for us – e.g. we can earn money by advertising to pay for hosting, domain etc.

detect adblock
detect adblock

In our HTML code we must wrap ad container with a <div class="ad"></div>  element and at the end, before </body> cloasing element we must put modal widnow code.

Open the example HERE – please remember to turn on AdBlock to see how the detection works.

If you are interested in creating modal or popup window in pure JavaScript then check our tutorial here.

HTML

<div class="ad"><!-- outer div with additional class for defining styles for own ads -->
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-YOUR-ADSENSE-CODE"
             data-ad-slot="ADSENSE-CODE"
             data-ad-format="link"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

<!-- YOUR NORMALN HTML CONTENT -->

<div class="modal-fader"></div>
<div class="modal-window">
    <h2>Please turn off the AdBlock</h2>
    <p>Let us earn money by advertising. We need it to provide you the best possible content.</p>
    <button class="modal-btn modal-hide">Close</button>
</div>

JavaScript

(function () {
    $(window).load(function () {
        if ($(".ad").first().height() < 10) {
            $(".ad").each(function () {
                $(".modal-fader").show();
                $(".modal-window").show();
            });
        }
        
        $(".modal-hide").click(function () {
            $(".modal-fader").hide();
            $(".modal-window").hide();
        });
    });
})();

CSS

.ad {
    text-align: center;
    background:  # FFF;
    padding-top: 2rem;
    max-width: 100 % ;
    overflow: hidden
}

/* ---------------------- */

.modal-fader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 99998;
    background: rgba(0,0,0,0.8);
}

.modal-window {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99999;
    background: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-family: sans-serif;
}

.modal-btn {
    background: #36a5a5;
    border: none;
    color: #fff;
    padding: 10px 15px;
    box-shadow: none;
    border-radius: 3px;
    text-decoration: none;
}

Check above code on our Gitlab account HERE.

3. Hide part of content for AdBlock users

Another way to ask AdBlock users is to hide part of content on our page for them. Here the way how we handle that is similar like in above 2 examples, but only the HTML code is a little more sophisticated.

In this example we do not hide the content by display: none; CSS rule, but we create nice looking hiding with fading of the content, what will look like on image below:

detect adblock

Open the example HERE – please remember to turn on AdBlock to see how the detection works.

Our HTML code can look like below. I put below the whole example of the page content in body:

HTML

<body>
    <h1>This is the title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
    <div class="ad"><!-- outer div with additional class for defining styles for own ads -->
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-YOUR-ADSENSE-CODE"
             data-ad-slot="YOUR-ADSENSE-CODE"
             data-ad-format="link"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>
    
    <h2>Subtitle level 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
    <div class="adblock-show">
        DISABLE ADBLOCK AND REFRESH PAGE TO READ MORE
    </div>
    <div class="adblock-hide">
        <div class="adblock-hide-fader"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        
        <h2>Next subtitle level 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        
        <h3>Next subtitle level 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    
</body>

CSS

.ad {
    text-align: center;
    background:  # FFF;
    padding-top: 2rem;
    max-width: 100 % ;
    overflow: hidden
}

.adblock-show {
    text-transform: uppercase;
    color: red;
    font-weight: bold;
    font-size: 1.5em;
    font-family: sans-serif;
    display: none;
}
.adblock-hide {
    position: relative;
}
.adblock-hide-fader {
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80px, rgba(255,255,255,1) 100%);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.adblock-hide.active {
    height: 110px;
    overflow: hidden;
}

.adblock-hide.active .adblock-hide-fader {
    display: block;
}

JavaScript

(function () {
    $(window).load(function () {
        if($(".ad").first().height() < 10) {
            $(".adblock-show").show();
            $(".adblock-hide").addClass("active");
        }
    });
})();

Check above code on our Gitlab account HERE.

4. Show custom ads (with image and link) when user has AdBlock

This is the most tricky way to treat AdBlock users. We do not display any kind of ask to them, but we replace external ads (like Google Adsense) with our custom ads. Then we can advertise some our content or we can make a deal with someone to display his or her ads here 🙂

Open the example HERE – please remember to turn on AdBlock to see how the detection works.

HTML

  1. Wrap our third-party ads code with div with class “ad-ext”
  2. Create on the same level the sibling div with class “ad-own” – here put our “traditional” ad, like image banner wrapper with link tag “a”.
  3. Wrap both divs with one outer div with class “ad”.
  4. If we have many places with ads on our website, we can add to outer div additional class which will identify it and make possible custom styling of that, like class: ad-location_1, ad-location_2, ad-location_3 etc…
<div class="ad ad-location_1"><!-- outer div with additional class for defining styles for own ads -->
    
    <div class="ad-ext"><!-- div containing third-party ads, here from Google Adsense -->
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- ads code -->
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-YOUR-ADSENSE-CODE"
             data-ad-slot="ADSENSE-CODE"
             data-ad-format="link"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

    <div class="ad-own"><!-- div containing your own, tradictional ads, with image and link -->
        <a href="https://YOUR-AD-URL.COM" target="blank" title="Click here for more">
            <img src="your-ad-image-banner.jpg" alt="Image alternative description">
        </a>
    </div>

</div>

JavaScript

  1. We are using here jQuery to make everything easier.
  2. Start from window’s “load” event. This is very important. Script must wait with detection till third-party ads will load or not. The “load” event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
  3. Check if at least one third-party ads’ container has height smaller than 10 (px). Why 10px? Because sometimes, in some browsers empty container with adsense ads can be e.g. 1 or 2 px high. So 10 is a big enough margin.
  4. Iterate through all html containers (divs) with class “ad”.
  5. Inside iterator callback function, once the JavaScript code is “inside” one ad container (div) do as following:
    – add class “active” to current element (with class “ad)
    – find and hide element with class “ad-ext”
    – find and show element with class “ad-own”
  6. This algorithm will simply check if ads were blocked, and hide third-party empty ads container, and show container with our own “traditional” ad.
(function () {
    $(window).load(function () {
        if ($(".ad").first().height() < 10) {
            $(".ad").each(function () {
                $(this).addClass("active");
                $(this).find(".ad-ext").hide();
                $(this).find(".ad-own").show();
            });
        }
    });
})();

CSS

CSS styling should provide proper displaying our own “traditional” image based ads. So we need to provide styles to make image always looking properly. The most important part in CSS is only to put rule for class .ad-own the display property with value “none”, like below. Our CSS code looks like below, you can reuse and adjust it for your purposes.

.ad {
  text-align: center;
  background: # FFF;
  padding-top: 2rem;
  max-width: 100 % ;
  overflow: hidden
}
.ad-own {
  display: none;
}
.ad.active.ad-location_1 img {
  max-width: 100 % ;
  max-height: 300px;
}
.ad.active.ad-location_2 img {
  max-width: 100 %
}
.ad.active.ad-location_3 img {
  max-width: 100 % ;
  max-height: 300px;
}

Check above code on our Gitlab account HERE.


I hope that with functionality described in this article for detecting AdBlock in user’s browser you will gain now a possibility to “fight” against unfair users who block ads by which you can earn some money to e.g. pay the hosting and domain.

THE END 🙂