以下指南详细介绍了展示测试广告，并介绍了更多基本概念，以便您充分利用 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 的情况下，您可以更精确地控制广告加载和刷新以及批处理行为。
完整示例
以下是本指南所依据的示例页面的完整源代码。您还可以查看此页面的互动演示。