重要提示：此文档不适用于您当前选择的格式广告！

amp-ad

描述

用于显示广告的容器。

必需脚本

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

支持的布局

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

用法

amp-embed 是 amp-ad 标记的别名，它通过不同的标记名称派生其所有功能。当语义上更准确时，请使用 amp-embed。AMP 文档仅支持通过 HTTPS 提供的广告/嵌入。

amp-ad / amp-embed 的规范可能会随着时间的推移而发生重大演变。当前的方法旨在引导该格式能够展示广告。

广告的加载方式与 AMP 文档中的所有其他资源一样，使用名为 <amp-ad> 的特殊自定义元素。不允许在 AMP 文档内运行任何广告网络提供的 JavaScript。相反，AMP 运行时从与 AMP 文档不同的来源（通过 iframe 沙箱）加载一个 iframe，并在该 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"
  sticky="bottom"
  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 中打开此代码段

占位符

（可选）amp-ad 支持带有 placeholder 属性的子元素。如果广告网络支持，则此元素会在广告可供查看之前显示。有关详细信息，请参阅占位符 & 回退。

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

无广告可用

如果该广告位没有可用的广告，AMP 会尝试折叠 amp-ad 元素（即设置为 display: none）。AMP 会确定此操作可以在不影响用户的滚动位置的情况下执行。如果广告位于当前视口中，则不会折叠该广告，因为它会影响用户的滚动位置；但是，如果广告位于当前视口之外，则会折叠该广告。

如果这是一个粘性广告单元（设置了 sticky 属性），则整个粘性广告将不会显示，而与 fallback 属性无关。

如果折叠尝试失败。amp-ad 组件支持具有 fallback 属性的子元素。如果存在回退元素，则会显示自定义回退元素。否则，AMP 将应用默认回退。

带有回退的示例

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

投放视频广告

通过视频广告在 AMP 中获利视频有 3 种方法

AMP 原生支持许多视频播放器，如 BrightCove、DailyMotion 等，它们可以获利广告。有关完整列表，请参阅媒体组件。
使用带有内置 IMA SDK 和 HTML5 视频播放器的 amp-ima-video 组件
如果您使用 AMP 中不支持的视频播放器，则可以使用 amp-iframe 提供自定义播放器。使用 amp-iframe 方法时：_ 如果在第一个视口中加载播放器，请确保有海报。详细信息。_ 视频和海报必须通过 HTTPS 提供。

从自定义域运行广告

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

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

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

元标记的 content 属性是您的 Web 服务器上 remote.html 文件副本的绝对 URL。此 URL 必须使用“https”架构。它不能与您的 AMP 文件位于同一来源。例如，如果您在 www.example.com 上托管 AMP 文件，则此 URL 不能在 www.example.com 上，但 something-else.example.com 可以。有关 iframe 允许的来源的更多详细信息，请参阅“Iframe 来源策略”。

安全

在将传入数据传递给 draw3p 函数之前，请验证传入数据，以确保您的 iframe 仅执行它期望执行的操作。对于允许自定义 JavaScript 注入的广告网络尤其如此。

iframe 还应强制它们仅被嵌入到它们期望嵌入的来源中。来源将是

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

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

可以使用 draw3p 的第三个参数来强制执行来源，并且还必须使用 allow-from 指令来实现完整的浏览器支持。

增强传入的广告配置

这是完全可选的：有时希望在向广告服务器发出广告请求之前增强广告请求。

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

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

示例

draw3p(function(config, done) {
  config.targeting = Math.random() > 0.5 ? 'sport' : 'fashion';
  // Don't actually call setTimeout here. This should only serve as an
  // example that is OK to call the done callback asynchronously.
  setTimeout(function() {
    done(config);
  }, 100)
}, ['allowed-ad-type'], ['your-domain.com']);

属性

`type`（必需）

指定广告网络的标识符。type 属性选择用于广告标记的模板。

`sticky`（可选）

用于表示这是一个粘性广告单元，并指定此单元的位置。其值必须是以下之一

top
bottom
bottom-right
left
right

`data-foo-bar`

大多数广告网络需要进一步的配置，可以通过使用 HTML data– 属性将配置传递给网络。参数名称遵循标准的数据属性短划线到驼峰式转换。例如，“data-foo-bar”作为“fooBar”发送到广告进行配置。请参阅广告网络的文档，了解可以使用哪些属性。

`data-vars-foo-bar`

以 data-vars– 开头的属性保留用于 amp-analytics vars。

`src`（可选）

使用此属性为指定的广告网络加载脚本标记。这可用于需要将单个脚本标记插入到页面中的广告网络。src 值必须具有指定广告网络允许的列表中的前缀，并且该值必须使用 https 协议。

`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`（可选）

在尝试折叠广告时，通知广告容器组件的 ID。容器组件必须是广告的父级 <amp-layout> 组件。当指定了 data-ad-container-id 且找到了这样的 <amp-layout> 容器组件时，AMP 运行时将在无填充时尝试折叠容器组件，而不是广告组件。当存在广告指示器时，此功能很有用。

title（可选）

为组件定义一个 title 属性，以便传播到下层的 <iframe> 元素。默认值是 "Advertisement"。

通用属性

此元素包含扩展到 AMP 组件的通用属性。

样式

<amp-ad> 元素本身不得具有或放置在设置了 CSS position: fixed 的容器中（amp-lightbox 和粘性广告单元除外）。这是由于全页覆盖广告的 UX 影响。将来可能会考虑允许在维护某些 UX 不变性的 AMP 控制的容器中放置类似的广告格式。

验证

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

支持的广告网络

支持的嵌入类型

需要更多帮助？

您已经阅读过本文档十几次了，但它实际上并没有涵盖您所有的问题？也许其他人也有同样的感受：在 Stack Overflow 上联系他们。

前往 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的长期参与者，但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。

前往 GitHub

amp-ad

描述

必需脚本

支持的布局

用法

占位符

无广告可用

投放视频广告

从自定义域运行广告

安全

增强传入的广告配置

属性

type（必需）

sticky（可选）

data-foo-bar

data-vars-foo-bar

src（可选）

json（可选）

data-consent-notification-id（可选）

data-loading-strategy（可选）

data-ad-container-id（可选）