仅在最初可见时才加载后备广告吗?

时间:2019-01-18 15:21:33

标签: amp-html fallback amp-ad

如果在页面初始加载或刷新时看不到带有后备功能的amp广告,我会遇到问题。当amp-ad不是后备广告时,无论是最初显示还是滚动查看,它都能正确加载。 任何网络类型都可能发生这种情况。

不是所有的广告都能在看到它们时加载吗?
我是否缺少某些配置,或者这是设计使然?

如何重现此问题?

  1. 将下面的示例页面粘贴到AMP游乐场站点
  2. 首屏上的3个广告正常加载
  3. 向下滚动时,只会加载没有后备广告的广告
  4. 向下滚动时,触摸编辑器上的html以强制预览刷新
  5. 视图中的3个广告正常加载
  6. 向上滚动时,只会加载没有后备广告的广告

谢谢!

<!doctype html>
<html ⚡>

<head>
  <meta charset="utf-8">
  <title>amp-ad</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
  <link rel="canonical" href="https://ampbyexample.com/components/amp-ad/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

  <style amp-custom>
    .my-title { color:blue; font-size:200%; text-align:center; margin:0 }
    .my-subtitle { color:red; font-size:100%; text-align:center; margin:0 }
    p { margin: 5px }
  </style>  
</head>
<body>

  <main class="content-amp" style="text-align: center">
    <article class="amp-content">
        <h2 class="subtitle-amp">AMP sample page</h2>
        <section class="amp-art-body">
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sit amet risus non consectetur. Nunc mollis ipsum nunc, a pellentesque neque pharetra id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sit amet risus non consectetur. Nunc mollis ipsum nunc, a pellentesque neque pharetra id.</p>

                <h1 class="my-title">In view</h1>

                <br><h1 class="my-subtitle">DOUBLECLICK</h1><br>
                    <amp-ad layout="responsive" width="320" height="50" type="doubleclick" data-slot="/4119129/mobile_ad_banner"></amp-ad>
                <br>

                <br><h1 class="my-subtitle">SMARTCLIP -> DOUBLECLICK</h1><br> 
                <amp-ad type="smartclip" width="320" height="50" data-plc="84555" data-sz="320x50"> 
                    <div fallback>Smartclip fallback to Doubleclick!!</div> 
                    <amp-ad layout="responsive" width="320" height="50" type="doubleclick" data-slot="/4119129/mobile_ad_banner"></amp-ad>
                </amp-ad>
                <br>

                <br><h1 class="my-subtitle">DOUBLECLICK -> DOUBLECLICK</h1><br>
                <amp-ad type="doubleclick" width="320" height="50" data-slot="/134642692/INVALID">
                    <div fallback>DoubleClick fallback to DoubleClick!!</div>
                    <amp-ad fallback layout="responsive" width="320" height="50" type="doubleclick" data-slot="/134642692/amp-samples/amp-MREC"> </amp-ad>
                </amp-ad>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sit amet risus non consectetur. Nunc mollis ipsum nunc, a pellentesque neque pharetra id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sit amet risus non consectetur. Nunc mollis ipsum nunc, a pellentesque neque pharetra id.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sit amet risus non consectetur. Nunc mollis ipsum nunc, a pellentesque neque pharetra id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sit amet risus non consectetur. Nunc mollis ipsum nunc, a pellentesque neque pharetra id.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sit amet risus non consectetur. Nunc mollis ipsum nunc, a pellentesque neque pharetra id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sit amet risus non consectetur. Nunc mollis ipsum nunc, a pellentesque neque pharetra id.</p>

                <h1 class="my-title">Not in view</h1>

                <br><h1 class="my-subtitle">DOUBLECLICK</h1><br>
                    <amp-ad layout="responsive" width="320" height="50" type="doubleclick" data-slot="/4119129/mobile_ad_banner"></amp-ad>
                <br>

                <br><h1 class="my-subtitle">SMARTCLIP -> DOUBLECLICK</h1><br>
                <amp-ad type="smartclip" width="320" height="50" data-plc="84555" data-sz="320x50">
                    <div fallback>Smartclip fallback to Doubleclick!!</div>
                    <amp-ad layout="responsive" width="320" height="50" type="doubleclick" data-slot="/4119129/mobile_ad_banner"></amp-ad>
                </amp-ad>
                <br>

                <br><h1 class="my-subtitle">DOUBLECLICK -> DOUBLECLICK</h1><br>
                <amp-ad type="doubleclick" width="320" height="50" data-slot="/134642692/INVALID">
                    <div fallback>DoubleClick fallback to DoubleClick!!</div>
                    <amp-ad fallback layout="responsive" width="320" height="50" type="doubleclick" data-slot="/134642692/amp-samples/amp-MREC"> </amp-ad>
                </amp-ad>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sit amet risus non consectetur. Nunc mollis ipsum nunc, a pellentesque neque pharetra id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sit amet risus non consectetur. Nunc mollis ipsum nunc, a pellentesque neque pharetra id.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sit amet risus non consectetur. Nunc mollis ipsum nunc, a pellentesque neque pharetra id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sit amet risus non consectetur. Nunc mollis ipsum nunc, a pellentesque neque pharetra id.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sit amet risus non consectetur. Nunc mollis ipsum nunc, a pellentesque neque pharetra id.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sit amet risus non consectetur. Nunc mollis ipsum nunc, a pellentesque neque pharetra id.</p>
            </div>
        </section>
    </article>
</main>

</body>
</html>

0 个答案:

没有答案