打开空间

实施指南

Ad Manager 横幅广告

Display ad slots (Google Publisher Tag)

Ad Manager 的经典广告位，用 Google Publisher Tag 创建，可以是固定尺寸、多种尺寸或自适应。

  • Ad Manager
  • 手机和桌面端
了解这种格式检查我的网站
桌面端
手机

1 分钟看懂

什么是 Ad Manager 横幅广告

Ad Manager 横幅广告就是固定在页面内的那种矩形广告：在正文中间、顶部或侧边。想想学校墙上挂的海报。它有固定的位置和固定的尺寸，路过的人都能看到。在 Ad Manager 中，这个预留位置叫 slot，就是英文里“广告位”的意思。在这个位置请求并展示广告的是 GPT，即 Google Publisher Tag，一个您放到网站上的 Google 代码库。

流程是这样的:首先你告诉 GPT 要使用 Ad Manager 的哪个广告单元、那里能放哪些尺寸,以及它应该显示在页面的哪个小框里。这个小框是一个 div,是 HTML 中带有唯一名称的一小块。然后 GPT 请求广告,并把它绘制在这个小框里。小框的名称在两个地方必须一致,否则广告不会显示。当广告不显示时,Google 自己也会要求先检查这一点。

尺寸有三种选择方式。固定尺寸时，只有该尺寸的广告才能进入，比如 300 x 250。多尺寸时，您列出多个尺寸，Ad Manager 可以选择其中任何一个。自适应时，您制作一张名为尺寸映射的表，说明每种屏幕宽度对应哪些尺寸：大屏一个列表，小屏另一个列表。还有一种流式尺寸，会拉伸到页面宽度，但 Google 解释说，目前它只用于原生广告。

Google 设计这种工作方式，是为了让网站拥有控制权：您决定每个广告放在哪里、接受哪些尺寸，以及何时加载。文档介绍了如何让页面底部的广告等访客靠近时才加载，这叫做延迟加载。它还说明了如何在不重新加载整个页面的情况下刷新广告，并遵守时间和声明方面的规则。如果您已有 Ad Manager 账号，并且想仔细选择每个广告位的位置和尺寸，横幅广告就很值得使用。

分步说明

如何实施

  1. 在 Ad Manager 中生成标记在 Ad Manager 中,点击库存,再点击广告单元。打开广告单元,进入标记标签页,选择 Google 发布商代码 (GPT) 并点击继续。完成其他选项,然后在标记结果中复制标记。
  2. 在 head 中加载 GPT把 GPT 脚本放在页面的 head 部分。正是它把 Google 的广告工具带到您的网站上。
  3. 定义广告位仍然在 head 中，告诉 GPT 广告单元路径、接受的尺寸和 div 名称。如果需要自适应广告位，请加上尺寸映射。最后，启用广告服务。
  4. 创建带预留空间的 div在 body 中，创建与定义时所用名称相同的 div。在 CSS 中按最大的广告尺寸为它设置高度和宽度，这样广告到来时屏幕上不会有内容跳动。
  5. 请求广告紧接着 div,用 div 的名称调用展示。要显示你自己库存中的广告,需要一个状态为准备就绪的有效订单项。
  6. 延迟加载与刷新如有需要，对页面底部的广告位启用延迟加载。如果要刷新广告，请在 Ad Manager 的“库存”、“库存规则”、“发布商声明”中声明，并在页面上使用相同的规则。

实施示例

代码及屏幕上的效果

GPT 和广告位定义放在 head 中；带展示调用的 div 放在 body 中横幅应显示的位置。
<!-- No <head> -->
<script async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(() => {
    // Tamanhos por largura de tela (slot responsivo).
    const mapping = googletag
      .sizeMapping()
      .addSize([1024, 768], [[728, 90], [300, 250]])
      .addSize([0, 0], [300, 250])
      .build();

    googletag
      .defineSlot(
        "/1234567/exemplo",
        [[728, 90], [300, 250]],
        "banner-exemplo",
      )
      .defineSizeMapping(mapping)
      .addService(googletag.pubads());

    // Carregamento lento para espaços longe da tela.
    googletag.setConfig({
      lazyLoad: {
        fetchMarginPercent: 500,
        renderMarginPercent: 200,
        mobileScaling: 2.0,
      },
    });

    googletag.enableServices();
  });
</script>

<!-- No <body>, onde o anúncio deve aparecer -->
<div id="banner-exemplo" style="min-height: 250px;"></div>
<script>
  googletag.cmd.push(() => {
    googletag.display("banner-exemplo");
  });
</script>
在桌面端显示为固定在您所选位置的矩形，比如 728 x 90 或 300 x 250。它会像正文的任何部分一样随页面滚动。
在手机上出现在内容中间，尺寸适合屏幕，比如 300 x 250。借助尺寸映射，手机只会收到您为小屏幕开放的尺寸。

Google 的建议

可以做和不可以做

可以

  • 设置固定尺寸、多个尺寸的列表，或按屏幕宽度设置的尺寸映射。
  • 在 CSS 中为可能出现的最大尺寸预留空间。Google 表示,这是防止页面跳动最有效的办法。
  • 在 head 中定义一打开页面就能看到的广告位，让它们优先加载。
  • 对首屏以下、只有访客滚动页面时才出现的广告位使用延迟加载。
  • 使用 GPT 的刷新功能来更新广告，而不是重新加载整个页面，前提是已在 Ad Manager 中声明刷新。
  • 按访客操作触发的刷新不设最短间隔，因为 Google 只对按时间或按事件的刷新要求最短间隔。

不可以

  • 在 div 中使用与广告位定义中传入的不同的名称。
  • 没有在 Ad Manager 中声明就刷新广告，或声明有误。Google 视此为违规。
  • 在网页上，以小于 30 秒的间隔按时间或按事件刷新。
  • 刷新之前清空广告位。刷新本身就会更换广告，清空只会让空白停留更久。
  • 刷新访客永远看不到的广告位。Google 提醒，这可能会大幅拉低可见率。
  • 让 div 不预留尺寸，这会导致广告到来时内容跳动。

提示

正确的做法

注意

常见错误

div 名称不一致

广告位定义和展示时传入的名称必须与 div 的名称一致。否则，广告就是不会显示。

div 的尺寸与广告不同

Google 要求 div 的宽度、高度和名称与标记中的内容一致。如果不一致,广告可能不会显示。

没有就绪的订单项

如果没有状态为“就绪”的有效订单项，即使代码正确，您自己的库存也不会显示广告。

让手机上变空的映射

在 Google 的示例中，小于 640 x 480 的屏幕会得到一个空列表，因而没有广告。如果不加调整就照抄，竖屏手机可能不会显示横幅。

常见问题

多尺寸和自适应有什么区别？

多尺寸时，列表中的任何尺寸都可以出现在任何屏幕上。自适应时，尺寸映射规定每种屏幕宽度适用哪些尺寸。

可以在普通横幅中使用流式尺寸吗？

Google 解释说，目前 Ad Manager 支持的唯一流式类型是原生广告。普通横幅请使用固定尺寸、多尺寸或尺寸映射。

刷新广告的最短间隔是多久？

在网页上，按时间或按事件的刷新至少需要 30 秒。按访客操作触发的刷新没有最小值。无论哪种情况，都必须在库存规则中声明。

值得使用延迟加载吗？

Google 建议推迟首屏以下的广告位，这在资源较少的手机上尤其有帮助。顶部的广告位应优先加载。

资料库

Google 官方来源

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

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

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

开始审核