透過範例瞭解基本概念

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

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

載入 GPT 程式庫

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

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></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 adjusts its height to fit the creative
// content being displayed.
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