重要提示：此文档不适用于您当前选择的格式网站！

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 快拍中包含广告的信息，请参阅我们的指南。

创建 AMP 快拍广告的最佳做法

如果您有兴趣为 AMP 快拍平台创建广告，请参阅我们的最佳做法指南。

行为

amp-story-auto-ads 扩展在用户使用内容时动态地将广告（以 amp-ad 形式实现）插入到快拍中。当前算法至少需要包含 7 页的快拍。

每个 amp-ad 都作为一个全屏快拍页面插入。为了防止显示空白/未加载的广告，该广告在向用户显示之前会在后台完全预渲染。根据用户互动，该扩展将决定何时何地插入广告。

可通过轻触屏幕右侧，以与普通故事页面相同的方式跳过故事中的广告。

配置

配置广告有两种方式：内联和远程

内联广告配置

在 <amp-story-auto-ads> 元素中，您指定一个 JSON 配置对象，其中包含有关如何获取和展示广告的详细信息，如下所示

<amp-story>
  <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-story>

ad-attributes 是一个键值对映射，它们是待插入的 amp-ad 元素的属性。

上述示例将插入以下 amp-ad 元素，它代表一个由 DoubleClick 投放的广告

<amp-ad type="doubleclick" data-slot="/30497360/a4a/amp_story_dfp_example">
</amp-ad>

与普通的 amp-ad 不同，此处无需指定 <fallback> 或 <placeholder>，因为故事中的广告仅在完全呈现后才会展示。

远程广告配置

除了在脚本标签中添加 JSON 配置文件（如内联广告配置部分所示），还可以使用以下方法托管远程 URL

远程 JSON 广告配置文件

{
  "ad-attributes": {
    "type": "doubleclick",
    "data-slot": "/30497360/a4a/amp_story_dfp_example"
  }
}

设置好 JSON 配置文件后，只需使用

HTML 广告配置代码来检索远程 URL

如下所示，在 <amp-story-auto-ads> 元素中

<amp-story standalone supports-landscape>
    <!--
      This is an example of JSON retrieved from a source file.
    -->
    <amp-story-auto-ads src="/examples/amp-story/ads/remote.json" ></amp-story-auto-ads>
    <amp-story-page id="page-1">
    .
    .
    .
</amp-story>

传递其他属性（RTC、定位等）

如果您希望将任何其他数据（例如定位信息）作为属性传递给创建的 <amp-ad> 标签，只需将其他键值对添加到 ad-attributes JSON 对象即可。

一个常见的用例是将定位数据或 RTC 配置传递给底层的 amp-ad 元素。更复杂的配置可能如下所示

<amp-story-auto-ads>
  <script type="application/json">
    {
      "ad-attributes": {
        "type": "doubleclick",
        "data-slot": "/30497360/a4a/amp_story_dfp_example",
        "rtc-config": {
          "urls": ["https://rtcEndpoint.biz/"]
        },
        "json": {
          "targeting": {
            "loc": "usa",
            "animal": "cat"
          },
          "categoryExclusions": ["sports", "food", "fun"]
        }
      }
    }
  </script>
</amp-story-auto-ads>

这将导致创建以下 amp-ad 元素。

<amp-ad
  type="doubleclick"
  data-slot="/30497360/a4a/amp_story_dfp_example"
  rtc-config='{"urls": ["https://rtcEndpoint.biz/"}'
  json='{"targeting":{"loc": "usa", "animal": "cat"}, "categoryExclusions":["sports", "food", "fun"]}'
>
</amp-ad>

验证

amp-story-auto-ads 必须是 amp-story 元素的直接子元素。

插入控制

如果您希望故事中某个特定位置永远不展示广告，则可以将 next-page-no-ad 属性添加到 <amp-story-page>。然后，插入算法在尝试插入广告时将跳过此页面之后的插槽。

<amp-story-page next-page-no-ad id="page-7">
  ...
</amp-story-page>

<!-- No ad will ever be inserted here. -->

<amp-story-page next-page-no-ad id="page-8">
  ...
</amp-story-page>

分析

使用 amp-story-auto-ads 时，将提供几个新的分析触发器和 [变量]，以用于您的分析配置。

触发器

名称	事件
`story-ad-request`	请求广告。
`story-ad-load`	加载广告。
`story-ad-insert`	插入广告。
`故事广告视图`	查看广告。
`故事广告点击`	已点击广告的 CTA 按钮。
`故事广告退出`	用户停止查看广告。
`故事广告丢弃`	由于配置无效，广告被丢弃。

变量

以下变量将按大致顺序提供。然后，变量可用于任何后续 ping。例如，使用 story-ad-load 触发器发送的请求将无法访问 viewTime 变量，因为它尚未发生（这将解析为空字符串）。而使用 story-ad-exit 触发器发送的请求将能够获取所有先前事件（requestTime、loadTime、insertTime 等）的值。

名称	定义
`adIndex`	生成触发器的广告索引（适用于所有触发器）
`adUniqueId`	每个广告都应唯一的 ID（适用于所有触发器）
`requestTime`	请求广告时的时间戳
`loadTime`	广告发出 `INI_LOAD` 信号时的时间戳
`insertTime`	广告插入到故事中的时间戳
`viewTime`	广告页面变为活动页面的时间戳
`clickTime`	点击广告时的时间戳
`exitTime`	广告页面从活动 => 非活动状态移动时的时间戳
`discardTime`	由于元数据错误等原因丢弃广告时的时间戳。
`position`	父故事中的位置。广告之前的页面数 + 1。不计算之前插入的广告页面。（在插入时可用）
`ctaType`	插入广告的给定 cta 类型（在插入时可用）

需要更多帮助？

您已经阅读了本文档十几次，但它并没有真正涵盖您所有的问题？也许其他人也有同感：在 Stack Overflow 上联系他们。

转到 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您参与和贡献！我们希望您成为我们开源社区的持续参与者，但我们也欢迎针对您特别热衷的问题进行一次性贡献。

转到 GitHub