如何在AMP页面中没有广告返回时折叠空白区域

时间:2016-04-08 17:14:16

标签: html google-dfp amp-html

问题出现在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>

3 个答案:

答案 0 :(得分:0)

您应该使用此处所述的回退属性:https://github.com/ampproject/amphtml/blob/master/builtins/amp-ad.md#no-ad-available来说明广告位未填充时会发生什么。

不要尝试插入自己的Javascript。

答案 1 :(得分:0)

当无法显示任何内容时,广告可以请求隐藏。 AMP只会在不中断用户的情况下执行此请求。

我知道doubleclick当前正在发送这些请求,但我不了解其他广告网络。如有疑问,请与他们的支持联系。

答案 2 :(得分:0)

您可以在此处阅读有关后备占位符的信息:
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>