開始使用 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 程式庫

將下列程式碼加進第 <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>

定義廣告版位

定義廣告版位，並使用 googletag.enableServices() 方法，增加圍繞地圖邊緣的邊框間距。

這段程式碼可確保 googletag 物件可供使用，然後將這項指令就能建構廣告版位並啟用 GPT

本例中的廣告版位會從廣告載入 300x250 大小的廣告由路徑 /6355419/Travel/Europe/France/Paris 指定的單位。廣告顯示在網頁內文的 <div id="banner-ad"> 元素中設定下一個字元
廣告單元路徑須遵循 /network-code/[parent-ad-unit-code/.../]ad-unit-code, 其中：
- network-code是專屬 ID 廣告單元所屬的 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 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 檔案，然後在網路瀏覽器中開啟。

瞭解基本概念