How to modify AdSense Ads dynamically for responsive web design


Read this article to learn how to modify AdSense Ad code to change the Ads according to the device. Responsive design of web pages provide an optimal user experience across all devices and it is a good idea to modify the AdSense ads to be responsive just like the content in the pages.

You are a webmaster or blogger and use AdSense to monetize, but have you checked how your Ads appear in various devices? Does your web pages follow responsive design to provide a good user experience across various devices like desktop, laptop, tablet PC, smartphones etc? How the Ads appear in those devices? Do they cover the whole screen, making the frustrated user leave your site quickly?

If you are looking for a web design company in Cochin, we can help you. We have a strong team of experienced web designers in Kochi, Kerala.

Responsive Design aims at providing a great user experience for the websites, no matter which device is used to browse. The layout of the pages will adapt or change according to the screen. This kind of design is gaining momentum since a good share of the internet users are now using non-PC devices and this rate is expected to be increased further in the future.

Responsive Design offers a great user experience for the websites across a wide range of devices. But how about the AdSense Ads? They are not "Responsive" by design. No matter which device you use, the Ads will remain the same and could go out of view for the users or even hide other content, depending on the device.

How to make AdSense Ads Response


The default AdSense ad code generated from the AdSense account is not "responsive" and will not adapt to the device. This also means, the AdSense Ads may come in the way, while the rest of your site adapts according to the device used.

In order to provide a better user experience, you may modify the AdSense Ad code and use some simple Javascript to adapt the Ads according to the screen size.

Here is some sample code provided in an official AdSense blog, which shows modification to AdSense code for Responsive web design.

<script type="text/javascript">
if (window.innerWidth >= 800)
{
google_ad_slot = "xxxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
}
else if (window.innerWidth >= 468)
{
google_ad_slot = "zzzzzzzz";
google_ad_width = 468;
google_ad_height = 60;
Else
{
google_ad_slot = "yyyyyyyy";
google_ad_width = 300;
google_ad_height = 250;
}
</script>
<script type = "text/javascript"
src = "http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

You can see more details of it here:

Even though Google AdSense policies do not allow modification to the AdSense code generated from the AdSense account, this change was given an exception according to the blog I mentioned above. You are welcome to try the above changes in your website and provide a better user experience for your website in different devices.


Read 12 simple and effective tips to improve your AdSense CPC


Article by Tony John
Tony John is a professional blogger from India, who started his first Weblog in 1998 at Tripod.com. Tony switched to blogging as a passion blended business in the year 2000 and currently operates several popular web properties including IndiaStudyChannel.com, Techulator.com, dotnetspider.com and many more.

Follow Tony John or read 703 articles authored by Tony John

Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: