以下顯示的完整程式碼範例，可供您用來建立電腦版和行動版的 Google 發布商廣告代碼 (GPT)。使用 Google 代碼產生器自動產生代碼。
如果開發人員和需要進階 GPT 導入作業的人，請參閱 API 參考資料和導入範例 (例如延遲載入)。
Google 發布商廣告代碼範例程式碼
為 GPT 導入兩段程式碼：
- GPT 的設定位於網頁的
<head>中。 - 每個特定廣告版位的呼叫位於
<body>的相關部分。
這個範例僅供參考，建議請開發人員在網站上導入程式碼。
GPT 設定
以下程式碼範例包括呼叫 GPT JavaScript 程式庫、定義廣告版位、指定鍵/值等。
1 |
<html> |
2 |
<head> |
3 |
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> |
4 |
<script> |
5 |
window.googletag = window.googletag || {cmd: []}; |
6 |
</script> |
|
第 3-6 行：使用 SSL/HTTPS，以非同步方式載入 Ad Manager 使用的 GPT 程式庫。這是建立命令佇列的位置，負責處理許多可以非同步處理的函式 (通常是廣告呼叫)。您不需要編輯這個區段的程式碼。 |
|
| 7 | <script> |
| 8 | googletag.cmd.push(function() { |
| 9 | googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
|
第 9 行：
|
|
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"); |
|
第 11、14 和 15 行：使用 進一步瞭解如何透過 GPT 設定指定目標和大小。 |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
第 16 行： 如果使用網頁層級鍵/值來設定指定目標，所有廣告版位都會沿用這個目標。就如同版位層級鍵/值，您可以將多個值與同一個鍵建立關聯：( |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
第 17 行： |
|
| 18 | googletag.enableServices(); |
| 19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
|
第 23 行 (選用)： 如果您使用的是多重大小廣告代碼，建議您略過這一行 (否則該元素會在所選廣告素材顯示後採用其大小)；如果您選擇使用這一行，請將兩個尺寸都放大到能夠包含最大的合適廣告素材。但如果是單一大小廣告代碼，您可以使用這一行來展開容器元素到廣告素材載入為止，這樣其他網頁元素在該廣告素材顯示時才不會改變。 |
|
| 24 | <script> |
| 25 | googletag.cmd.push(function() { |
| 26 | googletag.display("div-gpt-ad-123456789-0"); |
| 27 | }); |
| 28 | </script> |
29 |
</div> |
30 |
<div id="div-gpt-ad-123456789-1"> |
31 |
<script> |
32 |
googletag.cmd.push(function() { |
|
第 8、25 和 32 行：函式呼叫加到非同步處理的命令佇列中，與網頁載入作業分開進行。 |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
第 9、12、23、26、30 和 33 行：我們是利用 儘管這裡使用的是隨機數字，GPT 卻不是以這種方式辨識每個廣告請求，而是透過 GPT 程式庫在背景進行辨識。此外，這些名稱在不同網頁上可以重複使用，只要相同網頁上的各個 div 名稱沒有重複就沒問題。 想進一步瞭解 Ad Manager 廣告空間結構、廣告單元階層，以及廣告單元如何沿用指定目標設定，請參閱廣告空間總覽。 |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
如果無法編輯網頁標頭
您不需要修改網頁的 <header> 也可以使用 GPT。
選項 1：內嵌 GPT
做法 1：使用內嵌廣告代碼 (而不是網頁的標頭) 來定義廣告單元在網頁的顯示位置。透過內嵌廣告代碼，即可將整個 GPT 廣告版位定義和請求 (包括載入 GPT 程式庫) 包含在一個 <script> 代碼中。
由於廣告代碼使用 GPT JavaScript 程式庫，您必須加入可載入程式庫的程式碼，才能加入廣告代碼程式碼。
這些內置 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>
內嵌廣告代碼範例
<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：將所有程式碼放在網頁內文中
使用傳統的 GPT 導入方式，但是將廣告版位定義放在 HTML 的內文，而非放在標頭。
系統必須先呼叫用來載入程式庫及定義廣告版位的程式碼，您才能為其請求廣告。由於此種程式碼在網頁上沒有分成標頭和內文兩段，而且您需要自行管理程式碼序列，因此這種做法更加複雜，但能讓您靈活運用 SRA。
建立不使用 JavaScript 的無標記請求
您可以使用無標記請求代替廣告代碼，請求在 Ad Manager 中投放的原始廣告素材程式碼。無標記請求通常在需要自訂剖析和顯示功能時使用，例如機上盒或其他沒有 Google 標記或 SDK 支援的環境。
