Increase your revenue with the new responsive ads in Google Adsense

optimize revenue with responsive google adsense

With the growing popularity of responsive web design, the missing responsive ad formats in Google Adsense has been a headache for many webmasters.

In may 2013 Google changed the terms of use for Adsense, allowing small modifications of the adsense javascript that supported simple responsive ads

Now Google has updated the support for responsive ads with a new javascript code, that also supports asynchronous loading for increased page load speed.

So now you can finally monetize your responsive website with the help of Google Adsense.

Responsive ads in Google Adsense

Installation of the new Google Adsense javascript is quite different from the previous versions.

To get the new script in Google Adsense, navigate to My ads => New ad unit, and select “Responsive ad unit (beta)”

resp

You can select 2 types of modes for your responsive ad units:

  1. Smart sizing – Adsense automatically selects ad format based on screen size
  2. Advanced – You can specify which ads you want to display for the different screen sizes

We’ll cover how to work with both modes in this post.

Responsive Google Adsense – Smart sizing

Smart sizing is very easy to implement. Just copy the code to your site, and you’re up and running.

Based on the users screen resolution, a responsive ad will automatically be displayed.

The default “Smart sizing” code looks like this:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ert -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2468642896312497"
     data-ad-slot="8707922608"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

If you have several Adsense ad units on the same page, you can optimize the Adsense code by only calling the Adsense javascript once.

Just insert the Adsense javascript snippet on top of every page just after the <body> tag:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

And then remove the Adsense script from the individual ad units. Eg:

<!-- ert -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2468642896312497"
     data-ad-slot="8707922608"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Now your site is serving responsive Adsense ads.

In many cases it might be nice to have more control over which Adsense units is used at the different screen resolutions.

In this case, just continue reading to learn about the  advanced mode.

Responsive Google Adsense - Advanced mode

The advanced mode for responsive Google Adsense ads allows you to specify which ad formats that should be displayed at different screen sizes.

The standard code looks like this:

<style>
.my_adslot { width: 320px; height: 50px; }
@media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }
@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ert -->
<ins class="adsbygoogle my_adslot"
     style="display:inline-block"
     data-ad-client="ca-pub-2468642896312497"
     data-ad-slot="8707922608"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The code contains css styles for the different screen resolutions.

The script then uses the css class when displaying a ad.

In this example the class is called “my_adslot”. If you want different ad units with different ad formats on the same page, just create new css classes, and call different css classes in different ad units.

The CSS for the different ad sizes is included in the default code for each ad unit, which isn’t very efficient if you want to experiment with different ad sizes and formats.

Instead I suggest that you create individual css styles for your different ad sizes and copy these css styles to you normal stylesheet. With this little change you can now create new ad sizes and update your site globally by adjusting your css.

The CSS for a Adsense ad unit looks like this:

<style>
.my_adslot { width: 320px; height: 50px; }
@media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }
@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>

First you define a name for the css class and a default value (a adunit of 320px x 50 px in this example). Then you define which ad units that should be displayed at different screen sizes.

You can use all Adsense ad formats for your css.

The code for the Adsense ads looks like this when you have removed the css parameters to your global style sheet:

<!-- ert -->
<ins class="adsbygoogle my_adslot"
     style="display:inline-block"
     data-ad-client="ca-pub-2468642896312497"
     data-ad-slot="8707922608"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Recommended responsive ad sizes

With the basics right – now it’s time to start experimenting with the different ad formats.

The Adsense units and their performance on different screen sizes can generally be grouped like this:

ComputerTabletMobile
120 x 240 - Vertical Banner+++
120 x 600 - Skyscraper++
125 x 125 - Button+++
160 x 600 - Wide Skyscraper++
180 x 150 - Small Rectangle+++
200 x 200 - Small Square+++
234 x 60 - Half Banner+++
250 x 250 - Square+++
300 x 250 - Medium Rectangle+++
300 x 600 - Large Skyscraper++
320 x 50 - Mobile Banner+
320 x 100 - Large Mobile Banner+
336 x 280 - Large Rectangle+++
468 x 60 - Banner++
728 x 90 - Leaderboard++
970 x 90 - Large Leaderboard++

Based on my experience with adense I rcommend the following:

recommended adsense responsive ads layout

Mobile recommendations

The 334×50 or 334×100 formats works fine. These formats has a great balance between visibility and usability. This format works fine at the top of the page, allowing the users to see both content and the ad without scrolling.

The 250×250 or other big rectangle formats works great, but they are very dominating on a small mobile screen. I use these ad format in the middle or bottom of content. The users are hopefully interested in your content, and then it doesn’t matter if they see a big banner.

Tablet recommendations

The bigger tablet screen opens up a variety of new possibilities.  First of all you should consider using bigger ad formats compared to the mobile view. Second it’s always a good idea to mix different ad formats that blends well with the content.

My recommendation is to use a leaderboard format like 468×60 or 728×90 at the top of the page. These banners has good visibility, but also allows the users to get a fair view of the content on the page.

Further down the page, you can introduce big rectangles like the 300×250, that is among the best performing banner formats in Adsense. You get the best performance if your content flows around the banner.

Computer recommendations

All possibilities are open in the computer view. Use big and interesting ad formats that blends well with the content.

Conclusion

With the new resonsive ads formats from Google Adsense, it’s easy to include ads in your responsive website.

When using the advanced mode, you can optimize and control ad layout in a smart way.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

Comments are closed.