Customize Google AdSense responsive ad units

When people started to build responsive websites, primary concern was advertising. And between all possible advertisers network of course Google AdSense is most popular. So finally last month Google have made available Responsive AdSense unit for publisher. Responsive ad units are still in beta, but from current experience if you have responsive website I encourage you to try them.

How to make responsive AdSense ad unit?

  • Log in to your AdSense account.
  • Go to My ads and create new Ad unit.
  • Now in Ad size choose Responsive Ad unit (Beta) as shown below.
  • Now you have to select ad style (same as on regular AdSense ad unit), click on save and get code.
  • Default code for AdSense responsive unit will be same as my example:
<style>
.responsive-test-unit { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive-test-unit { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive-test-unit { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive 300x250 -->
<ins class="adsbygoogle responsive-300x250"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXXXXXXXX"
     data-ad-slot="8713718309"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

How to customize responsive AdSense ad unit?

You can use default code, but sometimes it will not be best solution. Everything depends on structure of your responsive website. Maybe on some resolution you have more blocks in one row, and then not enough space for 468px ad unit. 

As you noticed in example code above, responsive AdSense ad unit have media queries, which are by default defined in next order:

  • 320x50px – display on screen  resolution smaller then 500px
  • 468x60px – display on screen resolution between 500 and 800px
  • 728x90px –  display on screen resolution larger then 800px

Great thing in responsive AdSense ad unit is that you can easily make modification inside media queries, it’s just basic CSS. When you want to customize AdSense ad unit code for your needs, it’s enough to focus just on part with media queries. (Between <style></style>)

I have changed  code to show 250×250 AdSense ad unit between 500 and 800px , not default as Google suggest 468x60px, and for screen larger then 800px, we using 300×250 instead 728×90 ad unit.

<style>
.responsive-test-unit { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive-test-unit { width: 250px; height: 250px; } }
@media(min-width: 800px) { .responsive-test-unit { width: 300px; height: 250px; } }
</style>

 

So you can easily play with formats and change them for your needs. But be careful, put only dimension for ad units which exist in Google AdSense, while if you set 430×600, ads will not showing.

More detailed information about available AdSense ad units.

What is missing in responsive AdSense ad units?

Yes, responsive AdSense is in beta and just released one month ago, but I have noticed so far one small problem which will be probably resolved in the future. It’s silly, but very important – screen orientation.

If you open some webpage with responsive AdSense unit on your smartphone (e.g. Samsung Galaxy S4), in default portrait orientation you will see normal 320x50px banner, and that seems fine. But if you switch to landscape orientation (without refreshing page), responsive website adapts to new screen width, but AdSense unit stay same (and on Galaxy S4 in landscape mode one big 468x60px ad unit can be there instead of now very small 320x50px).

That is small detail, but people often rotate from portrait to landscape and it will be great also to use AdSense unit according to screen size.

(Portrait and landscape separate styles are not working – it works in that way that google recognize which ad unit format is inside which screen orientation, but do not change ad unit after screen rotation)

If you have try or wish to test new responsive AdSense ad unit, just post your questions / problems / impressions in comment section. 

Leave a Reply