How To Make Google Adsense Ads Responsive ?

Responsiveness  has now become the key to blogging success.Responsive layouts has also became the trending fashion,but a huge draw back that was pulling it was inability of Google adsense to become responsive.But a few days ago Google has officially accepted Adding java script to make a Google adsense responsive.

Responsive Google AdSense Ads

If you been using Google AdSense Ads on your responsive website, you may have noticed that, unlike your content, th Google ads have a fixed width and they will not shrink or expand based on the device size.,,

For instance, if you are using the standard 728×90 unit on your website, the ad unit may extend well beyond the screen if someone visits your website on a (320 pixels wide) mobile phone or one of the lower resolution tablets.

Google AdSense Ads aren’t responsive by default but you can use a bit of JavaScript code to make them respond to the screen size. The logic is pretty simple. You create multiple ad units (say 768×90, 468×60 and 300×250) and based on the size (width) of the user’s device, the most appropriate format get  served.

JavaScript for making Google ads Responsive

<script type="text/javascript">
   var width = window.innerWidth || document.documentElement.clientWidth;
    google_ad_client = "ca-publisher-id";
    if (width >= 800) {
       google_ad_slot = "ad-unit-1";
       google_ad_width = 728;
       google_ad_height = 60;
    } else if ((width < 800) && (width < 400)) {
      google_ad_slot = "ad-unit-2";
      google_ad_width = 300;
      google_ad_height = 250;
    } else {
      google_ad_slot = "ad-unit-3";
      google_ad_width = 468;
      google_ad_height = 60;
    }
</script>
<script type="text/javascript"
       src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

Remember to replace the google_ad_client and google_ad_slot identifiers with your own values (you can easily find them in your AdSense JavaScript code).

Does this script Violate Google adsense Policies?

You may Need to Take a Look at these images.When use of this code became a problem,one of the adsense publishers like me have send  a letter to Google asking if the use of the code is Appropriate?Google adsense Support has send the Below message back..

“De voorbeeld website die u stuurt geeft al de juiste javascript code die u kunt gebruiken.” Google AdSense support has confirmed that Responsive Ads are allowed.

The rough Dutch to English translation is:


Hello Michael 
Thanks For your mail !
AdSense Ads can be adapted to different screen sizes using a simple JavaScript snippet. To take advantage of responsive design, create multiple ad formats, such as 728×90, 468×60 and 300×250. Then you implement an “if-else’ fragment so that the right ad format is displayed based on the size of the device of the user.
The example website that you sent has the correct JavaScript code that you can use. Well I would like to emphasize that further change the AdSense code is not allowed. Advertisements may also not be hidden with CSS.

Thus you won’t violate any of the AdSense program policies for using responsive ads on your website. The JavaScript snippet isn’t modifying the AdSense code but is simply requesting a different ad unit based on the viewport width of the current visitor’s screen.