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.