開始使用 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>
    <script>
      googletag.cmd.push(() => {
        // Request and render an ad for the "banner-ad" slot.
        googletag.display("banner-ad");
      });
    </script>
  </body>
</html>

載入 GPT 程式庫

將下列程式碼新增至 HTML 文件的 <head>，即可載入 GPT 程式庫。

這段程式碼會從 https://securepubads.g.doubleclick.net/tag/js/gpt.js 載入 GPT 程式庫。程式庫載入完成後，會處理 googletag 物件中的所有已排入佇列的指令。

重要事項： 只能從 Google 網域載入 GPT。
```
<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>
```
定義廣告版位

定義廣告版位並使用 googletag.enableServices() 方法初始化 GPT。

此程式碼先確保 googletag 物件可供使用，然後將用於建構廣告版位的指令排入佇列，然後啟用 GPT。

這個範例中的廣告版位會從路徑 /6355419/Travel/Europe/France/Paris 指定的廣告單元載入大小為 300x250 的廣告。廣告會顯示在頁面內文的 <div id="banner-ad"> 元素中，並將於接下來新增。
廣告單元路徑採用 /network-code/[parent-ad-unit-code/.../]ad-unit-code ��式，其中：
- network-code 是廣告單元所屬 Ad Manager 聯播網的專屬 ID
- 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"></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 與定義廣告版位時指定的 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> 中加入的 <div> 元素 ID 相符。

顯示您自己的廣告

如要顯示自己的廣告，請使用顯示測試廣告中的 hello-gpt.html 檔案，然後將標頭中的程式碼換成指定您 Ad Manager 聯播網廣告空間的程式碼。

為您想要顯示的廣告單元產生廣告代碼。如要進一步瞭解如何產生廣告代碼，請前往 Ad Manager 說明中心。

複製「Document header」部分提供的廣告代碼程式碼，然後用來取代 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>

儲存更新後的 hello-gpt.html 檔案，並在網路瀏覽器中開啟。

瞭解基本概念