Google 發布商廣告代碼範例

以下顯示的完整程式碼範例,可供您用來建立電腦版和行動版的 Google 發布商廣告代碼 (GPT)。您也可以另行瞭解如何使用 Google 廣告代碼產生器自動產生 GPT 廣告代碼。

本文還包含無法編輯網頁標頭以及不使用 JavaScript 建立 1x1 追蹤像素的相關指示。

更新代管的代碼庫網域以充分加快 GPT 速度

Google 發布商廣告代碼庫目前除了放在 https://securepubads.g.doubleclick.net/tag/js/gpt.js,還放在 googletagservices.com 網域。雖然您不必更新網頁上所有的 GPT 參照也能使用這個新網域,但我們強烈建議您這麼做。

這項變更能將所有廣告放送請求整合到一個網域 (而不是兩個),這表示瀏覽器只需要連到一個網域即可。兩個網域的廣告代碼庫完全相同。

這個做法可加快代碼的速度並更快擷取廣告。

Google 發布商廣告代碼範例

查看不含提示的代碼
1 <html>
2 <head>
3 <script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js">
4 </script>
5 </script>
6   window.googletag = window.googletag || {cmd: []};
7 </script>
8 </script>
9   googletag.cmd.push(function() {
10     googletag.pubads().set("adsense_background_color", "FFFFFF");
11   });
12 </script>
13 <script>
14   googletag.cmd.push(function() {
15     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")
16       .addService(googletag.pubads())
17       .setTargeting("interests", ["sports", "music", "movies"]);
18     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
19       .addService(googletag.pubads())
20       .setTargeting("gender", "male")
21       .setTargeting("age", "20-30");
22     googletag.pubads().setTargeting("topic","basketball");
23     googletag.pubads().enableSingleRequest();
24     googletag.enableServices();
25   });
26 </script>
27 </head>
28 <body>
29   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">
30     <script>
31       googletag.cmd.push(function() {
32          googletag.display("div-gpt-ad-123456789-0");
33       });
34     </script>
35   </div>
36     <div id="div-gpt-ad-123456789-1">
37     <script>
38       googletag.cmd.push(function() {
39          googletag.display("div-gpt-ad-123456789-1");
40       });
41     </script>
42   </div>
43 </body>
44 </html>
 
1 <html>
2 <head>
3 <script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js">
4 </script>
5 </script>
6   window.googletag = window.googletag || {cmd: []};
7 </script>

第 3-7 行:這段模版程式碼能夠透過 SSL/HTTPS 以非同步模式載入 Ad Manager 使用的 GPT 程式庫。這是建立命令佇列的位置,負責處理許多可以非同步處理的函式 (通常是廣告呼叫)。您不需要編輯這個區段的程式碼。

8 </script>
9   googletag.cmd.push(function() {
10     googletag.pubads().set("adsense_background_color", "FFFFFF");
11   });
12 </script>

第 8-12 行 (選用):針對放送 AdSense 廣告的版位設定網頁層級屬性。如果變更這些屬性,將覆寫 Ad Manager 或 AdSense 中設定的所有樣式。這個函式並不常用,原因是 Ad Manager 中就有提供相關設定選項。想瞭解如何在 GPT 中設定 AdSense 參數,請參閱開發人員說明文件中有關 .set() 函式的說明

13 <script>
14   googletag.cmd.push(function() {
15     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")

第 15 行"/1234/travel/asia" 指明了聯播網代碼 (1234) 和指定廣告單元 (travel/asia)。想找出您的聯播網代碼,請在 Ad Manager 中依序按一下 [管理] 然後 [全域設定] 然後 [聯播網代碼]

[728, 90] 設定了廣告版位的廣告素材大小。如要設定多個大小,請使用以下語法:[[width1, height1], [width2, height2], [width3, height3]]。請將這裡所有的大小與指定廣告單元建立關聯,這樣就能根據該版位縮小清單範圍。使用多種版位大小時,請根據它們在 Ad Manager 中的顯示順序宣告這些版位大小。進一步瞭解版位定義和順序

16       .addService(googletag.pubads())
17       .setTargeting("interests", ["sports", "music", "movies"]);
18     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
19       .addService(googletag.pubads())
20       .setTargeting("gender", "male")
21       .setTargeting("age", "20-30");

第 17、20 和 21 行:使用 .setTargeting() 函式設定廣告版面層級鍵/值指定條件。您可以將多個值與同一個鍵建立關聯,請參考第一個範例中的設定:("key", ["value1", "value2", "value3"])。如要指定多個鍵,請多次呼叫該函式,如第二個範例所示:(gender=maleage=20-30)。

想瞭解如何在 GPT 中設定鍵/值參數,請參閱開發人員文件中有關 .setTargeting() 函式的說明進一步瞭解如何透過 GPT 設定指定目標和大小

22     googletag.pubads().setTargeting("topic","basketball");

第 22 行googletag.pubads().setTargeting("topic","basketball"); 設定了網頁層級鍵/值指定目標。如果使用網頁層級鍵/值來設定指定目標,所有廣告版位都會沿用這個目標。就如同版位層級鍵/值,您可以將多個值與同一個鍵建立關聯:("key", ["value1", "value2", "value3"])。

23     googletag.pubads().enableSingleRequest();

第 23 行googletag.pubads().enableSingleRequest(); 啟用了單一請求架構 (SRA)。想一次呼叫網頁上的所有廣告版位 (允許保證路障型廣告可能會對網頁成效有幫助),請加入這一行。

24     googletag.enableServices();
25   });
26 </script>
27 </head>
28 <body>
29   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">

第 29 行 (選用)style="width: 728px; height: 90px" 是元素在廣告素材顯示前會採用的大小。如果您使用的是多重大小廣告代碼,建議您略過這一行 (否則該元素會在所選廣告素材顯示後採用其大小);如果您選擇使用這一行,請將兩個尺寸都放大到能夠包含最大的合適廣告素材。但如果是單一大小廣告代碼,您可以使用這一行來展開容器元素到廣告素材載入為止,這樣其他網頁元素在該廣告素材顯示時才不會改變。

30     <script>
31       googletag.cmd.push(function() {
32          googletag.display("div-gpt-ad-123456789-0");
33       });
34     </script>
35   </div>
36     <div id="div-gpt-ad-123456789-1">
37     <script>
38       googletag.cmd.push(function() {

第 9、14、31 和 38 行:函式呼叫加到非同步處理的命令佇列中,與網頁載入作業分開進行。

39          googletag.display("div-gpt-ad-123456789-1");

第 15、18、29、32、36 和 39 行:我們是利用 "div-gpt-ad-123456789-0",將標頭中定義的廣告版位與網頁中的廣告版位 (也就是內文中用來放送廣告素材的 div 代碼) 進行比對。您可以選用任何名稱,只要名稱相符即可。不過,我們的代碼產生器會採用 "div-gpt-ad-<隨機數字>-0""div-gpt-ad-<隨機數字>-1" 命名規則。請為網頁的特定位置使用相同且一致的 <div> ID,以便用於各個層面的最佳化作業。

儘管這裡使用的是隨機數字,GPT 卻不是以這種方式辨識每個廣告請求,而是透過 GPT 程式庫在背景進行辨識。此外,這些名稱在不同網頁上可以重複使用,只要相同網頁上的各個 div 名稱沒有重複就沒問題。

想進一步瞭解 Ad Manager 廣告空間結構、廣告單元階層,以及廣告單元如何沿用指定目標設定,請參閱廣告空間總覽

40       });
41     </script>
42   </div>
43 </body>
44 </html>

如果無法編輯網頁標頭

您不需要修改網頁的標頭也可以使用 GPT。

做法 1:使用內置廣告代碼 (而不是網頁的標頭) 來定義廣告單元在網頁的顯示位置。透過內置廣告代碼,即可將整個 GPT 廣告版位定義和請求 (包括載入 GPT 程式庫) 包含在一個 <script> 標記中。以下是以內置方式定義廣告版位的範例。

由於廣告代碼會使用 GPT JavaScript 程式庫,因此您必須先加入可載入這個程式庫的程式碼,再加入廣告代碼程式碼 (如以下範例所示)。

非同步內置 GPT 範例

這些內置 GPT 範例不支援 SRA。

呼叫 GPT JavaScript 程式庫

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

廣告代碼範例 1:內置廣告代碼

<div id="div-gpt-ad-1234567891234-0">
  <script>
    googletag.cmd.push(function() {
      googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
        .addService(googletag.pubads())
        .setTargeting("Gender", "Male");
      googletag.enableServices();
      googletag.display('div-gpt-ad-1234567891234-0');
  });
  </script>
</div>

廣告代碼範例 2:精簡版內置廣告代碼 (不支援廣告版位層級指定功能)

<div id='div-gpt-ad-1234567891234-0'>
  <script>
    googletag.cmd.push(function() {
      googletag.pubads().display('/1234/sports/football', [728, 90], 'div-gpt-ad-1234567891234-0');
    });
  </script>
</div>

做法 2:使用傳統的 GPT 導入方式,但是將廣告版位定義放在 HTML 的內文,而非放在標頭。系統必須先呼叫用來載入程式庫及定義廣告版位的程式碼,您才能為其請求廣告。由於此種程式碼在網頁上沒有分成標頭和內文兩段,而且您需要自行管理程式碼序列,因此這種做法更加複雜,但能讓您靈活運用 SRA。

使用非 JavaScript GPT 廣告代碼建立 1x1 的追蹤像素

如果要透過 GPT 建立曝光次數追蹤器:

  1. 建立新廣告單元,或是選擇要用來追蹤曝光次數的現有廣告單元。

  2. 建立 1x1 的委刊項,然後在當中加入透明像素的圖片廣告素材。

  3. 將 1x1 委刊項指定到步驟 1 中建立的廣告單元。

  4. 建立一個非 JavaScript GPT 廣告代碼,以便呼叫曝光像素並指定步驟 1 中建立的廣告單元。範例如下:

    <img src='http://pubads.g.doubleclick.net/gampad/ad?iu=/1234/ad_unit&sz=1x1&t=&c=12345678'/>

    瞭解如何產生非 JavaScript 網址

  5. 曝光像素廣告代碼有兩種用法:

    • 在網頁所要放送的自訂或第三方廣告素材中加入這種廣告代碼:在 [設定] 頁面的 [程式碼片段] 方塊上方加入該廣告代碼。

    • 直接將標記加到網頁。

這對您有幫助嗎?
我們應如何改進呢?