How to detect AdBlock

Sponsored

Ads can be annoying. And in most cases they are. However, Google AdSense is doing quite an impressive job with displaying relevant advertisements. As a webmaster, you might encounter a problem with low CTR (click-through-rate) on your website. In other words, users are visiting your resource, but because of AdBlock in their browsers, they don’t see any ads. This issue is especially hard to approach on technical websites where users tend not to click on a bait banner.

As a webmaster, I was looking for something that can convince users to express some loyalty to support my efforts. The most ethical solution, in my opinion, would be just a straightforward friendly asking to disable AdBlock if your visitors like the website.

Here is the Javascript code that worked for me. I suggest placing it at the end of your webpage, just above the </body> tag.


<div id="banner-12345">
   If you like this website and want to support us, consider disabling the Adblock. Thank you! :-) </div>
<style>
    #banner-12345 {
        display: none;
        margin-bottom: 30px;
        padding: 20px 10px;
        border-radius: 5px;
        background: #D30000;
        color: #fff;
        text-align: center;
        font-weight: bold;
    }
</style>

<script>
var adBlockEnabled = false;
var testAd = document.createElement('div');
testAd.innerHTML = '&nbsp;';
testAd.className = 'adsbox';
if(document.body != null){
document.body.appendChild(testAd);
}
window.setTimeout(function() {
  if (testAd.offsetHeight === 0) {
    adBlockEnabled = true;
   $('#banner-12345').show();
  }
  testAd.remove();
  console.log('AdBlock Enabled? ', adBlockEnabled)
}, 100);
</script>

Enjoy!

Be the first to comment

Leave a Reply

Your email address will not be published.


*