Google 發布商廣告代碼 (GPT) 是 Google Ad Manager
您可以運用 GPT 動態建構廣告請求。 GPT 採用廣告單元程式碼、廣告大小 自訂指定目標、建立請求,並在網頁中顯示廣告。
如要進一步瞭解 GPT Ad Manager 說明中心。
以下列舉幾個有助您開始使用 GPT 的範例。如果 如需更多 GPT 方面的協助,請參閱支援 選項。
顯示測試廣告
以下範例會逐步引導您建立 使用 GPT 從 Google 的測試聯播網載入一般廣告。
如需這個範例的完整程式碼,請參閱 顯示測試廣告範例網頁。
建立基本 HTML 文件
在文字編輯器中,建立名為
hello-gpt.html
的基本 HTML 文件。<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Display a fixed-sized test ad." /> <title>Display a test ad</title> <style></style> </head> <body> </body> </html>
載入 GPT 程式庫
將下列程式碼加進 第
<head>
頁。這段程式碼會從 https://securepubads.g.doubleclick.net/tag/js/gpt.js.程式庫 容器完全載入後,就會處理
googletag
物件。<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Display a fixed-sized test ad." /> <title>Display a test ad</title> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" ></script> <style></style> </head>
定義廣告版位
定義廣告版位,並使用
googletag.enableServices()
方法,增加圍繞地圖邊緣的邊框間距。這段程式碼可確保 googletag 物件可供使用,然後將 這項指令就能建構廣告版位 並啟用 GPT
本例中的廣告版位會從廣告載入
300x250
大小的廣告 由路徑/6355419/Travel/Europe/France/Paris
指定的單位。廣告 顯示在網頁內文的<div id="banner-ad">
元素中 設定下一個字元<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Display a fixed-sized test ad." /> <title>Display a test ad</title> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" ></script> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(() => { // Define an ad slot for div with id "banner-ad". googletag .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "banner-ad") .addService(googletag.pubads()); // Enable the PubAdsService. googletag.enableServices(); }); </script> <style></style> </head>
指定廣告顯示位置
將下列程式碼加進 改為附加 HTML 文件的
<body>
。請注意,此
<div>
的 ID 與定義 廣告版位。<body> <div id="banner-ad" style="width: 300px; height: 250px"></div> <script> googletag.cmd.push(() => { // Request and render an ad for the "banner-ad" slot. googletag.display("banner-ad"); }); </script> </body>
預覽測試頁面
儲存
hello-gpt.html
檔案,然後在網路瀏覽器中開啟。載入完成後 該網頁的內文會顯示測試廣告。
顯示您自己的廣告
如要顯示自己的廣告,請使用「顯示測試」中的 hello-gpt.html
檔案
ad,然後將標頭中的程式碼替換成指定
您自己 Ad Manager 聯播網的廣告空間
為想要顯示的廣告單元產生廣告代碼。進一步瞭解 產生廣告代碼的方式 Ad Manager 說明中心。
複製「文件標頭」部分中提供的廣告代碼程式碼,並直接使用該程式碼 取代 HTML 文件
<head>
中的對應程式碼。<head> <meta charset="utf-8"> <title>Hello GPT</title> <script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></script> <script> window.googletag = window.googletag || {cmd: []}; googletag.cmd.push(function() { googletag .defineSlot("ad-unit-path", [width, height], "div-id") .addService(googletag.pubads()); googletag.enableServices(); }); </script> </head>
儲存更新後的
hello-gpt.html
檔案,然後在網路瀏覽器中開啟。