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.

Incoming search terms:

  • responsive adsense
  • adsense responsive design
  • adsense responsive
  • responsive google ads
  • google adsense responsive
Last Updated on by Radha Krishna under Blogger, Wordpress Category 18 Comments

Tags: ,

 

Share This Article

Get Free Email Alerts

Stay Updated with Useful Blogging Tips. Get Free Email Newsletter Updates..

And, Next Confirm Your Email Subcription

   

18 Comments to “How to Make Google Adsense Ads Responsive?”

  1. Rob says:

    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?

  2. kartik says:

    Awasome information your information really work for us thanks for posting this article
    kartik recently posted..How to Add YouTube videos embed to blog or blogger accountMy Profile

  3. tablet pc says:

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

  4. […] 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? […]

  5. Good you mention it does not violate the TOS of Google AdSense. Thanks for the code.
    Thomas Vanhoutte recently posted..Mijn TOEFL-test ervaringenMy Profile

  6. Zeaks says:

    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. Stuart says:

    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.
    Stuart recently posted..New Click Missile WordPress Ads PluginMy Profile

  8. This is indeed awesome as i have been wondering how i can monitize my site especially whe its viewed on mobile .Thanks
    Nwosu Desmond recently posted..Top Apps of 2012 from Google And Apple RatingsMy Profile

  9. Marina says:

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

    Regards!
    Marina recently posted..Frases de Amor Para FacebookMy Profile

  10. Lynda Wyatt says:

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

  11. Nadiar says:

    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;
    Nadiar recently posted..Apa itu Paypal? Bagaimana Cara Memakai Paypal?My Profile

  12. Jasonkit says:

    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
    Satish@technologyflow recently posted..Top 5 Google Chrome Browser ExtensionsMy Profile

Leave your comment here:

CommentLuv badge

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

 
We Use & Recommend
[Bluehost - Review | Installation | Discount ] Bluehost Coupon
Free Email Alerts
Facebook Twitter Google Plus RSS Feed Email
Rate Us

Like US