How To make Custom-Sized Adsense Ads Responsive

Blogging Tips and Tricks How To Internet

You can however still make your custom-sized ad units responsive such that their suggested size changes based on the device size or orientation.

Custom-Sized Adsense Ads
Google may serve display ads of lesser dimensions inside custom-sized ad units.

HOW TO MAKE CUSTOM-SIZED ADSENSE ADS RESPONSIVE

 

Here’s the code:

<div id="google-ads-1"></div>
 
<script type="text/javascript"> 
 
    /* Replace ca-pub-XXX with your AdSense Publisher ID */ 
    google_ad_client = "ca-pub-XXX";
 
    /* Replace YYY with the AdSense Ad Slot ID */ 
    google_ad_slot = "YYY";
  
    /* Replace ZZZ with the custom height of your Ad Unit */
    google_ad_height = ZZZ;
  
    ad = document.getElementById('google-ads-1');

    if (ad.getBoundingClientRect().width) {
        google_ad_width = ad.getBoundingClientRect().width;  
    } else {
        google_ad_width = ad.offsetWidth; // for old IE 
    } 

    /* The width of an Ad unit should be between 120-1200 pixels */  
    if (google_ad_width>1200) {        
        google_ad_width = 1200;
    }  else if (google_ad_width<120) {
        google_ad_width = 120;
    }  

    /* The height of an Ad unit should be between 50-1200 pixels */  
    if (google_ad_height>1200) {        
        google_ad_height = 1200;
    }  else if (google_ad_height<50) {
        google_ad_height = 50;
    }  
      
    /* Both height or width cannot be more than 300 pixels */  
    if ((google_ad_width>300) && (google_ad_height>300)) {        
        google_ad_height = 300;
    }  
    
    document.write (
     '<ins class="adsbygoogle" style="display:inline-block;width:' 
      + google_ad_width + 'px;height:' 
      + google_ad_height + 'px" data-ad-client="' 
      + google_ad_client + '" data-ad-slot="' 
      + google_ad_slot + '"></ins>'
    );
  
    (adsbygoogle = window.adsbygoogle || []).push({});
 
</script>

  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script

Thanks to Mr.Amit Agarwal for the code

Go to your AdSense dashboard and create a new Ad unit. Set the Ad Size as “Custom Ad Unit” and specify the dimensions as 300×1200 pixels. Set the Ad Type as “Text & Display Ads” and click the “Save and Get Code” button to generate the AdSense ad code. Note your AdSense publisher ID, Ad Slot ID and replace those values in the above block of code (line #6 & #9). You should also change the default height (line #12) of your custom sized unit (the width is automatically determined by JavaScript). Copy-paste the modified code anywhere in your web template and the custom-sized ads will fill the available width while being responsive. The technique will work on both responsive and regular (non-responsive) websites.

.

Tagged

Review Overview

Summary

Leave a Reply

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