Table of contents
Google defines Responsive Ads as ads that automatically adjust their size, appearance and format to fit available ad spaces. Responsive websites are a great solution in many ways, but it is hard to deny that they do make ad serving more complicated. That 970×250 masthead might perform brilliantly on desktop for you, but your mobile users won’t thank you if you try to serve it to their iPhone.
This article was originally published in November 2016, but has since been updated for relevance in October 2019.
When AdSense released mobile responsive ads in 2013 things got easier. A single snippet of code would transform to be the best fit for any device without the publisher having to do anything. AdSense is great at providing worry-free solutions like this, but more ambitious publishers know that simply passing all your inventory to AdSense often means missing out on revenue. Despite this, ad servers, including Google Ad Manager, have not implemented similar solutions. So, where are the Google Ad Manager responsive ads?
Why are there no Google Ad Manager responsive ads?
With Google offering such a seamless responsive ad experience in AdSense many are surprised Google Ad Manage responsive ads haven’t followed.
AdSense relies heavily on text ads to fill the odd size requests that can result from responsive units. This seemingly endless supply of text ads that can be reconfigured to fit an available space and advertisers expect their text ads to be manipulated in this way.
Google Ad Manager has its own ad server and as such ads can be supplied from any number of sources. If you ignore AdSense and Ad Exchange as demand sources, most of these ads are image based. Advertisers who pay for their advert to look a certain way don’t want to see those ads squashed and squeezed into different proportions to cope with responsive layouts, which means that there will be no demand for that odd 298×147 space that your responsive layout just called.
Google Ad Manager’s solution – the mapping object
Where AdSense aims to solve issues without publishers having to worry about them, Google Ad Manager’s approach is generally to put the control back in the hands of the publisher. Google Ad Manager tackles the responsive layouts issue by letting the publisher dictate what creative size(s) ad units should request for each screen size. This is handled through “mapping objects”.
Mapping objects are instructions that match creative sizes to screen sizes (Or, more accurately to Viewport sizes – the size of the available browser window). This object is a number of conditions that essentially say “if the viewport is at least this big, show this sized creative”. The rules are assessed in order until one is found to match the available Viewport. Here is a simple example:
var bannerMapping = googletag.sizeMapping(). addSize([800, 600], [728, 90]). addSize([0, 0], [320, 100]). build();
This snippet instructs Google Ad Manager to request a 728×90 creative when there is at least 800×600 of screen available. Otherwise (screen size of 0x0 or greater) to use the 320×100 format. More size options would simply require additional calls to the addSize() function:
var bannerMapping = googletag.sizeMapping(). addSize([1400, 600], [970, 250]). addSize([800, 600], [[728, 90],[468,60]]). addSize([0, 0], [320, 100]). build();
Here we’ve added a new condition whereby Google Ad Manager is instructed to deliver a 970×250 creative when there is at least a 1400px wide viewport and also allowed for delivery of a second creative size (468×60) on viewports of 800px – 1399px wide. In both examples we end with a minimum of 0x0 pixels so that we always show a creative.
Multiple mapping objects
Most layouts don’t rely on all ads being the same size, in which case multiple mapping objects are used. In the following example we define two mapping objects:
var bannerMapping = googletag.sizeMapping(). addSize([800, 600], [728, 90]). addSize([0, 0], [320, 100]). build();
var mpuMapping = googletag.sizeMapping(). addSize([800, 600], [336, 280]). addSize([0, 0], [300, 250]). build();
If multiple mapping options are used like this, we simply choose which to use when we display the unit:
Displaying the ad unit
Finally we use the mapping object when defining the Google Ad Manager unit, passing it into the defineSizeMapping() function:
googletag.defineSlot('/12345678/ATF_BANNER', [320, 100], 'ATF_BANNER').
defineSizeMapping(bannerMapping).
addService(googletag.pubads());
In this case we have used the bannerMapping values that we previously defined. Note that we still pass one creative size into the defineSlot() function, even though we’ve defined the sizes already. This ensures that a size is still passed if Google Ad Manager cannot decipher the current viewport size for some reason. We usually pass the smallest acceptable size so that we can be sure that it will not break layouts.
At first glance this can seem complicated, but the results from getting this right make it worth the effort. The most important point is to use sizes that reflect the points where your layouts change.
Common pitfalls of Google Ad Manager responsive ads
Once you have a handle on how Google Ad Manger approaches responsive ads it is not difficult to implement, but there are pitfalls that publishers frequently fall into:
Google Ad Manger won’t stop you using placements banned for Google ads
Google Ad Manger is just an ad server. It will serve the ads that you tell it to indiscriminately. A common example we see of this is when above the fold banners are changed to 300×250 units on mobile (Update: 300×250 ads are now allowed ATF – sometimes). Another is causing more than one large format ad to be displayed per mobile screen length.
Hiding unwanted units
Mobile layouts often warrant fewer ads than their desktop equivalent and “display none” is a popular way to tackle that. This can cause problems as calling an ad without displaying it can impact viewability, performance and is against policy for many ad networks (including AdSense and Google Ad Manger).
Instead we can use a mapping object again and pass in a blank array as our second argument to the addSize() function. This time we don’t want the banner to show on viewports below 800×600:
var bannerMapping = googletag.sizeMapping(). addSize([1400, 600], [970, 250]). addSize([800, 600], [[728, 90],[468,60]]). addSize([0, 0], []). build();
