Google 发布商代码示例

下面是一个用于创建 Google 发布商代码 (GPT) 以供在桌面平台和移动平台上实现的完整代码示例。使用 Google 代码生成器自动生成代码。

如果您是开发者以及需要 GPT 高级实现方案的人员,请参阅 API 参考文档实现示例(例如延迟加载)。

查看高级 GPT 示例

Google 发布商代码示例

针对 GPT 实现的代码分为如下两部分:

  • GPT 的配置在网页的 <head> 中。
  • 对每个具体广告位的调用在 <body> 的相关部分。

此示例仅供参考,我们建议您安排个开发者在您的网站上实现该代码。

GPT 配置

以下代码示例包含调用 GPT JavaScript 库、定义广告位和键值对定位等操作。

1 <html>
2 <HEAD>
3 <script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
4 <script>
5   window.googletag = window.googletag || {cmd: []};
6 </script>

第 3-6 行:通过 SSL/HTTPS 异步加载 Ad Manager 所使用的 GPT 库。命令队列就是在此处构建的,用于处理要同步处理的一系列函数(通常是广告调用)。您不需要修改这部分代码。

7 <script>
8   googletag.cmd.push(function() {
9     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")

第 9 行"/1234/travel/asia" 用于指定广告资源网代码 (1234) 以及定位到的广告单元 (travel/asia)。您可在 Ad Manager 中的管理 > 全局设置 > 广告资源网代码下找到自己的广告资源网代码。

[728, 90] 用于设置广告位的广告素材尺寸。指定多个尺寸时需使用以下语法:[[width1, height1], [width2, height2], [width3, height3]]。请将此处指定的所有尺寸与定位到的广告单元关联,这样您便能根据具体的广告位缩小列表的范围。如果使用的是多尺寸广告位,请按照它们在 Ad Manager 中的显示顺序声明这些广告位尺寸。不妨详细了解广告位的定义和顺序

10       .addService(googletag.pubads())
11       .setTargeting("interests", ["sports", "music", "movies"]);
12     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
13       .addService(googletag.pubads())
14       .setTargeting("gender", "male")
15       .setTargeting("age", "20-30");

第 11、14 和 15 行:使用 .setTargeting() 设置广告位级键值对定位条件。您可以将多个值与一个键相关联,如第一个示例所示:("key", ["value1", "value2", "value3"])。如要定位多个键,请多次调用此函数,如第二个示例所示:(gender=maleage=20-30)。

详细了解如何使用 GPT 设置定位条件和尺寸

16     googletag.pubads().setTargeting("topic","basketball");

第 16 行googletag.pubads().setTargeting("topic","basketball"); 用于设置网页级键值对定位条件。

使用网页级键值对配置定位条件时,所有广告位都会沿用此定位条件。与广告位级键值对相同,您可将多个值与一个键关联:("key", ["value1", "value2", "value3"])。

17     googletag.pubads().enableSingleRequest();

第 17 行googletag.pubads().enableSingleRequest(); 用于启用单一请求架构 (SRA)。添加此行代码即可一次调用网页上的所有广告位,这样可确保在评估遇到的障碍和竞争性排除情况时考虑网页上的所有广告位。

18     googletag.enableServices();
19   });
20 </script>
21 </head>
22 <body>
23   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">

第 23 行(可选)style="width: 728px; height: 90px" 是在呈现广告素材之前在 div 预留空间上设置的初始尺寸。

如果使用的是多尺寸代码,您最好省略这行代码(在这种情况下,元素的尺寸会采用所选广告素材呈现后的尺寸),或者确保这两个尺寸都大到足以容纳可投放的最大广告素材。对于单一尺寸广告代码,使用此参数可确保容器元素在广告素材开始加载之前一直处于展开状态,以避免其他网页元素在广告素材呈现时发生移位。

24     <script>
25       googletag.cmd.push(function() {
26          googletag.display("div-gpt-ad-123456789-0");
27       });
28     </script>
29   </div>
30     <div id="div-gpt-ad-123456789-1">
31     <script>
32       googletag.cmd.push(function() {

第 8、25 和 32 行:函数调用会被添加到命令队列中,以便在加载网页时进行异步处理。

33          googletag.display("div-gpt-ad-123456789-1");

第 9、12、23、26、30 和 33 行"div-gpt-ad-123456789-0" 用于指定 <head> 中定义的广告位与网页上的广告位(即投放广告素材的主体中的 div 标记)之间的匹配方式。您可为它们指定任意名称,只要能使它们匹配即可,但我们的代码生成器使用的命名惯例是 "div-gpt-ad-[随机数]-0""div-gpt-ad-[随机数]-1" 之类的名称。对于网页上的给定位置,请始终使用同一 <div> ID,因为在各种区域中都会使用此 ID 进行优化。

虽然此处使用的是随机数,但 GPT 并不以这种方式唯一标识广告请求。这是通过 GPT 库在后台完成的。此外,只要同一网页上不会多次出现同一 div 名称,就可以在各个网页上使用相同的此类名称。

要详细了解 Ad Manager 广告资源结构、广告单元层次结构以及广告单元如何沿用定位条件,请参阅广告资源概览

34       });
35     </script>
36   </div>
37 </body>
38 </html>

查看高级 GPT 示例

如果您无法修改网页的标头

您可以在不修改网站的 <header> 的情况下使用 GPT。

方法 1:内嵌 GPT

使用内嵌代码(而不是网页标头)来定义广告单元在网页上的显示位置。借助内嵌代码,整个 GPT 广告位定义和请求(包括加载 GPT 库)都会包含在单个 <script> 标签中。

由于广告代码使用的是 GPT JavaScript 库,因此您必须先添加用于加载该库的代码,然后再添加广告代码。

内嵌 GPT 示例

这些内嵌 GPT 示例不支持 SRA。

调用 GPT JavaScript 库

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

内嵌广告代码示例

<div id="div-gpt-ad-1234567891234-0">
  <script>
    googletag.cmd.push(function() {
      googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
        .addService(googletag.pubads())
        .setTargeting("Gender", "Male");
      googletag.enableServices();
      googletag.display('div-gpt-ad-1234567891234-0');
  });
  </script>
</div>

方法 2:将所有代码放在网页正文中

使用传统 GPT 实现方案,但将广告位定义放在 HTML 的主体(而非标头)中。

您必须先调用加载该库和定义广告位的代码,然后才能为这些广告位请求广告。由于此代码未细分到网页的标头和主体中,因此您必须管理代码的序列。该方法会复杂一些,但给您带来了 SRA 的灵活性。

不使用 JavaScript 创建无代码请求

您可以使用无代码请求代替广告代码,以请求在 Ad Manager 中进行投放管理的原始广告素材代码。在需要自定义解析和显示时(例如机顶盒或其他没有 Google 代码或 SDK 支持的环境),通常会使用无代码请求。

该内容对您有帮助吗?

您有什么改进建议?
搜索
清除搜索内容
关闭搜索框
主菜单
16860404946037919461
true
搜索支持中心
true
true
true
true
true
148
false
false