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>
  </body>
</html>

  2. 加载 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>

  3. 定义广告位

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

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

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

    <ph type="x-smartling-placeholder">

    <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>

  4. 指定广告的展示位置

    将以下代码添加到 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>

  5. 预览测试页

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

展示您自己的广告

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

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

  2. 复制文档标头部分中提供的广告代码并使用它 替换 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>

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

下一页
了解基础知识