通过示例了解基础知识

以下指南对测试广告展示进行了详细阐述，并介绍了更多基本概念，以充分利用 Google 发布商代码 (GPT) 库。这些概念包括：

广告尺寸调整
键值对定位
单一请求架构

加载 GPT 库

首先加载并初始化 GPT 库。将以下代码添加到 HTML 文档的 <head>：

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };

  googletag.cmd.push(() => {

  });
</script>

此操作会加载 GPT 库并初始化 googletag 和 CommandArray 对象。初始化这些对象后，您可以立即开始使用 GPT 命令数组。将 JavaScript 代码添加到此代码段中定义的空函数的正文后面。

定义广告位

加载 GPT 后，您便可以定义广告位。以下示例定义了三个广告位，它们分别具有不同的广告格式、尺寸和定位选项。

固定尺寸广告位

下面是一个简单的固定尺寸广告位：

// Define a fixed size ad slot, customized with key-value targeting.
googletag
  .defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
  .addService(googletag.pubads())
  .setTargeting("color", "red")
  .setTargeting("position", "atf");

除了广告单元路径、尺寸和容器 <div> ID 之外，此代码段还指定了一些定位选项。这些选项可限制和区分可投放到此广告位的广告。详细了解键值对定位。

锚定广告位

下面是一个附加到视口底部的锚定广告位：

// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
  "/6355419/Travel",
  googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);

// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
  anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());

  document.getElementById("status").textContent =
    "Anchor ad is initialized. Scroll page to activate.";
}

锚点广告位是一种页外格式，使用 defineOutOfPageSlot 方法（而不是常见的 defineSlot 方法）进行定义。详细了解页外广告素材。

页外广告格式通常会对它们可以投放到的网页和设备的类型有所限制。由于存在这些限制，因此您必须先验证槽是否已成功定义，然后才能与其互动。如需了解详情，请参阅展示锚定广告示例。

自适应广告位

以下是原生广告的自适应广告位：

// Define a fluid ad slot that adjusts its height to fit the creative
// content being displayed.
googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

自适应广告位没有固定的尺寸。自适应广告位会调整以适应广告中的广告素材内容。您可以使用 fluid 尺寸选项定义自适应广告位。详细了解广告尺寸和可用的尺寸选项。

配置页面级设置

某些 GPT 配置选项适用于全局（而非特定广告位）。这些设置称为网页级设置。

以下示例说明了如何配置网页级设置：

// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");

// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();

此代码段会执行以下三项操作：

配置网页级定位选项，这些选项将应用于网页上的每个广告位。
开启单一请求架构 (SRA) 模式，将针对多个广告位的请求捆绑到一个广告请求中。SRA 可以提高性能，并且是确保竞争排除和包版得到遵循的必要条件，因此我们建议您始终启用 SRA。详细了解如何正确使用 SRA。
启用附加到我们的广告位的服务，以便发出广告请求。

展示广告

最后，将以下代码段添加到页面的 <body>：

<div class="page-content centered">
  <div id="banner-ad" style="width: 728px; height: 90px"></div>
  <!--
  If the following status is displayed when the page is rendered, try
  loading the page in a new window or on a different device.
-->
  <h1 id="status">Anchor ads are not supported on this page.</h1>
  <!--
  Spacer used for example purposes only. This positions the native ad
  container below the fold to encourage scrolling.
-->
  <div class="spacer"></div>
  <div id="native-ad" class="native-slot"></div>
</div>
<script>
  googletag.cmd.push(() => {
    // Request and render all previously defined ad slots.
    googletag.display("banner-ad");
  });
</script>

此示例定义了两个广告位容器：banner-ad 和 native-ad。这些容器 id 值对应于您之前在本示例中定义广告位时提供的值。

定义所有广告位后，系统会进行调用以显示 banner-ad。由于启用了 SRA，因此该单个展示广告调用会请求并呈现截至此时间点之前定义的所有广告位。如有必要，您可以在启用 SRA 的情况下更精确地控制广告加载和刷新以及批处理行为。

完整示例

以下是本指南所依据的示例页面的完整源代码。还可以观看此页面的互动演示。

JavaScript

TypeScript

开始使用

使用 TypeScript