如果在页面初始加载或刷新时看不到带有后备功能的amp广告,我会遇到问题。当amp-ad不是后备广告时,无论是最初显示还是滚动查看,它都能正确加载。 任何网络类型都可能发生这种情况。
不是所有的广告都能在看到它们时加载吗?
我是否缺少某些配置,或者这是设计使然?
如何重现此问题?
谢谢!
<!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>