Adding Google Responsive Ad Unit to your website

Why use Google Responsive Ad Unit ?

Recently Google has launched Responsive Ad Units.Google has long advocated usage of Responsive web design.This is the preferred way to make your website compatible for mobile,tablet and desktop devices.Apart from responsive design there were several other methods as listed in this article.

I was not using Responsive design in past.I was using WpTouch plugin to make this website mobile compatible.There were many reasons of it.One of the reason was Adsense.Earlier Adsense did not have Responsive ad unit.So placing ads was a problem.

You cannot have a 728*90 ad unit on Responsive theme.It will work on desktop but not on small screen devices.Similarly you can not place 320*50 ad unit on desktop website with hope to generate good revenue.Due to all these issues it was better to have separate themes for desktop and mobile websites.

But I was not in favor using two different themes due to maintainability. Things changed somewhat with Custom ads introduced by Google.They allowed publishers to have custom sized ads.Custom ads with some handling on your end can be used on Responsive sites.You need to write CSS rules depending on screen size.I used them on this website along with this theme with good effect.

After responsive ad units came into picture I have removed custom sized ad unit.Instead of them I am using Responsive ad units.They are simple to setup.You do not have to write any custom CSS to handle the screen size issues.I am using Responsive ad units on this site.Later in the post I would discuss details of implementation.

Responsive ad unit fills the available space.The size of ad unit is defined by ad unit type and screen size.We will see ad unit type in next section of this tutorial.For example if the screen width is 900px then ad unit displayed will be 728*90.But if the screen size is 400px then ad unit displayed will be 320*50.So the ad unit adjusts itself according to your theme.

Types of Responsive Ad Units

The only confusing part of Responsive ad unit is type of them.It is good to understand different types of them before implementing them.Also you should experiment them on your website to see the result.Google has four types of responsive ad unit.This is not evident while creating the ad unit.After creating your responsive ad unit you will see code similar to below one.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- your ad unit name will show here -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000"
     data-ad-slot="123456789"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

This code can be divided into two parts.The first part is everything above the comment line your ad unit will show here.You can copy the first part and add it just above </head>.This part can be included only once in your website.There is no need to keep this with every ad unit on your website.

I am using this technique for quite sometime.You can refer this link for Google’s point of view on this.In above code note the data-ad-format.It’s value is always auto.But this value can have below values

  • horizontal – For horizontal ad sizes like 728*90 and 468*60.
  • vertical     – For vertical ad sizes like 160*600 and 300*600.
  • rectangle – For rectangle ad sizes like 300*250 and 336*280.
  • auto         – Lets Google decide the ad size but I found that if width is more then it inclines towards horizontal layout and if height is more then it inclines towards vertical

I first used the ad code with auto parameter.This was making the ad size more horizontal.So I changed the parameter from auto to rectangle.This code change is currently not possible from ad unit creation page of Google Adsense.They do not provide any option to customize this parameter.

May be in future we can see this customization.But for now you can safely edit the ad code and change the parameter.Remember not to modify any other part of ad code.So your ad code will become

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- your ad unit name will show here -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000"
     data-ad-slot="123456789"
     data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

You can test it with any one of the permissible value and see the result.You can also use combination of the above values like rectangle,vertical or rectangle,horizontal.I have not tried using combination of them.The behavior of ads will be tough to predict.

Adding Responsive Ad Units

There are many ways to add responsive ad unit on your website.As mentioned above you need to add first part of code above </head> tag.The second part should be placed where you want to display the ads.It would recommend adding each of the ad code with div elements.I personally enclose each Adsense ad unit in div element with separate class.You can use something like below

<div class="google-ads-1" style="width:100%">
your adsense ad code
</div>

This will make sure that your ad unit covers entire width available to it and also you are enclosing it within div element.Enclosing Adsense ads is a practice I am using for long.I do recommend this to others as well.

Now if you want to add Adsense ads between your content then follow steps mentioned in this tutorial.The approach mentioned in that post is generic and can be used with any advertising network or banner.In case you are not comfortable modifying your theme then you can use any Google Adsense plugin for this purpose.But make sure just to insert into second part of the code if you have added first part above </head>.

Conclusion

I have not experienced any drop in my website revenue using Responsive ad unit.The Adsense earnings and CTR were not impacted.So in case you have experienced any drop in revenue then it would be because of placement.Your present placement might not be inviting more clicks then the previous one.

Switching from one type of ad unit to other type should not have adverse impact on your earning.I have used Custom ads and responsive ads on same locations.So in my case there was no impact on earning.

Do share your experience with Responsive ad units? Are you using them or not on your website.Consider sharing the post in case you found this useful.

One thought on “Adding Google Responsive Ad Unit to your website

  1. Hello,
    It’s actually a great and useful piece of info. I’m happy that you just shared this useful info with us. Please stay us informed like this. Thank you for sharing.

Leave a Comment