Finally – Google Adsense now supports responsive design

google adsense for responsive design

Responsive design is one of the hottest trends within webdesign at the moment.

With great support from frameworks like Foundation and Twitter Bootstrap, you can easilly create a site that renders nicely in all devices regardless of the screen size.

While the responsive framewords works great, many webmasters using  Google Adsense ads for monitizing their responsive sites has been very frustrated, since Adsense until now offficially hasn’t been able to show ads that automatically adapts to the users screen size.

I’m saying officially because you could unofficially tweak the Adsense javascript to display different ads based on the users screen resolution, but this was against the Adsense TOS, and your account could get closed if Google detected this.

The good news is that Google now finally allows you to apply certain modifications to the Adsense tags to support ads optimized for a responsive design.

You can see the official blog post from Google Adsense forum here

Responsive Adsense Ad code

In the blog post on the Adwords forum a small code snippet can be found that illustrates how you can insert a responsive Adsense ad.

To get the code working you should first set up a couple of ad units with the sizes that you need for your responsive site.

In the example below the following ad units has been created:

  • Ad 1. Id: 1234567890, width=320px, height:50px
  • Ad 2. Id: 3456789012, width=468px, height=60px
  • Ad 3. Id: 2345678901, width=728px, height=90px

The script detects the screen width of the user device:

width = document.documentElement.clientWidth;

and displays Adsense ads based on the detected screen width.

The default ad is 1 (320×50 px), but if the screen width is more than 500 px, ad 2 is displayed, and if screen size is more than 800px, ad 3 is displayed.

The script looks like this:


<script type="text/javascript">
google_ad_client = "ca-publisher-id";
width = document.documentElement.clientWidth;
google_ad_slot = "1234567890";
google_ad_width = 320;
google_ad_height = 50;
if (width > 500) {
google_ad_slot = "3456789012";
google_ad_width = 468;
google_ad_height = 60;
}
if (width > 800) {
google_ad_slot = "2345678901";
google_ad_width = 728;
google_ad_height = 90;
}

</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Please notice that the script doesn’t detect screen orientation, so this script doesn’t display different ads if the user changes screen orientation.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

Comments are closed.