Blogger Tutorials

How To Display Alternate Content In Place Of Ads If Adblocker is Enabled

Many of us always seeks an Idea about working in a best way with ads so that they can perform well and give much money for our work. Of course we are publishers and we are having right to display contents with proper ads for some earning because we are writing posts for free then it might be a fatal problem for us. As we can see over the internet most of the users are now using adblocker which prevents them from viewing ads hence,making us a fool because we are not getting any reward for serving them.

Many of us use ad serving partner such as Google Adsense and as we know they are the best advertiser and biggest advertiser of the world.So, I am today going to share a simple code(scripts) which will help you to show any Image or Any widget in place of Adsense ad codes. below is a link for demo:

            CLICK HERE FOR DEMO


All you have to do is just copy the below code in a new HTML/JAVASCRIPT widget of the blogger or any platform.If you want that this code should work in a specific page then you can also paste it under HTML area of any post or page.

Note: This code is only implemented for Google Adsense codes.You can further add proper strings to work with all the others ad serving networks. However this is 100% safe because we are not manipulating the adsense code.

This is the code for universal ad sizes but only work upto first and second ads:

<script>
    // this line executes the entire code once page is loaded
    window.onload = function(){
 
    setTimeout(function() {

    // here we are searching for first adsense code available on page
    var ad = document.querySelector(“ins.adsbygoogle”);

    // If ad contains no innerHTML, adblocker is working
    if (ad && ad.innerHTML.replace(/s/g, “”).length == 0) {

    ad.style.cssText = ‘display:block !important’;

    // here you can put any html code to show as alternative
    $(“.adsbygoogle”).after(‘Your html alternative content here‘);
 
    }
    }, 1000);
    };
</script>

<script src=”//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>

This is the code for Manual ad sizes:

This below code is for those who wanted to show different alternatives to different ad sizes.

<script type=”text/javascript”>
      window.onload = function() {
        setTimeout(function() {
          var ad = document.querySelector(“ins.adsbygoogle”);
          if (ad && ad.innerHTML.replace(/s/g, “”).length == 0) {
 
             //here we are using a loop condition to check each ad spaces on the page
   $(“.adsbygoogle”).each(function() {

 // Here we are checking if the ad size is 300.
 // You can use your own size. Multiple sizes can be given using &&

 if($(this).width()==’300‘){
 ad.style.cssText = ‘display:block !important’;
               $(this).after(‘Your custom item for 300px width ad space‘);
 }
 // Here you may add another condition for other ad sizes
 // Same code but change ad size according to your need

 });
          }
        }, 1000);
      };
    </script>
 <script src=”//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>

You can change item in red color text according to your needs. 

Always remember one thing that your visitors should not feel bad by seeing alternative in place of ads code because this is also going to make them irritated as there are very few people who will thought of your message.

If a someone feels happy by finding appropriate help from your website there might be a chance that they will share about your website to others which will help to increase your traffic. So don’t run for money and keep blogging!!!

Article written by:

Satyendra is a market researcher from the city of nawabs, Lucknow. Apart from blogging, his other interests are Indian rap knowledge, affiliate marketing, research, and basically anything nerdy.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

back to top