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