打开空间

实施指南

AMP 页面中的广告

AMP ads (amp-ad, amp-auto-ads, amp-sticky-ad)

如何在 AMP 页面中使用 amp-ad、自动广告和固定广告条展示广告，适用于 AdSense 和 Ad Manager。

  • AdSense
  • Ad Manager
  • 手机和桌面端（位于 AMP 页面中）
了解这种格式检查我的网站
桌面端
手机

1 分钟看懂

什么是 AMP 页面中的广告

AMP 是一种制作非常轻量、快速的页面的方式，是一个开源项目。想象一个带隔层的饭盒：每样东西都有自己的小格子，不能随便往里扔东西。AMP 页面也是如此。您不能随意粘贴任何广告代码，而是使用现成的组件，它们已经知道如何在不拖慢页面的情况下请求和展示广告。

主要有三个组件。amp-ad 是普通的广告位，类似横幅：您指定广告网络类型，AdSense 用 adsense，Ad Manager 用 doubleclick，并填写宽度和高度。amp-auto-ads 是自动模式：它接收来自广告网络的配置，自动选择放置广告的位置，并遵守广告数量上限和广告之间的最小距离。amp-sticky-ad 是固定在屏幕底部的横条，类似锚定广告，带有关闭按钮。

广告网络的代码不会直接在页面上运行。它在一个单独的容器中运行，叫做 iframe，由 AMP 自己控制。如果没有广告返回，AMP 会尝试隐藏空白的广告位，但不会隐藏正在屏幕上的广告位，以免页面跳动。AMP 广告也不能放在固定定位的容器里，AMP 自带的固定广告和 amp-lightbox 除外。

Google 解释说,AMP 是一个开放项目,目标是在任何设备上都能有快速、高性能的页面。在 AdSense 中,你可以创建广告单元并选择 AMP 代码,也可以开启 AMP 自动广告。在 Ad Manager 中,你可以直接在后台生成 AMP 标记,Google 建议为 AMP 使用 HTML 广告。如果你的网站已经有页面的 AMP 版本,并希望它们也显示广告,就值得使用。

分步说明

如何实施

  1. 在 head 中加载组件在 AMP 页面的 head 中放入 amp-ad 脚本。如果使用自动广告或固定横条，还要放入 amp-auto-ads 和 amp-sticky-ad 的脚本。
  2. AdSense：创建 AMP 广告单元在 AdSense 中,依次点击广告、按广告单元和展示广告。起个名字,保持自适应,点击保存并获取代码,再点击 AMP。脚本放在 head 中,广告代码放在 body 中。
  3. AdSense：开启 AMP 自动广告在广告中点击你有 AMP 网站吗?,开启 AMP 自动广告,然后点击获取 AMP 代码。把脚本粘贴到每个页面的 head 中,把代码粘贴到 body 开始标记之后。然后点击完成和应用。
  4. Ad Manager：生成 AMP 标记点击库存,再点击广告单元,打开广告单元并进入标记标签页。选择 AMP 标记并点击继续。勾选 AMP 标记以包含占位符和备用内容,然后选择广告单元的尺寸。
  5. 将 AMP 页面与普通页面关联在普通页面上，用 amphtml 标记指向 AMP 版本。在 AMP 页面上，用 canonical 标记指回普通页面。
  6. 等待并检查广告可能需要几分钟，有时最多一小时才会显示。

实施示例

代码及屏幕上的效果

组件脚本放在 head 中；amp-auto-ads 紧接着放在 body 开始标签之后，其余广告放在 body 中应显示的位置。
<!-- No <head> da página AMP -->
<script async custom-element="amp-ad"
  src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-auto-ads"
  src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
<script async custom-element="amp-sticky-ad"
  src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

<body>
  <!-- AdSense: anúncios automáticos, logo depois de abrir o body -->
  <amp-auto-ads type="adsense"
    data-ad-client="ca-pub-0000000000000000">
  </amp-auto-ads>

  <!-- AdSense: bloco responsivo, onde o anúncio deve aparecer -->
  <amp-ad width="100vw" height="320"
    type="adsense"
    data-ad-client="ca-pub-0000000000000000"
    data-ad-slot="1234567890"
    data-auto-format="rspv"
    data-full-width>
    <div overflow></div>
  </amp-ad>

  <!-- Ad Manager: faixa fixa embaixo (só uma por página) -->
  <amp-sticky-ad layout="nodisplay">
    <amp-ad width="320" height="50"
      type="doubleclick"
      data-slot="/1234567/exemplo">
    </amp-ad>
  </amp-sticky-ad>
</body>
在桌面端amp-ad 按设定的宽度和高度占据广告位，与普通横幅相同。amp-sticky-ad 的固定横条固定在底部，宽度为整个屏幕，高度最高 100 像素。
在手机上AdSense 的自适应广告单元占满屏幕宽度。固定横条位于底部，可以关闭，滚动到页面末尾时，AMP 会留出额外空间，避免它遮挡内容。

Google 的建议

可以做和不可以做

可以

  • 使用类型为 adsense 或 doubleclick 的 amp-ad，并填写宽度和高度。
  • 使用 AdSense 的自适应广告单元，Google 建议保持选中。
  • 将 amp-auto-ads 与 AdSense 配合使用，并在后台关闭您不想在 AMP 页面上使用的格式。
  • 每个页面只放一个 amp-sticky-ad 固定横条，其中只含一个 amp-ad。
  • 在广告加载时显示占位内容，在广告没有返回时显示备用内容。
  • 在 Ad Manager 中，刷新使用 Fast Fetch 的 AMP 广告，最小间隔为 30 秒。

不可以

  • 把 amp-ad 放在固定定位的容器中，固定广告和 amp-lightbox 除外。
  • 在同一页面上放多个 amp-sticky-ad。
  • 在固定横条上使用透明或半透明背景。AMP 会替换成纯色。
  • 在不使用 HTTPS 的情况下投放广告或嵌入内容。
  • 在 Ad Manager 中，同时开启刷新和单一请求 (SRA)。刷新会被关闭，并出现错误。
  • 在 Web Story 中直接使用 amp-ad。Web Story 使用 amp-story-auto-ads。

提示

正确的做法

注意

常见错误

脚本不在 head 中

每个组件的脚本放在 head 中，广告放在 body 中。没有正确的脚本，组件无法工作。

照抄示例代码

当您选择 AMP 选项时，AdSense 会提供现成的 AMP 代码。请复制您账号中的代码，其中带有您的发布商 ID。

固定横条搭建有误

amp-sticky-ad 需要 nodisplay 版式，并且内部只能有一个 amp-ad。

AMP 页面孤立无关联

AdSense 要求普通页面和 AMP 页面通过 amphtml 和 canonical 标记互相指向对方。

常见问题

我可以在 AMP 页面上使用普通的 AdSense 代码吗？

请使用 AMP 代码。在 AMP 页面上，广告网络的 JavaScript 不会直接在页面上运行，而是在由 AMP 控制的 iframe 中运行。

如果没有广告返回会怎样？

AMP 会尝试隐藏该广告位。如果做不到，就显示备用内容。没有广告的固定横条不会显示。

Ad Manager 会刷新 AMP 中的广告吗？

会，对使用 Fast Fetch 的广告可以刷新。您在 head 中加入一个标记，设置间隔（至少 30 秒），可以按页面或按广告位设置。它不能与 SRA 同时使用。

广告需要多久才会显示？

通常几分钟，有时最多一小时。

资料库

Google 官方来源

本页内容均以 Google 官方文档为准。可直接阅读原文：

你的网站是否正确使用了这种格式？

审核会像访问者一样读取网站，不点击任何内容，并告诉你需要修正什么。

开始审核