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> <script> googletag.cmd.push(() => { // Request and render an ad for the "banner-ad" slot. googletag.display("banner-ad"); }); </script> </body> </html>
載入 GPT 程式庫
將下列程式碼新增至 HTML 文件的
<head>
,即可載入 GPT 程式庫。這段程式碼會從 https://securepubads.g.doubleclick.net/tag/js/gpt.js 載入 GPT 程式庫。程式庫載入完成後,會處理
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"></script> <style></style> </head>
定義廣告版位
定義廣告版位並使用
googletag.enableServices()
方法初始化 GPT。此程式碼先確保 googletag 物件可供使用,然後將用於建構廣告版位的指令排入佇列,然後啟用 GPT。
這個範例中的廣告版位會從路徑
/6355419/Travel/Europe/France/Paris
指定的廣告單元載入大小為300x250
的廣告。廣告會顯示在頁面內文的<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"></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 與定義廣告版位時指定的 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 Manager 聯播網廣告空間的程式碼。
為您想要顯示的廣告單元產生廣告代碼。如要進一步瞭解如何產生廣告代碼,請前往 Ad Manager 說明中心。
複製「Document header」部分提供的廣告代碼程式碼,然後用來取代 HTML 文件
<head>
中的對應程式碼。<head> <meta charset="utf-8"> <title>Hello GPT</title> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></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
檔案,並在網路瀏覽器中開啟。