广告代码实施

如何创建与 AMP 兼容的广告单元

本指南将向您介绍如何创建与 AMP 兼容的广告单元,以便在 AMP 网页上展示 AdSense 广告。

AdSense AMP 广告单元可以采用自适应格式,也可以采用固定尺寸。我们建议您使用自适应 AMP 广告单元。原因如下:

  • 自适应 AMP 广告单元可根据用户所使用的设备自动调整尺寸,并使用用户屏幕的全部宽度。
  • Google 会优化广告尺寸,以确保此类广告在您的页面上呈现理想的效果。
所有 AdSense 功能(例如允许/屏蔽广告、广告平衡、效果报告等)都支持 AMP 广告。

前期准备

确保您已将所需的 AMP 脚本添加到要展示 AMP 广告的网页上。

  • 要添加该脚本,请将下列代码复制并粘贴到您的 AMP HTML 网页的 <head></head> 标记之间:

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

此脚本会加载所需的 amp-ad 库,但脚本本身无法让广告在您的 AMP 页面上展示。要展示广告,您还需要添加与 AMP 兼容的广告代码。您可以访问此处的链接了解 amp-ad 组件:https://www.ampproject.org/docs/reference/components/amp-ad

创建与 AMP 兼容的自适应广告单元

目前,需要通过人工方式创建自适应 AMP 广告单元,操作步骤如下所示:

  1. 在您的 AdSense 帐号中创建一个新的自适应广告单元
  2. 从第 1 步中创建的自适应广告单元的广告代码中,查找并记下以下信息:
    • 发布商 ID (data-ad-client),例如 ca-pub-1234567891234567
    • 广告单元 ID (data-ad-slot),例如 1234567890

    查看示例

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:inline-block;width:120px;height:600px"
         data-ad-client="ca-pub-1234567891234567"
         data-ad-slot="1234567890"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  3. 创建 AMP 广告代码
    复制以下广告代码,并将 data-ad-clientdata-ad-slot 值替换为第 2 步中您自己的值。
    <amp-ad width="100vw" height=320
      type="adsense"
      data-ad-client="ca-pub-1234567891234567"
      data-ad-slot="1234567890"
      data-auto-format="rspv"
      data-full-width>
        <div overflow></div>
    </amp-ad>
    我们强烈建议您不要修改上述广告代码的任何其他部分,因为这可能会导致您的广告代码失效。
  4. 将 AMP 广告代码粘贴到您想要展示广告的移动网页的 HTML 源代码中。请注意,首屏非首屏都是可接受的广告展示位置。另请注意,含 AMP 广告单元的网页仍需遵守 AdSense 合作规范
    一定不要将广告代码放置在高度固定或有限的父容器(<div><iframe> 等)中,否则您的广告尺寸可能会出现变化并破坏页面版式。
  5. (可选)放置 AMP 广告代码后,建议您在不同的移动设备上测试您的广告,确保自适应功能正常工作。
    在您自己的 AMP 页面上查看广告时,广告展示可能会有一段时间的延迟,因为 AMP 会优先处理内容。详细了解如何缓存 AMP 页面

高级用法:固定尺寸的 AMP 广告、设置 AMP 广告样式等

要为您的 AMP 广告单元设置固定的宽度或高度,请按照有关如何修改自适应 AMP 广告代码的说明操作。

对于更为高级的用法,您可以像设置任何其他 AMP 元素的样式一样来设置 AMP 广告元素的样式。详细了解控制版式的不同方法。

跟踪 AMP 广告单元的效果

查看内容平台报告,以跟踪您的 AMP 广告单元的效果。

本文是否对您有帮助?
您有什么改进建议?