X
    Categories: Tips

Understanding DFP responsive ads

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.

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 but that ad servers, including Google’s own DFP, have not implemented similar solutions. So, where are the DFP responsive ads?

Why are there no DFP responsive ads?

With Google offering such a seamless responsive ad experience in AdSense many are surprised DFP respsonsive ads haven’t followed.

AdSense relies heavily on text ads to fill the odd size requests that can result from responsive units. AdSense has a 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.

DFP is an 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.

DFP’s solution – the mapping object

Whereas AdSense aims to solve issues without publishers having to worry about them, DFP’s approach is generally to put the control back in the hands of the publisher.  DFP tackles the responsive layouts issue by letting the publisher dictate what size each ad unit should be shown at every resolution. Rather than offering responsive ads, DFP offers ad units that serve at different sizes depending on the screen size. This is handled through “Mapping objects”.

Mapping objects are instructions that match ad 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 block instructs DFP to use the 728×90 size when there is at least 800×600 of screen available. Otherwise (screen size of 0x0 or greater) to use the 320×100 size.  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 DFP is instructed to deliver a 970×250 creative when there is at least 1400px 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 DFP 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 DFP 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 DFP responsive ads

Once you have a handle on how DFP approaches responsive ads it is not difficult to implement, but there are pitfalls that publishers frequently fall into:

DFP won’t stop you using placements banned for Google ads

DFP 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 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 AdX).
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();
Mat Bennett :