Using Google Adsense Responsive Ads

Last year Google released new Adsense responsive ads which were bitterly missing until then. Displaying Skyscraper ad unit has never been a problem since they are 120 to 300 pixel wide and should fit nicely in most responsive designs. But horizontal or rectangular ad units (especially the popular Leaderboard ad unit) are more of a problem.

Until now, there was no easy way to display different ad sizes depending on the available screen width. So even though your mobile web site would reorganize all parts of the UI to display in a vertical manner if the screen is not as wide as on a desktop computer, your ads would still have the same width and your users will only see the left part of the ad.

Now, with reponsive ad units, you can have an ad shown depending on the width of the parent container. This is a new ad unit type. If you want to use it, you can just go to your adsense account and choose “Responsive ad unit” as “Ad size”:

responsive ad unit ad size

Then click on “Save and get code” (don’t forget to name your new ad unit first). Once the ad unit is created a dialog will be displayed where you can retrieve the code to embed in your site:

get code for ad unit

There are two modes available:

  • Smart sizing
  • Advanced

Smart sizing just means that Adsense will determine the space available and deliver an appropriate ad format. The code you will get will look like this:

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

The only thing you can adapt here is the ad-format parameter. It can take 4 values:

  • auto: let Adsense decide which ad format to deliver
  • rectangle: let Adsense decide which rectangular ad format to deliver but it might be a large or small rectangle
  • vertical: let Adsense decide which vertical ad format to deliver but it might be any ad format which is higher than wide
  • horizontal: let Adsense decide which horizontal ad format to deliver but it might be any ad format which is wider than high

Note than this will only work if the parent container for the ad has an explicit width set. If you place the ad within a container that doesn’t have an explicit width set then the calculation of the required ad size will fail. You will then get an empty ad.

If the container has no explicit width set or if you want to have more control over which exact ad size is delivered, you should rather choose the Advanced option. This option requires you to modify the delivered code but gives you much more control on which ad is displayed and how the ad is displayed. With the advanced option, the code will look like this:

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

This code basically embeds the ad in a container which size you can manually set using some media queries. The first 5 lines of code are an example how to do it.

.my-responsive-ad-unit { width: 320px; height: 50px; }

This first line defines the Mobile Banner (320×50) as the default ad size. If none of the media queries after that apply, this is the ad size you will get.

@media(min-width: 500px) { .my-responsive-ad-unit { width: 468px; height: 60px; } }
@media(min-width: 800px) { .my-responsive-ad-unit { width: 728px; height: 90px; } }

These two lines of code define that:

  1. if the available width is larger than 800 pixels, a Leaderboard ad (728×90) will be shown
  2. if the available width is between 500 and 800 pixels, an horizontal Banner (468×60) will be shown

You can add as many media queries as you want to deliver different ad sizes on different screen sizes. Just make sure that you define your media queries in a cascading way so that you get the right CSS properties set. Since 900 pixels is both greater than 500 pixels and 800 pixels, the properties set by both of them will be applies. Since both set the same properties, only the properties set by the latter one will apply. So if you want to set additional CSS properties (e.g. setting margins) you will need to make sure that the properties set by the last media queries overwrite the properties set by the previous ones.

Since you will rarely have an available space which exactly matches an ad size, you will see that the ads are by default aligned left. If you want to center them, you will need to set a margin (and text alignement if you want to also center the text in text ads).

Centering can be achieved by setting the following CSS properties:

margin: 0 auto; float: none; display: block; text-align:center;

If you want to align the ads to the right:

margin: 0; float: right; display: block;

If you want to force alignment to the left:

margin: 0; float: left; display: block;

Note that the size considered by the media queries is not the actual size of the container but the screen size. So if your ad is displayed on an iPhone 5 with some margin, even the Mobile Banner will not fit on the screen. This is also what I observed on my blog so I added a negative margin to the default ad size so that the ad moves left over the margin I have for the rest of the page and thus fits on the iPhone screen:

.responsive-ad-unit{ width:320px; height:50px; margin-left:-15px; }

2 thoughts on “Using Google Adsense Responsive Ads

    1. where did you paste that css code Mr. Box? I have never had a problem with responsive ads before but my new site wants to shift them to the extreme left and I need to get those centered. Just not sure where to include the code.

      Thanks!
      ~Marge

Leave a Reply

Your email address will not be published.