將 Google 發布商廣告代碼 (GPT) 程式庫整合至網站,並熟悉一般最佳做法後,即可開始發出廣告請求。在以下各節中,我們將介紹一些設定及使用廣告版位時應留意的其他最佳做法,協助您充分利用廣告空間,同時盡可能減少對效能的影響。
優先載入「重要」廣告版位
廣告版位各有不同,舉例來說,就可視度和營利而言,網頁載入後立即顯示的版位 (不需捲動位置) 通常比捲動後才顯示的版位 (需捲動位置) 更「重要」。因此,請務必仔細考量網頁上每個廣告版位的相對重要性,並優先載入最重要的版位。
提早載入不需捲動位置的廣告
網頁載入後立即顯示的廣告應優先載入。建議您在文件的 <head> 中定義這些版位,並在載入網頁程序中盡早請求。這有助於確保這些廣告提早載入 (盡可能提高可視度),且不會不必要地拖慢初始載入網頁速度。
延遲載入需捲動位置的廣告
如果廣告需要捲動才能進入可視區域,則應延遲擷取和算繪,直到廣告版位即將進入可視區域。這個程序稱為延遲載入。延遲載入會分別優先請求及算繪最有可能被瀏覽的版位廣告素材內容。這有助於節省瀏覽器的有限資源,進而提升網頁載入效能,在頻寬和 CPU 經常受到嚴重限制的行動環境中,這點尤其重要。
重新整理廣告,不需重新整理網頁
在許多情況下,最好或甚至必須替換版位目前的廣告素材。在這種情況下,建議使用 GPT 程式庫的重新整理功能,動態載入廣告。這樣可以避免重新整理整個網頁,並精確控制更新版位或版位群組的條件。
重新整理廣告版位時,請務必熟悉並遵守refresh()最佳做法。不當重新整理廣告可能會導致效能問題,並對可視率造成負面影響。
有效指定廣告目標
設定鍵/值指定目標時,請仔細考慮要使用版位層級還是網頁層級指定目標。如果是多個版位共用的鍵/值,最有效的方法是使用 googletag.setConfig({ targeting: ... }) 進行網頁層級指定。只有在註冊不同或未包含在所有版位的鍵/值時,才應使用版位層級指定目標。
請注意,您可以同時使用版位和網頁層級指定目標,如設定指定目標範例所示。強烈建議您先在網頁層級設定指定目標,然後僅在必要時套用版位層級覆寫。這種做法不僅能有效運用 GPT API,還能簡化程式碼,並有助於維持網頁上所有指定目標設定的清晰心智模型。
正確使用單一請求架構
單一請求架構 (SRA) 是一種 GPT 請求模式,可將多個廣告版位的請求,組合成單一廣告請求。這樣一來,系統就會遵循為網頁設定的競爭排除和路障。因此,如果您的網頁使用這些功能,建議您啟用 SRA 並瞭解如何正確使用。
在預設設定中,SRA 會在您首次呼叫 display() (或 refresh(),如果初始載入已停用) 時,要求網頁上定義的所有廣告版位。因此,建議您在首次呼叫 display() 之前,先在文件的 <head> 中定義網頁的所有廣告版位。延遲載入可與這個方法搭配使用,確保位於不需捲動位置下方的版位不會立即載入。
使用 SRA 時,請務必先完整設定所有廣告版位 (例如設定指定目標、排除類別等),再首次呼叫 display()。只有在此之前設定的值,才會包含在初始 SRA 請求中。
不正確:單一請求架構請求中未包含廣告版位設定
<html>
<head>
<meta charset="utf-8">
<title>Single Request Architecture Example</title>
<script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></script>
<script>
window.googletag = window.googletag || {cmd: []};
var adSlot1, adSlot2;
googletag.cmd.push(function() {
// Define ad slot 1.
adSlot1 = googletag
.defineSlot('/6355419/Travel/Europe/France',[728, 90], 'banner-ad-1')
.addService(googletag.pubads());
// Define ad slot 2.
adSlot2 = googletag
.defineSlot('/6355419/Travel/Europe/France',[728, 90], 'banner-ad-2')
.addService(googletag.pubads());
// Enable SRA and services.
googletag.setConfig({ singleRequest: true });
googletag.enableServices();
});
</script>
</head>
<body>
<div id="banner-ad-1" style="width: 728px; height: 90px;">
<script>
googletag.cmd.push(function() {
// This call to display requests both ad slots.
googletag.display(adSlot1);
});
</script>
</div>
<div id="banner-ad-2" style="width: 728px; height: 90px;">
<script>
googletag.cmd.push(function() {
// This call to display has no effect, since both ad slots have already
// been fetched by the previous call to display.
// Targeting configuration for ad slot 2 is ignored.
adSlot2.setConfig({ targeting: { test: 'privacy' } });
googletag.display(adSlot2);
});
</script>
</div>
</body>
</html>
正確:SRA 請求中包含廣告版位設定
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Single Request Architecture Example</title>
<script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></script>
<script>
window.googletag = window.googletag || {cmd: []};
var adSlot1, adSlot2;
googletag.cmd.push(function() {
// Define ad slot 1.
adSlot1 = googletag
.defineSlot('/6355419/Travel/Europe/France',[728, 90], 'banner-ad-1')
.addService(googletag.pubads());
// Define and configure ad slot 2.
adSlot2 = googletag
.defineSlot('/6355419/Travel/Europe/France',[728, 90], 'banner-ad-2')
.addService(googletag.pubads());
adSlot2.setConfig({ targeting: { test: 'privacy' } });
// Enable SRA and services.
googletag.setConfig({ singleRequest: true });
googletag.enableServices();
});
</script>
</head>
<body>
<div id="banner-ad-1" style="width: 728px; height: 90px;"></div>
<div id="banner-ad-2" style="width: 728px; height: 90px;"></div>
<script>
googletag.cmd.push(function() {
// This call to display requests both ad slots with all
// configured targeting.
googletag.display(adSlot1);
});
</script>
</body>
</html>
最佳化廣告大小
定義廣告版位時,除了考量可放送的廣告大小上限,也應考慮能輕鬆放入相同空間的小型廣告。一般來說,定義版位時指定的大小越多,可放送的廣告就越多。這樣就能提高供應率,進而增加收益。