发布商提供的 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.js.cn/documentation/examples/advertising-analytics/publisher_served_amp_story_ads/index.html">
  <meta name="viewport" content="width=device-width">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Publisher Served AMP Story Ads</title>

  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <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 元素的属性。

<amp-story-auto-ads>
  <script type="application/json">
    {
      "ad-attributes": {
        "type": "custom",
        "data-url": "https://ampbyexample.com/json/amp-story-auto-ads/"
      }
    }
  </script>

在 script 标签之后，内联您希望包含的任何模板。这些模板将由上面 data-url 键指示的服务器的 JSON 响应填充。

第一个示例模板将用于创建一个简单的广告，其中包含全尺寸的背景图像。

<template type="amp-mustache" id="image-template">
  <amp-img class="fill-img" layout="fill" src="{{imgSrc}}"></amp-img>
</template>

第二个模板专为全屏视频设计。您可以随意构建模板，只要它们是有效的 AMPHTML 即可。

<template type="amp-mustache" id="video-template">
  <amp-video autoplay loop
    width="400"
    height="750"
    poster="{{poster}}"
    layout="fill">
    <source src="{{videoSource}}" type="video/mp4">
  </amp-video>
</template>

请参阅下面的完整示例

需要进一步解释吗？

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

转到 Stack Overflow

未解释的功能？

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

在 GitHub 上编辑示例