">文档：<amp-ad> - amp.dev - AMP 框架
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>
在游乐场中打开此代码片段

占位符

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 复制到您的网络服务器。接下来，将以下元标记添加到您的 AMP 文件中

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

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

安全性

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

Iframe 还应强制要求它们仅被 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';
  // 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 属性选择要用于广告标签的模板。

sticky（可选）

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

  • 顶部
  • 底部
  • 右下角
  • 左侧
  • 右侧

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 含义。将来可能会考虑在保持某些 UX 不变性的 AMP 受控容器中允许类似的广告格式。

验证

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

支持的广告网络

支持的嵌入类型

需要更多帮助？

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

转到 Stack Overflow
发现错误或缺少功能？

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

前往 GitHub