How to Modify Adsense Code for Responsive Design

By 26-05-2013   AdvertisingTutorials

Google Adsense now allows you to modify Adsense ad code to meet responsive design requirements. A lot of websites like us have switched to responsive design, which allows the same site design to adjust to varying screens size resolutions (as on mobile device browsers) using CSS. Now even Google recommends you use a responsive design instead of creating a separate mobile site to meet specifications of mobile browsers.

So how will 728px  wide banner ads look  when the screen size is 500px –  it will cause horizontal scrolling and will ruin your responsive mobile design experience. Webmasters long wanted an easier way to switch large ads sizes to smaller ad sizes seamlessly on small screen resolutions. Many site owners tried javascripts to detect screen size and change the ad code or use display:none to hide Adsense units at different screens sizes. Even we tried this.  The Adsense team was listening … and they advise that using CSS to hide the ad is not a good idea. So now what…

Adsense Code for Responsive Design

Lets say you have a wide 1000px wide single column design and display a large 728px wide banner below the article. Normally your Adsense code looks like this when inserted in html code

<script type="text/javascript">
google_ad_client = "ca-publisher-id";
google_ad_slot = "1212121212";
google_ad_width = 728;
google_ad_height = 90;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

The Adsense team officially suggests you use this code to meet the requirements of responsive design, you can modify Adsense code like this.

<script type="text/javascript">
google_ad_client = "ca-publisher-id";
width = document.documentElement.clientWidth;
google_ad_slot = "1212121212";
google_ad_width = 728;
google_ad_height = 90;
if (width < 750) {
google_ad_slot = "3434343434";
google_ad_width = 468;
google_ad_height = 60;
}
if (width < 500) {
google_ad_slot = "2323232323";
google_ad_width = 300;
google_ad_height = 250;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

What this code will do is that when the screen is <750 px, it will switch this to a 468px wide smaller banner, and when the screen size is less than 500px, it displays a mobile 300px wide ad. Amazing!

No CSS tweaks and no extra javascript. You can choose different ad sizes to fit different  screen resolutions per your site design.

Remember earlier Google Adsense had helped Adsense publishers modify code for A/B testing to find which ads have higher CTR. I think it was a very essential move that Google Adsense officially allowed this code change, as many possible Adsense modification codes were appearing online to fix responsive design issues and webmasters were confused which code to use, just in case it violates Adsense terms of service.  Try this now and improve your responsive web design.

87 comments on “How to Modify Adsense Code for Responsive Design

  1. Suhas says:

    Hi Chandra, I remember of having read about modifying the AdSense code for responsive we designing but did not go in depth but you article has come at right time for me as I am going to use different ads for various screen sizes. Thanks for this useful info.

  2. Mathew says:

    Thanks for sharing these details which will be work for those people who all are involve in online marketing.

  3. John Demmon says:

    Thanks, I’ve been trying to find advertising that works on my site. I’m fairly fussy about making sure the user experience is good across all devices. It’s good to see that responsive can work for adds too!

  4. P. Chandra says:

    It is very essential to get the right ad sizes for great responsive designs.

  5. Web Designing Amritsar says:

    I have not known this fact, and this information will prove to be very useful for me. Thanks for this helpful information, I have really liked this blog as I get more information in simple and brief content. Keep writing.

  6. chitra says:

    Thanks for sharing this post its very for doing responsive web design

  7. Web Development says:

    I do not know about it, You have explained the things in a simple way. It is good that ads work in any screen size.

  8. Pramod says:

    Wont my adsense account get banned after i modify the adsense code?

    • P. Chandra says:

      Adsense officially allows you to modify ad code for responsive design only. And this is the only acceptable way it can be done.

  9. robert kiyosaki says:

    wow this is very very useful. Thanks for the insight!

  10. Rahul Chalana says:

    Thanks for this!
    i was already suffering from the same problem!!
    i will try these codes now

Leave a Reply

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

*