AMP

重要提示:此文档不适用于您当前选择的格式电子邮件

amp-story-auto-ads

描述

动态地将广告插入到 Story 中。

 

必需的脚本

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

动态地将广告插入到 Story 中。

入门

有关如何在 AMP Stories 中加入广告的信息,请参考我们的指南

创建 AMP Story 广告的最佳实践

如果您有兴趣为 AMP Story 平台创建广告,请参考我们的最佳实践指南

行为

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 元素的直接子元素。

插入控制

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

<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 广告已插入。
story-ad-view 正在查看广告。
story-ad-click 已点击广告的 CTA 按钮。
story-ad-exit 用户停止查看广告。
story-ad-discard 由于配置无效而丢弃广告。

变量

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

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

您已经阅读此文档十几次了,但它并没有真正涵盖您所有的问题? 也许其他人也有同样的感觉:请在 Stack Overflow 上联系他们。

转到 Stack Overflow
发现错误或缺少功能?

AMP 项目强烈鼓励您的参与和贡献! 我们希望您能成为我们开源社区的长期参与者,但我们也欢迎您对您特别关注的问题做出一次性贡献。

转到 GitHub