iframe within <amp-ad> tag is not resized

1.1k Views Asked by At

We're trying to resize "amp-ad" on the fly but the iframe containing the ads is displayed in 1x1 instead of 300x250

We do use "amp-ad" with "generic" creative (setup with size 1x1 as it is described here http://prebid.org/overview/how-to-simplify-line-item-setup.html) but despite the amp-ad has height and width "300x250", the ads is rendered in 1x1!

<!doctype html>
<html ⚡ lang="en">
<head>
  <meta charset="utf-8">
  <title>AMP Ads</title>
  <link rel="canonical" href="https://www.toto.com/solar.html"/>
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script  custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-latest.js"></script>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-latest.js"></script>
  <script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-latest.js"></script>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body style="padding:10px">


     <amp-ad width="300" height="250"
              type="doubleclick"
              data-slot="my-data-slot"
              rtc-config='{
  "vendors": {
  "my-vendor": {"additional-infos":"111"}
  }, "timeoutMillis": 999}'
              json='{"targeting":{"test": "test"}}'
      >
        <div placeholder><div style="text-align: center; font-size: smaller; color: gray;">No ads for the moment....</div></div>
      </amp-ad>


<amp-sticky-ad layout="nodisplay">
  <amp-ad width="320" height="50"
          type="doubleclick"
              data-slot="my-data-slot"
              rtc-config='{
  "vendors": {
  "my-vendor": {"additional-infos":"111"}
  }, "timeoutMillis": 999}'
          json='{"targeting":{"test": "test"}}'
  >
    <div placeholder><div style="text-align: center; font-size: smaller; color: gray;">No ads for the moment....</div></div>
  </amp-ad>
</amp-sticky-ad>

our creative setup in DFP is size 1x1 but associated to a lineitem with 300x250

We did also use amp-embed instead of the amp-ad, and the ads has been successfully resized in 300x250! We understood amp-ad and amp-embed are just aliases of the same thing, but it looks like the 2 are behaving differently!

Unfortunately, the amp-embed does not work in the amp-sticky, so we need to make the ads resized using the amp-ad tag.

In the DFP creative, we tried to use:

  1. window.context.requestResize: but the window.context is undefined! If somebody knows what's missing to get a working window.context, that would probably solve our issue!

  2. postMessage but it did not work

  window.parent.postMessage({
    sentinel: 'amp',
    type: 'embed-size',
    width: 300,
    height: 250}, '*');
1

There are 1 best solutions below

0
On

Check if you are not running your creatives in a SafeFrame, try to turn it off.

Also, you should probably refer to window.parent.context.requestResize, not window.context.requestResize, as far as I know DFP would render creatives only in an iframe - your code runs there, and that frame does not have window.context. However, it's parent frame should have it, because it is the actual amp-ad frame.