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

Google 發佈商廣告代碼範例

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

本文包含:

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

如果您要建立非同步 Google 發佈商廣告代碼,以下是完整的程式碼範例供您參考。這個廣告代碼呈現出許多常見於非同步 GPT 廣告請求的功能和語法。

想進一步瞭解如何產生 Google 發佈商廣告代碼,請參閱在 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> 編號,以便在範圍廣泛的區域達成最佳化的成效。

    儘管這裡使用的是隨機號碼,但 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"])。想進一步瞭解如何在 GPT 中設定鍵/值參數,請參閱開發人員說明文件中有關 .setTargeting() 函式的說明,以及透過 GPT 設定指定目標及大小一文。

  • 第 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> 編號,以便在範圍廣泛的區域達成最佳化的成效。

    儘管這裡使用的是隨機號碼,但 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"])。想進一步瞭解如何在 GPT 中設定鍵/值參數,請參閱開發人員說明文件中有關 .setTargeting() 函式的說明,以及透過 GPT 設定指定目標及大小一文。

  • 第 17 行:googletag.pubads().enableSingleRequest(); 會啟用單一請求架構 (SRA)。想一次呼叫網頁上的所有廣告版位 (除了保證路障型廣告,要是將廣告併入一次呼叫中,可能還會對網頁成效有幫助),請加入這一行。但是,為什麼有人不使用 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> 廣告代碼中。內置廣告代碼有一項重大限制,亦即不支援 SRA。若要定義內置廣告版位,請利用下列範例。

非同步內置 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.pubads().enableSyncRendering();
    googletag.pubads().display('/1234/sports/football', [728, 90], 'div-gpt-ad-1234567891234-0');
  </script>
</div>

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

<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>

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

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

在網頁層級替換 AdSense 格式設定 (選擇性)

大多數情況下,您已經在 DFP 或 AdSense 中為 AdSense 廣告設定了格式。不過,如果您想在個別網頁層級替換這項格式設定,可以在廣告代碼中插入以下程式碼。

如果是非同步廣告代碼:

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

 

如果是同步廣告代碼:

<script>
  googletag.pubads().set("adsense_background_color", "FFFFFF");
</script>

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

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

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

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

  3. 將這個 1x1 的委刊項指定至追蹤廣告單元。

  4. 建立會呼叫曝光像素的非 JavaScript GPT 廣告代碼。

    如要使用非 JavaScript 廣告代碼格式建立 1x1 的曝光追蹤像素,您可以在廣告素材程式碼中加入以下範例程式碼:

    <img src='http://pubads.g.doubleclick.net/gampad/ad?iu=/1234/ad_unit&sz=1x1&t=&c=12345678'/>
  5. 曝光像素廣告代碼有兩種用法:

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

    • 直接將標記加到網頁。

要進一步瞭解如何產生非 JavaScript 網址,請參閱將廣告放送到非 JavaScript 環境的相關文章。

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