amphtml: DFP ads incorrectly being resized to values of height/width overrides

Summary

When height and width overrides are specified for DFP ads (via data-override-width and/or data-override-height), the <amp-ad> element is (incorrectly) being resized to match the override size.

This is causing an issue in production right now with ads on Telegraph’s site.

Details

Here’s what users are currently seeing:

Vs. the expected result:

Direct link to this page (note: ads are geotargeted to the UK):

http://www.telegraph.co.uk/news/2016/09/14/ruper-murdochs-news-uk-to-be-censured-for-misleading-parliament/amp/

The affected <amp-ad> element on this page looks like this:

<amp-ad
    width = "300"
    height = "75"
    data-override-width = "2"
    data-override-height = "200"
    type = "doubleclick"
    data-slot = "/6582/tmg.telegraph.news/news.2016.09.14"
    json = '{"targeting":{"bs":"news","at":"polar","cms":"gamp","sc":"news.2016.09.14","zn":"news.2016.09.14","pt":"story","pg":"AmmsqYyRTd7s","videosrc":"AmmsqYyRTd7s","gs":["aut_diesel_emissions","biz_business_travel","mastercard_pricelesscities"],"kw":["uk-news","politics","rupert-murdoch","news"]},"useSameDomainRenderingUntilDeprecated":1}'>
    <div placeholder></div>
    </amp-ad>

The expected result is for this <amp-ad> element to be sized at 300x75.

The override-width and override-height parameters are the size of ad unit, as configured in DFP. (Normally the ad width and ad height are the same as the ad unit size, but this is a “native” ad, and can render at any size.) In this case, GPT returns an iframe sized at 2x200; this is a “transport” iframe, and not intended to be visible.

However, the AMP runtime is automatically resizing the <amp-ad> element to the size of this transport iframe.

Given that it may be difficult to reproduce on the Telegraph’s site due to the geotargeting, I quickly threw together another page that replicates the problem.

Link: https://amp.polarmobile.com/dfp-override.html?google_glade=0#development=1

The <amp-ad> element on this page looks like this:

  <amp-ad
               width="500"
               height="100"
               data-override-width="300"
               data-override-height="250"
               type="doubleclick"
               data-slot="/35096353/amptesting/image/static">
            </amp-ad>

Notes:

• To make this sample page a bit more flexible I didn’t include ”useSameDomainRenderingUntilDeprecated":1 in the markup (unlike the Telegraph page), but note the explicit ?google_glade=0 query string parameter.
• Telegraph’s ad is 300x75 with a 2x200 override. This ad is 500x100 with a 300x250 override. The numbers are different but in both cases the outcome we expect is to render an ad that is wider and shorter than the actual ad unit configured in the ad server.
• The example on this sample page is a bit awkward because the creative is a normal banner/ static image at 300x250, but the expected outcome is for it to render at 500x100. Rendering a 300x250 image at 500x100 looks visually wrong, but regardless the example demonstrates the problem.

On this sample page, the expected outcome in the DOM is:

<amp-ad 
    width="500" 
    height="100" 
    data-override-width="300" 
    data-override-height="250" 
    type="double-click"
    data-slot="/35096353/amptesting/image/static" 
    class="-amp-element -amp-layout-fixed -amp-layout-size-defined -amp-layout" id="AMP_1"
    style="width: 500px; height: 100px;">

But what actually happens (when the AMP runtime’s resize request is honoured) is:

<amp-ad 
    width="500"
    height="100"
    data-override-width="300"
    data-override-height="250"
    type="double-click"
    data-slot="/35096353/amptesting/image/static" 
    class="-amp-element -amp-layout-fixed -amp-layout-size-defined -amp-layout" id="AMP_1" 
    style="width: 300px; height: 250px;">

When the AMP runtime’s resize request is denied, the DOM structure looks as expected.

Note: by “AMP runtime’s resize request”, I am referring to a resize request that happens automatically, not via the ad itself calling window.context.requestResize.

Sidenote: Glade / GPT Light does not properly handle width and height overrides either. That’s a separate issue, and I’m happy to file another ticket once the non-Glade issue is resolved.