Responsive Web Design and Google Adsense

These days lot of people access website on smartphones and tablets, which has made the life of the web designers and developers more difficult, thanks to Apple and Google for giving smartphone and tablets in almost every hand. A recent survey mentions that 35% of American adults have smartphones and 87% of them access internet on their phones. That is the reason most of the big websites are working on responsive web designs.

Google has also officially recommended that website owners use the responsive design approach instead of maintaining separate mobile and desktop website as responsive design “keeps your desktop and mobile content on a single URL.”

Google Adsense And Responsive Layouts

Its likely that you use Adsense to monetize the content on your website but the problem is that ads delivered by adsense are not responsive, which means that if a user visits a responsive website on a smartphone all the Adsense ads will be delivered of the same size. Lets take an example to make things more clear, if a website is using 728×90 banner and you are viewing the website on a mobile phone, the webpage might extend beyond the screen. That being said, how can we deliver ads of different size based on the viewer screen. Google Adsense is not responsive by design, but can be made to work with your responsive design with a simple Javascript code.

Thanks to Amit from Digital Insipiration for this awesome code.

Lets make our hands dirty and try to understand this code. We are basically using the javascript offsetwidth property to get the width of the div element which encloses the google ad and based on the width we are delivering different ad banners and if the screen width is too small we are not displaying the ad at all.

To get started, create multiple ad units (say 768×90, 468×60 and 300×250) inside your AdSense dashbaord and replace the relevant google_ad_client (ca-pub-1234) and google_ad_slot (AAA, BBB, etc.) identifiers in the code with your own values.

Let me know how this goes. Until next time..!!!

Comments

  1. Basavaraj Tonagatti says

    Hi, I recently moved to Genesis Framework+Eleven 40 Theme. I am also facing the same problem. But where I need to paste this code on my blog? Can you guide me please? I am using Quick Adsense plugin to post the codes on my site.

    • says

      If you want to add an ad above the post you can write one function in your theme’s functions.php like this,

      function google_ad_before_post()
      {
      if (is_single()) : ?>

      <?php endif; //End is_single
      }
      add_action('genesis_before_post_content', 'google_ad_before_post');