Making Adsense code work with Responsive Design

Written by Tushar. Posted in Blogging

As discussed earlier, mobile device users are growing rapidly these days and need for responsive design is a must. Now for Adsense publishers, what they should do to make Adsense code compatible with responsive design of website. Don’t worry Google has allowed modification of Adsense  ad code to match the responsiveness of website. You can visit the following link of Adsense Help page.

Also for getting information regarding Responsive website, read the following blog post.

The need for adsense code modification was much necessary, as imagine a situation in which how banner code of size 468 x 60 will be displayed on iphone having screen resolution 320 x 480. To overcome this situation, we need to display different size ads depending upon different screen resolutions.

Google Adsense Responsive Design

Adsense for Responsive Design Websites

To make Adsense adjust to various screen resolutions or responsive design, a little JavaScript modification is needed. The modification is done by adding some if-else conditions. In the following example, we will take three ad units of different sizes. In our example all three adsense units are banner ads.

  • 728 x 90 adsense ad unit for screen width greater than 900 pixels.
  • 300 x 250 adsense unit for screen width less than 500 pixels.
  • 468 x 60 adsense unit for screen width between 500 pixels and 900 pixels.
<script type=”text/javascript”>
google_ad_client = “ca-publisher-id”;
if (window. innerWidth >= 900) {
google_ad_slot = “ad-slot-number″;
google_ad_width = 728;
google_ad_height = 90;
} else if (window.innerWidth < 500) {
google_ad_slot = “ad-slot-number″;
google_ad_width = 300;
google_ad_height = 250;
} else {
google_ad_slot = “ad-slot-number″;
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type=”text/javascript” src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”></script>

Note: In the above code, replace the google_ad_client marked with red color with your publisher-id and similarly replace for the google_ad_slot.

How Above code Works ?

In the above JavaScript snippet, “window.innerWidth” determines the screen width. Now using this we are actually displaying the adsense code that can be adjusted to the screen width or responsive design. In our example three adsense units were taken. If you want to customize with more screen widths then just add more if-else conditional statements. All depends upon your theme and the placement of ads.

Also remember to check your adsense code are working perfectly or not in mobile devices. Check your website for responsiveness using mobile device emulators. I will recommend using, Responsive Web Design Testing Tool by Matt Kersley.

Also to note, above example will not work with the new Asynchronous Adsense codes. This modification will work only for the old Adsense codes.

If Google approves using the modification for asynchronous adsense codes then I will post the tutorial for that in the coming days.

Tags:

Tushar

If you like this post then follow on Twitter and Facebook. If you have any query then contact the author.

Comments (1)

Leave a comment