amp-ad / amp-embed

amp-ad

Description

一种用于展示广告的容器。

Required Scripts

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

Supported Layouts

fill fixed fixed-height flex-item fluid intrinsic nodisplay responsive

示例

amp-ad amp-fx-flying-carpet amp-sticky-ad News Article Advanced User Consent Flow Client Side User Consent Flow

一种用于展示广告的容器。amp-embed 是 amp-ad 标记的别名，以不同的标记名称提供后者的所有功能。在语义上更准确的情况下，请使用 amp-embed。AMP 文档仅支持通过 HTTPS 投放的广告/嵌入内容。

amp-ad / amp-embed

amp-ad/amp-embed 的规范很可能会随着时间推移发生重大变化。当前的方法旨在规范格式，以便能够展示广告。

说明	一种用于展示广告的容器。`amp-embed` 是 `amp-ad` 标记的别名，以不同的标记名称提供后者的所有功能。在语义上更准确的情况下，请使用 `amp-embed`。AMP 文档仅支持通过 HTTPS 投放的广告/嵌入内容。
必需的脚本	`<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>` 注意：如果没有此脚本，amp-ad 也许仍可以工作，但我们强烈建议使用该脚本，以保证未来的兼容性。
支持的布局	fill、fixed、fixed-height、flex-item、intrinsic、nodisplay、responsive
示例	请参阅 AMP By Example 的 amp-ad 示例。

行为

与 AMP 文档中的所有其他资源一样，广告会随一个名为 <amp-ad> 的特殊自定义元素一起加载。AMP 文档中不得运行任何由广告网络提供的 JavaScript。不过，AMP runtime 会通过 iframe 沙盒将来自另一个来源的 iframe 加载为 AMP 文档，并且会在该 iframe 沙盒内执行相应广告网络的 JS。

<amp-ad> 要求根据其布局类型需要遵从的规则指定宽度值和高度值，并要求提供 type 参数，以便选择展示哪个广告网络。标记上的所有 data-* 属性会自动作为参数传递给最终呈现广告的代码。给定类型的广告网络所需的 data- 属性取决于广告网络，并且必须与广告网络一起记录。

示例：展示一些广告

<amp-ad type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"
    width="300"
    height="250"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
  </amp-ad>
  <amp-ad width="300"
    height="250"
    type="industrybrains"
    data-width="300"
    data-height="250"
    data-cid="19626-3798936394">
  </amp-ad>
  <amp-embed type="taboola"
    width="400"
    height="300"
    layout="responsive"
    data-publisher="amp-demo"
    data-mode="thumbnails-a"
    data-placement="Ads Example"
    data-article="auto">
  </amp-embed>

在 Playground 中打开此代码段

属性

type（必需）	用于指定广告网络的标识符。可以使用 `type` 属性选择要用于广告标记的模板。
src（可选）	可以使用此属性为指定的广告网络加载一个脚本标记。对于要求在网页中插入一个（必须是一个）脚本标记的广告网络，可以使用此属性。`src` 值必须包含一个已针对指定的广告网络列入白名单的前缀，并且该值必须使用 `https` 协议。
data-foo-bar	大多数广告网络都要求进一步配置，相应配置可以通过 HTML `data-` 属性传递到广告网络。参数名称需要进行一种标准的格式转化，以便从采用数据属性短划线格式转化为采用驼峰式大小写格式。例如，“data-foo-bar”会以“fooBar”的形式发送到广告以进行配置。如需了解可以使用哪些属性，请参阅广告网络对应的文档。
data-vars-foo-bar	以 `data-vars-` 开头的属性为保留属性，仅供 `amp-analytics` 变量使用。
json（可选）	可以使用此属性将配置作为任意复杂的 JSON 对象传递给广告。该对象会按原样传递给广告，并且名称不会发生任何变化。
data-consent-notification-id（可选）	如果提供了此属性，则需要使用给定的 HTML-id 确认 amp-user-notification，直至用户的“AMP 客户端 ID”（类似于 Cookie）传递至广告。这意味着广告会延迟到用户确认通知之后才会呈现。
data-loading-strategy（可选）	用于指示广告在与当前视口的距离不超过给定数量的视口时开始加载。如果没有 `data-loading-strategy` 属性，该数量会默认为 3。您可以指定介于 [0, 3] 范围内的浮点值（如果未指定该值，则该值会设为 1.25）。使用较小的值可获得较高的可见度（即增加广告加载后的可见几率），但展示次数（即加载广告的次数）可能会减少。如果指定了该属性但未指定值，则系统会指定一个浮点值，所指定的值将有助于提升可见度，并且不会对展示次数产生严重影响。请注意，指定 `prefer-viewability-over-views` 作为值还能够自动提升可见度。
data-ad-container-id（可选）	在 AMP runtime 尝试收起容器组件时，将容器组件 ID 告知广告。该容器组件必须是作为广告父级的 `<amp-layout>` 组件。如果 `data-ad-container-id` 已指定，且 AMP runtime 找到了此类 `<amp-layout>` 容器组件，则在容器组件未填充广告期间，AMP runtime 将尝试收起容器组件（而不是广告组件）。存在广告指示器时，此功能非常有用。
常见属性	此元素包含扩展到 AMP 组件的常见属性。

占位符

amp-ad 可能支持包含 placeholder 属性的子元素。如果广告网络支持此元素，此元素会在广告可供查看之前一直显示。如需了解详情，请参阅占位符和后备行为。

<amp-ad width=300 height=250
    type="foo">
    <div placeholder>Loading ...</div>
</amp-ad>

没有广告

如果没有广告可投放到相应广告位，AMP 会尝试收起 amp-ad 元素（即，将其设为 display: none）。AMP 负责确定可以在不影响用户滚动位置的情况下执行此操作。如果广告位于当前视口中，则不会被收起，因为该操作会影响用户的滚动位置；不过，如果广告位于当前视口之外，则会被收起。

除非尝试收起失败。amp-ad 组件支持包含 fallback 属性的子元素。如果存在后备元素，则会显示自定义后备元素。否则，AMP 将应用默认的后备元素。

存在后备元素的示例：

<amp-ad width=300 height=250 type="foo">
  <div fallback>No ad for you</div>
</amp-ad>

投放视频广告

有 3 种方式可通过视频广告在 AMP 中利用视频获利。

AMP 自动支持一些可通过广告获利的视频播放器，例如 BrightCove、DailyMotion 等。如需完整列表，请参阅媒体组件。
使用内置 IMA SDK 和 HTML5 视频播放器的 amp-ima-video 组件。
如果使用的视频播放器在 AMP 中不受支持，则可以使用 amp-iframe 提供自定义播放器。使用 amp-iframe 方法时，请注意以下事项：
- 如果在第一个视口中加载播放器，请确保有一张海报。详细信息。
- 必须通过 HTTPS 投放视频和海报。

从自定义网域投放广告

AMP 支持加载用于从自定义网域（例如您自己的网域）加载广告的引导 iframe。

要启用此功能，请将文件 remote.html 复制到您的网络服务器。然后，将以下元标记添加到您的 AMP 文件中：

<meta name="amp-3p-iframe-src" content="https://assets.your-domain.com/path/to/remote.html">

元标记的 content 属性是一个绝对网址，指向您网络服务器上的 remote.html 文件副本。此网址必须使用“https”架构。它所在的位置不能与 AMP 文件所在的位置属于同一来源。例如，如果您将 AMP 文件托管在 www.example.com 上，则此网址不能位于 www.example.com 上（但可以位于 something-else.example.com 上）。如需详细了解允许的 iframe 来源，请参阅《iframe 来源政策》。

安全

先验证传入的数据，然后再将其传递给 draw3p 函数，以确保您的 iframe 仅执行预期的操作。对于允许自定义 JavaScript 注入的广告网络来说，尤为如此。

iframe 还应强制规定它们只能 iframe 到预期的来源。来源为：

您自己的来源
用于 AMP 缓存的 https://cdn.ampproject.org

对于 AMP 缓存，您还需要检查“源出处”（由 cdn.ampproject.org 提供的文档的来源）是否为您的来源之一。

可以使用 draw3p 的第 3 个参数强制规定来源，但必须额外使用 allow-from 指令，以便实现全面的浏览器支持。

优化传入广告配置

是否进行此项优化完全由您自己决定：有时需要先优化广告请求，然后再向广告服务器发出广告请求。

如果您的广告网络支持快速获取，请使用实时配置 (RTC)。（例如，DoubleClick 和 AdSense 集成均支持快速获取和 RTC）

如果您的广告网络使用延迟获取，您可以将回调传递给 remote.html 文件中的 draw3p 函数调用。该回调会接收传入配置作为第一个参数，然后接收另一个回调作为第二个参数（在下面的示例中，调用了 done）。必须使用更新后的配置调用该回调，广告呈现才会继续。

示例：

draw3p(function(config, done) {
  config.targeting = Math.random() > 0.5 ? 'sport' : 'fashion';
  // 并没有在此实际调用 setTimeout。这应当仅用作一个示例
  // 来说明可以调用 done 回调。
  setTimeout(function() {
    done(config);
  }, 100)
}, ['allowed-ad-type'], ['your-domain.com']);

样式设置

<amp-ad> 元素本身可能不具备包含 CSS position: fixed 集（amp-lightbox 除外）的容器，或可能未位于此类容器中。这是因为全页展示的重叠式广告会影响用户体验。我们可能会考虑将来允许在能够使特定用户体验保持不变的 AMP 受控容器中使用类似的广告格式。

验证

请参阅 AMP 验证工具规范中的 amp-ad 规则。

支持的广告网络

支持的嵌入类型

需要更多帮助？

您已多次阅读本文档，但它仍未能涵盖您的所有问题？也许其他人也这么觉得：在 Stack Overflow 上与他们联系。

前往 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。

前往 GitHub