How to Make Google Adsense Ads Responsive?

Well, it’s now the era of responsive web designs which make a website look good across all types of screen sizes let it mobiles, tablets, desktops etc. Responsive design approach is even recommended by Google to improve indexing of web pages since a responsive theme will keep both the desktop and mobile version of your website on a single URL, thus eradicating multiple URL indexes with the same content.

And the query here is, what if we use Google Adsense ads on our responsive design? Will the ads shrink and expand based on the device size?

The answer is NO! The default Adsense code doesn’t have the functionality to act according to your screen sizes and so a custom javascript code has to be implemented in order for the ads to support your theme/design.
Responsive Adsense Ads

Extras: Best Adsense Alternative for Indian Bloggers

How to Use Responsive Google Adsense Ads w/o Violating TOS?

For best results, use Adsense ads inside WordPress posts (improves CTR) & make sure you’re not blogging on a niche that is not allowed by Adsense or-else you’ll have to search for a better alternative to Adsense later.

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

Don’t forget to replace the “ca-publisher-id” and the three ad units “441XXX3254”, “441X3X3254”, and “4412333XXX” with your own slot values which can be easily found in your Adsense Ad code.

Note: You’ll have to create three different ad units based on the above mentioned sizes in order for your Adsense ads to be responsive. You don’t have fix with the above mentioned sizes. Try other popular ad formats like 336 x 280, 300 x 50 and so on. If you’re unsure about the best performing ad unit for your blog, then try Adsene A/B testing to know which Adsense ad format is giving you good results.

Does Using Responsive Ads Violate the Adsense ToS?

Absolutely not! Google has confirmed that using the responsive Adsense ads does not in any way violate the Adsense TOS until unless you’re not modifying or resizing the Google ads.

Wondering what this code will do? Here it is! When your readers browser resolution is <750 px, the script will adjust itseld to show a 468px wide smaller banner, and when the screen size of your visitor is less than 500px, then it displays a 300px wide ad. Amazing, isn’t it!

You don’t have to tweak your CSS in order to make the Adsense ads responsive. This simple javascript does the job. All you need to do is to chose the proper ad sizes that fits different screen resolutions without spoiling your blog design.

PS: You can also make embedded YouTube/Vimeo videos responsive using a simple CSS tweak.

16 Comments

  1. Radha,
    Nice solution, but, it looks like this solution would indeed break the TOS 🙁
    Section 2 of the Google TOS reveals…
    “including without limitation by not modifying the JavaScript or other programming provided to You by Google in any way”.
    If we don’t use Googles code exactly as they supply it then we run a risk of TOS breakage.
    The way around it is to make your site actually serve different ads based on the http referrer, so a desktop computer gets desktop ads and mobile devices get mobile ads whenever a page is served.
    I’ve created a plugin called Click Missile which does exactly that if you are interested.

  2. Thanks for sharing great information. Is it safe to adsense account. i think ad code modification is against to TOS of Adsense

2 Trackbacks / Pingbacks

  1. Free Responsive Blogger Templates: First SET
  2. How To Make Google Adsense Responsive - SEO Fort Lauderdale

Leave a Reply

Your email address will not be published.


*


Unable to load the Are You a Human PlayThru™. Please contact the site owner to report the problem.