Google 发布商代码使用入门

Google 发布商代码 (GPT) 是一个广告代码库， Google Ad Manager。

您可以使用 GPT 动态构建广告请求。 GPT 可以接收广告单元代码、广告尺寸和自定义定位、构建请求，并在网页上展示广告。

有关 GPT 的详情，请参阅 Ad Manager 帮助中心。

下面是一些可帮助您开始使用 GPT 的示例。如果需要有关 GPT 的更多帮助，请参阅支持选项。

展示测试广告

以下示例会引导您创建使用 GPT 加载来自 Google 测试广告联盟的常规广告。

有关此示例的完整代码，请访问展示测试广告示例页。

创建基本 HTML 文档

在文本编辑器中，创建一个名为 hello-gpt.html 的基本 HTML 文档。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Display a fixed-sized test ad." />
    <title>Display a test ad</title>
    <style></style>
  </head>
  <body>
  </body>
</html>

加载 GPT 库

将以下代码添加到 HTML 文档的 <head>。

此代码从 https://securepubads.g.doubleclick.net/tag/js/gpt.js.库它会处理所有队列中的命令， googletag 对象。

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script
    async
    src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
    crossorigin="anonymous"
  ></script>
  <style></style>
</head>

定义广告位

定义一个广告位并初始化 GPT，方法是使用 googletag.enableServices() 方法。

此代码首先确保 googletag 对象可用，然后将该命令可构造广告位并启用 GPT。

此示例中的广告位将从广告中加载尺寸为 300x250 的广告由路径 /6355419/Travel/Europe/France/Paris 指定的单位。广告将显示在网页正文的 <div id="banner-ad"> 元素中，将在后续添加。

<ph type="x-smartling-placeholder">
</ph> 广告单元路径遵循以下格式： /network-code/[parent-ad-unit-code/.../]ad-unit-code, 其中：
- network-code是唯一标识符广告单元所属的 Ad Manager 广告资源网
- parent-ad-unit-code 是所有父级广告单元的代码（仅适用于非顶级广告单元）
- ad-unit-code 是要展示的广告单元的代码
请注意，广告单元路径中包含的所有广告单元代码都必须遵守格式规则 Ad Manager。
```
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script
    async
    src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
    crossorigin="anonymous"
  ></script>
  <script>
    window.googletag = window.googletag || { cmd: [] };

    googletag.cmd.push(() => {
      // Define an ad slot for div with id "banner-ad".
      googletag
        .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "banner-ad")
        .addService(googletag.pubads());

      // Enable the PubAdsService.
      googletag.enableServices();
    });
  </script>
  <style></style>
</head>
```

指定广告的展示位置

将以下代码添加到 HTML 文档的 <body>。

请注意，此 <div> 的 ID 与定义。

<body>
  <div id="banner-ad" style="width: 300px; height: 250px"></div>
  <script>
    googletag.cmd.push(() => {
      // Request and render an ad for the "banner-ad" slot.
      googletag.display("banner-ad");
    });
  </script>
</body>

预览测试页

保存 hello-gpt.html 文件，然后在网络浏览器中打开它。加载完成后则网页正文中会显示测试广告。

注意：如果您没有看到广告，请确保页面的 <head> 与您添加到的 <div> 元素的 ID 匹配网页的<body>。

展示您自己的广告

要展示您自己的广告，请使用展示测试广告中的 hello-gpt.html 文件 ad，则将标头中的代码替换为指定来自您自己的 Ad Manager 广告联盟的广告资源

为您要展示的广告单元生成广告代码。详细了解如何在 Ad Exchange 界面中 Ad Manager 帮助中心。

复制文档标头部分中提供的广告代码并使用它替换 HTML 文档 <head> 中的相应代码。

<head>
  <meta charset="utf-8">
  <title>Hello GPT</title>
  <script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></script>
  <script>
    window.googletag = window.googletag || {cmd: []};
    googletag.cmd.push(function() {
      googletag
          .defineSlot("ad-unit-path", [width, height], "div-id")
          .addService(googletag.pubads());
      googletag.enableServices();
    });
  </script>
</head>

保存更新后的 hello-gpt.html 文件，然后在网络浏览器中打开它。

了解基础知识