Google 发布商代码使用入门

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

您可以使用 GPT 动态构建广告请求。 GPT 会提取广告单元代码、广告尺寸和自定义定位等关键详情,构建请求,并在网页上展示广告。

如需详细了解 GPT,请参阅 Ad Manager 帮助中心

下面提供了一些示例,您可以参考它们来开始使用 GPT。如果您需要 GPT 方面的更多帮助,请参阅支持选项

展示测试广告

以下示例将逐步创建一个使用 GPT 从 Google 测试广告联盟加载常规广告的测试页。

可以在展示测试广告示例页面上找到此示例的完整代码。

  1. 创建基本 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>
        <script>
          googletag.cmd.push(() => {
            // Request and render an ad for the "banner-ad" slot.
            googletag.display("banner-ad");
          });
        </script>
      </body>
    </html>
    
  2. 加载 GPT 库

    将以下代码添加到 HTML 文档的 <head> 中,加载 GPT 库。

    此代码从 https://securepubads.g.doubleclick.net/tag/js/gpt.js 加载 GPT 库。该库完全加载后,便会处理 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"></script>
      <style></style>
    </head>
    
  3. 定义广告位

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

    此代码会先确保 googletag 对象可用,然后再将用于构建广告位并启用 GPT 的命令加入队列。

    此示例中的广告位将从路径 /6355419/Travel/Europe/France/Paris 指定的广告单元加载尺寸为 300x250 的广告。广告将在页面正文的 <div id="banner-ad"> 元素中展示,接下来将添加该元素。

    <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"></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>
    
  4. 指定广告的展示位置

    将以下代码添加到 HTML 文档的 <body> 中,以指定广告在网页上的展示位置。

    请注意,此 <div> 的 ID 与定义广告位时指定的 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>
    
  5. 预览测试页

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

展示自己的广告

如需展示您自己的广告,请使用展示测试广告中的 hello-gpt.html 文件,然后将标头中的代码替换为指定您自己的 Ad Manager 广告资源网中的广告资源的代码。

  1. 为您要展示的广告单元生成广告代码。如需详细了解如何生成广告代码,请访问 Ad Manager 帮助中心

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

    <head>
     <meta charset="utf-8">
     <title>Hello GPT</title>
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></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>
    
  3. 保存更新后的 hello-gpt.html 文件,然后在网络浏览器中打开它。