重要提示:此文档不适用于您当前选择的格式电子邮件!
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
{ "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