AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-ad

描述

用于显示广告的容器。

 

必需脚本

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

支持的布局

用法

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>

投放视频广告

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

  1. AMP 原生支持许多视频播放器，例如 BrightCove、DailyMotion 等，它们可以通过广告获利。有关完整列表，请参阅媒体组件。

  2. 使用amp-ima-video组件，该组件带有内置的 IMA SDK 和 HTML5 视频播放器

  3. 如果您使用的视频播放器在 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 的第 3 个参数强制执行来源，并且还必须使用 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 变量。

src（可选）

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

json（可选）

使用此属性将配置作为任意复杂的 JSON 对象传递给广告。该对象按原样传递给广告，不会对名称进行任何处理。

如果提供，则需要使用给定的 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 影响。将来可能会考虑在 AMP 控制的容器内允许类似的广告格式，这些容器保持某些 UX 不变性。

验证

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

支持的广告网络

支持的嵌入类型

需要更多帮助？

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

前往 Stack Overflow
发现错误或缺少功能？

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

前往 GitHub