重要提示:此文档不适用于您当前选择的格式 广告!
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 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
{ "ad-attributes": { "type": "doubleclick", "data-slot": "/30497360/a4a/amp_story_dfp_example" } }
设置好 JSON 配置文件后,只需使用以下内容
在 <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
触发器发送的请求将能够获取所有先前事件的值(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