通过示例了解基础知识

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

广告大小
键值对定位
单一请求架构

加载 GPT 库

首先，加载并初始化 GPT 库。将以下内容添加到 HTML 文档的 <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(() => {

  });
</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 fills the width of the enclosing column and
// adjusts the height as defined by the native creative delivered.
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