AMP页面中没有返回广告时如何折叠空白答案

【问题标题】：how to collapse blank space when no Ads is return in AMP pageAMP页面中没有返回广告时如何折叠空白
【发布时间】：2016-04-08 17:14:16
【问题描述】：

问题发生在 AMP（加速移动页面）页面中。

问题：

我为我的 AMP 中的广告设置了 Ad Exchange。当 AdEX 没有要投放的广告时，如何折叠空格。能给我一个演示代码吗？

我已经阅读了关于 window.context.noContentAvailable 的 Github 文档，但我仍然困惑我应该在哪里调用这个函数 (window.context.noContentAvailable) 以及我应该在哪里调用 window.context.requestResize(width, height) 来折叠广告位置当没有广告返回时。

<!doctype html>
<html ⚡>

<head>
  <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body style = "background-color: green;">

   <amp-ad width="300"
      height="200"
      type="doubleclick"
      data-slot="/4119129/doesnt-exist"
      style= "background-color:lightgrey;">
    <div placeholder>
        <!-- <iframe src ="amphtml/3p/frame.max.html"> -->
        <div>
            sdsd
            <script type="text/javascript">
                window.parent.context.onResizeSuccess(function (requestedHeight) {
                    console.log('success');
                    // body...
                })
                window.parent.context.onResizeDenied(function(requestedHeight){
                    console.log('failed');
                })
                window.parent.context.requestedResize(3,3);
            </script>

        </div>

    <!--    </iframe> -->
    </div>
  </amp-ad>

  <amp-ad width="300"
      height="200"
      type="doubleclick"
      data-slot="/4119129/doesnt-exist"
                  style= "background-color:yellow;">
    <div fallback>
     <div>
            <script type="text/javascript">
                window.parent.context.onResizeSuccess(function (requestedHeight) {
                    console.log('success');
                    // body...
                })
                window.parent.context.onResizeDenied(function(requestedHeight){
                    console.log('failed');
                })
                window.parent.context.requestedResize(3,3);
            </script>
    </div>
    </div>
  </amp-ad>

  </body>
</html>

【问题讨论】：

标签： html google-dfp amp-html

【解决方案1】：

您应该使用如下所述的后备属性：https://github.com/ampproject/amphtml/blob/master/builtins/amp-ad.md#no-ad-available 来指示当广告位未填充时应该发生什么。

不要尝试插入您自己的 Javascript。

【讨论】：

【解决方案2】：

当没有可显示的内容时，可以请求隐藏广告。 AMP 只会在可以执行且不会干扰用户的情况下执行此请求。

我知道 doubleclick 当前会在适当的时候发送这些请求，但我不知道其他广告网络。如有疑问，请联系他们的支持。

【讨论】：

【解决方案3】：

您可以在此处阅读有关后备占位符的信息：
https://amp.dev/documentation/components/amp-ad/
（上面的 GitHub 链接已经失效了。）

<amp-ad width="300" height="250" type="foo">
  <div fallback>No ad for you</div>
</amp-ad>

【讨论】：

请提供更多信息，说明您的解决方案为何有效，而不是“阅读本文”
@UnbrandManchester amp-ad 组件会自动执行此操作，您仍然可以使用后备元素和一些自定义 css 覆盖此行为：amp.dev/documentation/components/amp-ad/#no-ad-available