How to Display Alternate Content to AdBlock Users

Ad blocking software like AdBlock and Ghostery are installed on millions of computers and thus affecting the bottom line of web publishers who are dependent on online advertising networks like Google AdSense to pay their bills. It takes time and effort to maintain a website but if the visitors are blocking ads, the revenues are reduced. Ars Technica says this is equivalent to running a restaurant where people come and eat but without paying.

As a website publisher, you have a few options. You can detect Adblock on the visitor’s computer and hide your content if the ads are being blocked. That’s going too far but you may ask for donations (OK Cupid does this) or request social payments (Like or Tweet to view the whole page) from AdBlock users.

The other more practical option is that you display alternative content to people who are blocking ads. For instance, you may display a Facebook Like box or a Twitter widget in the place of ads, you may run in-house ads promoting articles from your own website (similar to Google DFP) or you may display any custom message (see example>>>)

to the visitor.

Before we get into the implementation details.  It contains regular AdSense ads but if you are using an Ad blocking software, a Facebook Like box will be displayed inside the vacant ad space.

It is relatively easy to build such a solution for your website. Open your web page that contains Google AdSense ads and copy-paste the following snippet before the closing

tag. The script looks for the first AdSense ad unit on your page and if it is found to be empty (because the ads are being blocked), an alternative HTML message is displayed in the available ad space.

You can put a Facebook Like box, a YouTube video, a Twitter widget, an image banner, a site search box or even plain text.

<script> 
  
  // Run after all the page elements have loaded
  window.onload = function(){ 
  
    // This will take care of asynchronous Google ads
    setTimeout(function() { 
      
      // We are targeting the first banner ad of AdSense
      var ad = document.querySelector("ins.adsbygoogle");
      
      // If the ad contains no innerHTML, ad blockers are at work
      if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {
        
        // Since ad blocks hide ads using CSS too
        ad.style.cssText = 'display:block !important'; 
        
        // You can put any text, image or even IFRAME tags here
        ad.innerHTML = 'Your custom HTML messages goes here';
      
      }
      
    }, 2000); // The ad blocker check is performed 2 seconds after the page load 
  }; 
  
</script>


One more thing. The above snippet only detects blocking of AdSense ads and replaces them with alternate content. The process would would however not be very different for BuySellAds or other advertising networks.