How to create Responsive Google Adsense Ad unit
Responsive design is in fashion and all over the internet, every blogger, Webmaster, company etc. are using responsive design for their website and blog, so that mobile and tablet users get better visiting experience without any deformation of the website template. Similarly like responsive website templates, responsive ads are also required for better website monetization. In this article I will tell you how to create responsive Google Adsense ad unit and will test the results.
On 11th July 2013, the Google Adsense team announced their responsive Adsense ad unit for publishers to give their visitor better user experience. Currently this responsive ad unit is in beta version and by default it is best for 728×90 Leaderboard ad slot and adapt itself to 468×60 banner ad when browsed through Smartphones & tablets. If you want another size, then you will have to specify the size dynamically through CSS. Example of resizing can be found at Google help.
Steps to Create Responsive Adsense Ads
Follow the below simple steps to create responsive Google Adsense Ad unit.
1. Go to your Adsense account.
2. Click on MyAds and create new Ad unit.
3. Now in Ad size choose Responsive Ad unit (Beta) as shown below.
4. Now you have to select ad style, which you generally do while creating regular Adsense ad unit and click on save and get code. The code will look like below.
<style>
.responsive-ad-example { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive-ad-bottom { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive-ad-bottom { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive Ad Bottom -->
<ins class="adsbygoogle responsive-ad-example"
style="display:inline-block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Note: This responsive ad code is only applicable for responsive website themes.
Now copy this code and paste it to your webpage and see the result. We have implemented this Adsense code directly to our website without any modification in CSS and it worked perfectly. And below are the results.
Recommended Article : How to Earn through Google Consumer Survey
Responsive Ad Testing
When I do a responsive test for our Tech2blog theme for 480P, then I got 320×50 Adsense banner instead of 728×90 leader board.
With 768px size the Google Adsense ads become 468×60 and with 1024px, Adsense unit displayed is of 728×90 size as shown below.
If you have seen above responsive Adsense code carefully, you will notice that size of ad is already defined for a particular screen size. Like if minimum width is 500px, then 468×60 ad banner will be displayed and if screen size is more than 800px, then 728×90 ad banner will be shown.
Above was the simple tutorial to create a responsive Adsense ad unit with their result. Responsive Google Adsense ads of different size are showing nicely on our website with integration of responsive ad code. You can always define your own ad unit size for different screen resolution but it should be as per Google guidelines. Hope you will implement responsive ad code in your website too and will give your user better experience. Let us know through your comments, if you face any issue or want to give your feedback.
About the Author
Pawan
Related Posts
13 Comments
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Hey great post man . I have bookmarked your page and will definitely use your tips as and when I get approved for Google adsense 🙂
Thanks
Pritam –
Thanks Pritam, hope you get your account soon. Keep blogging.
HI Pawan
I am a newbie and currently my adsense not approved but after it i gonna apply this Trick. nice Sharing Bro.
You are Welcome Gautam, sure try this and give better experience to your visitors.
Thanks for this tip, now my Google Adsense earning going to be good.
Welcome Muneeb and thanks for liking our article, hope to see you around.
Good information about responsive Adsense ad unit.
Thanks for giving your feedback Gaurav.
Nice info Sir!
Is this ad unit works for blogger template??
Yes, these responsive ad units work in Blogger template too but you should have a responsive blogger template for that.
Hi Pawan, you have explained this in detail however as per the Adsense Terms we should not edit the adcode, is this allowed?
Rahul, we are not modifying any code of Adsense ads. This is Google Adsense approved, you can check their blog about this.
Thanks man… Nice tutorial