DoubleClick AMP Story 广告

简介

在 AMP Story 中，您不能直接在页面上放置 amp-ad，而是由 amp-story-auto-ads 扩展程序获取并显示所有广告。

有关完整的文档，请参阅我们在 GitHub 上的文档。

<!doctype html>
<html ⚡ lang="en">
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="https://amp.org.cn/documentation/examples/advertising-analytics/doubleclick_amp_story_ads/index.html">
  <meta name="viewport" content="width=device-width">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>DoubleClick AMP Story Ads</title>

  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

设置

导入 amp-story-auto-ads 组件。

<script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>

配置

在您的页面上包含 amp-story-auto-ads 标签。

它的第一个子元素应该是一个 script 标签，其中包含一个 JSON 配置对象，其中包含有关如何获取和显示广告的详细信息。 ad-attributes 是键值对的映射，对应于要插入的 amp-ad 元素的属性。

对于从 DoubleClick 投放的广告，应将 "type": "doubleclick" 和 "data-slot" 设置为包含网络代码和单元代码的广告单元的完整路径。

<amp-story-auto-ads>
  <script type="application/json">
    {
      "ad-attributes": {
        "type": "doubleclick",
        "data-slot": "/30497360/a4a/amp_story_dfp_example"
      }
    }
  </script>
</amp-story-auto-ads>

请参阅下面的完整示例

需要进一步解释？

如果本页上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的确切用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您对特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例