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

    將下列程式碼加進 第 <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. 定義廣告版位

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

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

    本例中的廣告版位會從廣告載入 300x250 大小的廣告 由路徑 /6355419/Travel/Europe/France/Paris 指定的單位。廣告 顯示在網頁內文的 <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"
        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 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 檔案,然後在網路瀏覽器中開啟。