搜尋
清除搜尋內容
關閉搜尋框
Google 應用程式
主選單

Google 發佈商廣告代碼範例

本文提供電腦版和行動版的 Google 發佈商廣告代碼 (GPT) 範例。您也可以另行瞭解如何使用 Google 廣告代碼產生器自動產生 GPT 廣告代碼。

本文包含:

非同步 Google 發佈商廣告代碼範例

下方是建立非同步 Google 發佈商廣告代碼的完整程式碼範例,當中展示了非同步 GPT 廣告請求中的多種常見功能和語法。進一步瞭解如何在 DFP 中產生廣告代碼

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

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

  • 第 10、15、32、39 行:如果您採用非同步顯示模式,請將初始模版程式碼後的所有指令碼包裝置入第 10 行的 googletag.cmd.push 函式中。這麼做會將該函式加到非同步處理的命令佇列中,與網頁載入作業分開進行。瞭解同步和非同步顯示模式之間的差異

  • 第 16 行:"/1234/trave/asial" 會指明聯播網代碼 (1234) 和指定的廣告單元 (travel/asia)。您可以在 DFP 的「管理」分頁中找到聯播網代碼。

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

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

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

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

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

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

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

  • 第 24 行:googletag.pubads().enableSingleRequest(); 會啟用單一請求架構 (SRA)。想一次呼叫網頁上的所有廣告版位 (允許保證路障型廣告可能會對網頁成效有幫助),請加入這一行。目前,SRA 不支援 Google Programmable Ads (GPA)。

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

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

同步 Google 發佈商廣告代碼範例

下方是建立同步 Google 發佈商廣告代碼的完整程式碼範例,當中展示了同步 GPT 廣告請求中的多種常見功能和語法。

我們建議不要啟用同步請求功能,原因是這項功能可能會導致網頁內容延遲載入。建議您改用非同步廣告代碼。進一步瞭解非同步廣告代碼,以及仍適合使用同步廣告代碼的情況。
如果使用者的網路連線速度較慢 (例如使用 2G),又透過○ document.write() 動態插入外部指令碼,可能會導致主要網頁內容延遲數十秒才顯示。這是我們建議以非同步廣告代碼取代同步顯示設定的另一個原因。進一步瞭解 2G 和 document.write() 的相關問題
1 <html>
  • 第 3-4 行是模版程式碼,可以同步模式載入 DFP 使用的 GPT JavaScript 程式庫,必要時會使用 SSL/HTTPS。這是建立命令佇列的位置,負責處理許多可以同步處理的函式 (通常是廣告呼叫)。您不需要編輯這個區段的程式碼。

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

  • 第 9 和 12 行:"/1234/travel/asia" 會指明聯播網代碼 (1234) 和指定的廣告單元 (travel/asia)。您可以在 DFP 的「管理」分頁中找到聯播網代碼。

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

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

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

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

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

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

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

  • 第 17 行:googletag.pubads().enableSingleRequest(); 會啟用單一請求架構 (SRA)。想一次呼叫網頁上的所有廣告版位 (允許保證路障型廣告可能會對網頁成效有幫助),請加入這一行。目前,SRA 不支援 Google Programmable Ads (GPA)。

  • 第 18 行:如要同步顯示廣告素材,請新增 googletag.pubads().enableSyncRendering();。這段程式碼會指示系統等待每個廣告請求完成,再繼續顯示網頁。

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

2 <head>
3 <script src="https://www.googletagservices.com/tag/js/gpt.js"> 
4 </script>
5 <script type="text/Javascript">
6     googletag.pubads().set("adsense_background_color", "FFFFFF");
7 </script>
8 </script>
9     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")
10       .addService(googletag.pubads())
11       .setTargeting("interests", ["sports", "music", "movies"]);
12     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
13       .addService(googletag.pubads())
14       .setTargeting("gender", "male")
15       .setTargeting("age", "20-30");
16     googletag.pubads().setTargeting("topic","basketball");
17     googletag.pubads().enableSingleRequest();
18     googletag.pubads().enableSyncRendering();
19     googletag.enableServices();
20 </script>
21 </head>
22 <body>
23   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">
24     <script type="text/Javascript">
25       googletag.display("div-gpt-ad-123456789-0");
26     </script>
27   </div>
28   <div id="div-gpt-ad-123456789-1">
29     <script type="text/Javascript">
30       googletag.display("div-gpt-ad-123456789-1");
31     </script>
32   </div>
33 </body>
34 </html>
 

如果無法編輯網頁標頭

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

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

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

非同步內置 GPT 範例

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

呼叫 GPT JavaScript 程式庫

<script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<script>
 var googletag = googletag || {};
 googletag.cmd = 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>
同步內置 GPT 範例

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

呼叫 GPT JavaScript 程式庫

<script type="text/javascript">
 (function() {
   var useSSL = 'https:' == document.location.protocol;
   var src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js';
   document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
 })();
</script>

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

<div id='div-gpt-ad-1234567891234-0'>
  <script type='text/javascript'>
    googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
      .addService(googletag.pubads())
      .setTargeting("Gender", "Male");
    googletag.pubads().enableSyncRendering();
    googletag.enableServices();googletag.display('div-gpt-ad-1234567891234-0');
  </script>
</div>

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

<div id='div-gpt-ad-1234567891234-0'>
  <script type='text/javascript'>
    googletag.pubads().enableSyncRendering();
    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. 曝光像素廣告代碼有兩種用法:

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

    • 直接將標記加到網頁。

這篇文章實用嗎?
我們應如何改進呢?