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.

Comments

  1. It helps a lot….

  2. This is an awesome post, thanks for your help. When I adjust my browser now on http://www.macaerials.com different ads show. Is it also possible to use percentages so that ads can scale to fit the page but if they become too small then a different type of ad is shown?

  3. Awasome information your information really work for us thanks for posting this article

  4. :D! New post! You’ve unquestionably been working on your writing skills. Good work 🙂 Thank you so much for the creativity of well – you!

  5. Good you mention it does not violate the TOS of Google AdSense. Thanks for the code.

  6. Thanks for this post. I don’t know why Google can’t create some way to create responsive AdSense Ads, I’ll try this out.

  7. 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.

  8. This is indeed awesome as i have been wondering how i can monitize my site especially whe its viewed on mobile .Thanks

  9. I think break the TOS but a solution is needed, traffic that is generated by the mobile can reach 50% in some sites

    Regards!

  10. Is it possible to have google’s mobile ad units on a responsive design?

  11. Sure it can,

    Great tuts, I’m looking for this one. And I agree with you, I don’t think it will break the TOS;

  12. Thanks for the great coding. Ill try it out. Great great..

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

Trackbacks

  1. […] Responsive designs are booming these days with the increasing number of users browsing the web on their Smartphones. The specialty of a responsive design is it actually responds as per the user’s device screen size. So, if a user views a blog with a responsive design from his computer, mobile or tablet with any screen resolution, the theme will automatically adjust itself to the screen size of the user, thus providing him better reading experience. Also See: How to Make Adsense Ads Responsive? […]

Speak Your Mind

*

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