在入門及基本概念範例中,Google 發布商廣告代碼 (GPT) 程式庫的 display()
方法可用來註冊並顯示廣告版位。但是,有時候可能會需要個別或甚至能分隔這些動作,以便更精確地控制廣告素材載入的時間。例如,使用同意聲明管理平台,或在使用者操作時請求廣告內容時。
本指南將探討 GPT 提供的機制,以控制廣告內容的載入,並視需求擷取新的廣告內容。您可以在事件要求範例網頁上找到這個範例的完整程式碼。
控制廣告載入
根據預設,display()
方法的行為為登錄、請求及顯示廣告版位。您可以透過 PubAdsService.disableInitialLoad()
方法停用及自動顯示廣告內容。
初始載入停用時,對 display()
的呼叫只會註冊廣告版位。
您必須進行第二個操作,系統才會載入廣告內容。這可讓您精確掌控發出廣告請求的時間。
為避免意外提出廣告請求,您必須先啟用 disableInitialLoad()
,然後再啟用服務,然後再呼叫 display()
。
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Request GPT ads based on events." /> <title>Event-based ad requests</title> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(() => { // Define the ad slot. googletag .defineSlot("/6355419/Travel", [728, 90], "div-for-slot") .setTargeting("test", "event") .addService(googletag.pubads()); // Disable initial load. // This prevents GPT from automatically fetching ads when display is called. googletag.pubads().disableInitialLoad(); googletag.enableServices(); }); </script> <style></style> </head> <body> <div id="div-for-slot" style="width: 300px; height: 250px"></div> <script> googletag.cmd.push(() => { // Register the ad slot. // An ad will not be fetched until refresh is called. googletag.display("div-for-slot"); // Register click event handler. document.getElementById("showAdButton").addEventListener("click", () => { googletag.cmd.push(() => { googletag.pubads().refresh(); }); }); }); </script> </body> </html>
在此範例中,系統會停用初始載入,以確保不會呼叫任何廣告請求,也不會在呼叫 display()
時顯示廣告內容。這個廣告版位已準備好接受並顯示廣告,但必須等到版位重新整理後,才會開始發送廣告請求。
重新整理
PubAdsService.refresh()
方法將新的廣告版位填入版位或版位。這個方法可用於在尚未載入任何內容 (因為 disableInitialLoad()
之外) 或取代已填入運算單元的內容。不過,只有透過呼叫 display()
註冊的運算單元才會重新整理。
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Request GPT ads based on events." /> <title>Event-based ad requests</title> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(() => { // Define the ad slot. googletag .defineSlot("/6355419/Travel", [728, 90], "div-for-slot") .setTargeting("test", "event") .addService(googletag.pubads()); // Disable initial load. // This prevents GPT from automatically fetching ads when display is called. googletag.pubads().disableInitialLoad(); googletag.enableServices(); }); </script> <style></style> </head> <body> <div id="div-for-slot" style="width: 300px; height: 250px"></div> <button id="showAdButton">Show/Refresh Ad</button> <script> googletag.cmd.push(() => { // Register the ad slot. // An ad will not be fetched until refresh is called. googletag.display("div-for-slot"); // Register click event handler. document.getElementById("showAdButton").addEventListener("click", () => { googletag.cmd.push(() => { googletag.pubads().refresh(); }); }); }); </script> </body> </html>
在這個經過修改的範例中,當使用者按一下 [顯示/重新整理廣告] 按鈕時,系統就會呼叫 refresh()
方法。這會觸發一項要求,以擷取新的廣告內容並載入已註冊的版位,並覆寫任何現有的內容。
請注意,在上述範例中,呼叫參數時不會使用參數呼叫 refresh()
方法,這會導致重新整理「所有」已註冊的廣告版位。但是,您也可以將特定版位陣列傳遞至 refresh()
方法,以重新整理特定廣告版位。如需範例,請參閱重新整理廣告版位範例。
最佳做法
使用 refresh()
時,建議遵循一些最佳做法。
不要太快重新整理。
如果廣告版位的重新整理速度太快,可能會導致廣告請求受到限制。 為避免這種情況發生,請避免每 30 秒重新整理一次。
不要不必要的
clear()
呼叫重新整理廣告版位時,請勿先呼叫
PubAdsService.clear()
。這並非必要,因為refresh()
會取代指定版位的內容,不論先前是否已載入任何廣告內容。在呼叫refresh()
之前立即呼叫clear()
,只會增加使用者看到空白運算單元的時間。僅重新整理可視廣告版位
使用
refresh()
取代從未可見的廣告版位內容,可能會大幅降低 ActiveView 的比率。Impression 視 Event 可用於判斷廣告版位可見的時間,如下方範例所示。googletag.cmd.push(function() { var REFRESH_KEY = 'refresh'; var REFRESH_VALUE = 'true'; googletag.defineSlot('/6355419/Travel',[728, 90], 'div-for-slot') .setTargeting(REFRESH_KEY, REFRESH_VALUE) .setTargeting('test', 'event') .addService(googletag.pubads()); // Number of seconds to wait after the slot becomes viewable. var SECONDS_TO_WAIT_AFTER_VIEWABILITY = 60; googletag.pubads().addEventListener('impressionViewable', function(event) { var slot = event.slot; if (slot.getTargeting(REFRESH_KEY).indexOf(REFRESH_VALUE) > -1) { setTimeout(function() { googletag.pubads().refresh([slot]); }, SECONDS_TO_WAIT_AFTER_VIEWABILITY * 1000); } }); googletag.enableServices(); });