透過範例瞭解基本概念

以下指南將進一步說明如何顯示測試廣告，並介紹更多基本概念，讓您充分運用 Google 發布商廣告代碼 (GPT) 程式庫。這些概念包括：

廣告大小
指定鍵/值
單一要求架構

載入 GPT 程式庫

首先，載入並初始化 GPT 程式庫。將以下內容新增至 HTML 文件的 <head>：

<script
  async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"
></script>
<script>
  window.googletag = window.googletag || { cmd: [] };

  googletag.cmd.push(() => {

  });
</script>

這會載入 GPT 程式庫，並初始化 googletag 和 CommandArray 物件。初始化這些物件後，您就能立即開始使用 GPT 指令陣列。將下列 JavaScript 程式碼新增至此程式碼片段中定義的空白函式主體。

定義廣告版位

載入 GPT 後，您可以定義廣告版位。以下範例定義了三個廣告插槽，並使用不同的廣告格式、大小和指定目標選項。

固定大小廣告版位

以下是簡單的固定大小廣告版位：

// Define a fixed size ad slot, customized with key-value targeting.
googletag
  .defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
  .addService(googletag.pubads())
  .setTargeting("color", "red")
  .setTargeting("position", "atf");

除了廣告單元路徑、大小和容器 <div> ID 外，這個程式碼片段還會指定多個指定目標選項。這些選項會限制和區分可放送至這個版位的廣告。進一步瞭解指定鍵/值。

錨定廣告版位

以下是附加至可視區底部的錨定廣告版位：

// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
  "/6355419/Travel",
  googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);

// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
  anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());

  document.getElementById("status").textContent =
    "Anchor ad is initialized. Scroll page to activate.";
}

錨定版位是一種非頁面格式，會使用 defineOutOfPageSlot 方法定義，而非一般 defineSlot 方法。進一步瞭解非頁內廣告素材。

非頁面內格式通常會限制可放送的網頁類型和裝置。基於這些限制，您必須先確認已成功定義運算單元，才能與版位互動。詳情請參閱「顯示錨定廣告」範例。

自動調整廣告版位

以下是原生廣告的自動調整大小廣告位址：

// Define a fluid ad slot that fills the width of the enclosing column and
// adjusts the height as defined by the native creative delivered.
googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

自動調整廣告版位沒有固定大小。流動廣告插槽會根據廣告的廣告素材內容進行調整。您可以使用 fluid 大小選項定義自動調整廣告版位。進一步瞭解廣告大小和可用的大小選項。

調整網頁層級設定

某些 GPT 設定選項會全域套用，而非套用至特定廣告版位。這類設定稱為網頁層級設定。

以下範例說明如何設定網頁層級設定：

// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");

// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();

這段程式碼會執行以下三項作業：

設定網頁層級指定選項，套用到網頁上的每個廣告版位。
啟用單一請求架構 (SRA) 模式，將多個廣告版位的請求合併為單一廣告請求。SRA 可改善效能，並確保競爭排除和路障型廣告確實受到完善，因此建議您一律啟用 SRA。進一步瞭解如何正確使用 SRA。
啟用與廣告版位相關聯的服務，允許放送廣告請求。

多媒體廣告

最後，請在頁面的 <body> 中加入以下程式碼片段：

<div class="page-content centered">
  <div id="banner-ad" style="width: 728px; height: 90px"></div>
  <!--
  If the following status is displayed when the page is rendered, try
  loading the page in a new window or on a different device.
-->
  <h1 id="status">Anchor ads are not supported on this page.</h1>
  <!--
  Spacer used for example purposes only. This positions the native ad
  container below the fold to encourage scrolling.
-->
  <div class="spacer"></div>
  <div id="native-ad" class="native-slot"></div>
</div>
<script>
  googletag.cmd.push(() => {
    // Request and render all previously defined ad slots.
    googletag.display("banner-ad");
  });
</script>

這會定義兩個廣告版位容器：banner-ad 和 native-ad。這些容器 id 值會對應至先前定義廣告版位時提供的值。

定義所有廣告版位後，系統就會呼叫 banner-ad 顯示廣告。由於已啟用 SRA，因此這項多媒體呼叫要求會轉譯目前為止定義的所有廣告版位。如有需要，您可以在啟用 SRA 的情況下，更精確地控制廣告的載入與重新整理作業以及批次處理行為。

完整範例

以下是本指南所依據的範例網頁的完整原始碼。您也可以查看這個網頁的互動式示範。

JavaScript

TypeScript

瞭解詳情

使用 TypeScript