本文會說明使用須知並提供相關範例,協助您瞭解如何使用 Google 發布商廣告代碼 (GPT) 程式庫顯示插頁式 H5 遊戲廣告。插頁式遊戲廣告是由 GPT 管理的全螢幕廣告,必須透過手動觸發,才能在網頁上執行的遊戲中向使用者放送。
下列 GPT 事件可用來顯示插頁式遊戲廣告並進行互動:
活動 | 觸發時機 |
---|---|
|
插頁式遊戲廣告版位已可顯示。 如要顯示插頁式廣告,請對提供的事件物件呼叫 |
|
畫面上顯示的插頁式遊戲廣告版位現已關閉。用於在插頁式遊戲廣告關閉時執行自訂邏輯。 |
視遊戲的顯示方式而定,插頁式遊戲廣告可能會以全螢幕顯示,或是出現在遊戲頁框中。進一步瞭解 H5 遊戲廣告結構。
下方的程式碼範例假設 H5 遊戲直接置於與網頁相同的頂部頁框中 (採用「全螢幕」結構)。在這種情況下,插頁式廣告也會以全螢幕顯示。
不過,如果遊戲是置於子頁框 (採用「iFrame/WebView」結構) 中,也可以使用同一組程式碼。如要限制插頁式遊戲廣告只能在 H5 遊戲畫布內放送,請務必將遊戲放在 iFrame 中。
示例
<!doctype html>
<html>
<head>
<!-- The Google Publisher Tag here, if any, will only be responsible for serving ads outside of the H5 game. -->
<title>Page for this example H5 game</title>
<!-- Your <head> content here. -->
</head>
<body>
<span id="example-text">Example H5 game</span>
<iframe src="https://www.example-game.com" title="Example game" allow="autoplay">
<!-- Sample code is served here. The Google Publisher Tag loaded in this frame will only be used within the H5 game. -->
</iframe>
</body>
</html>
使用須知
- 為確保提供最佳的使用者體驗,GPT 只會在妥善支援插頁式遊戲廣告的網頁中,請求這類格式的廣告。因此,
defineOutOfPageSlot()
可能會傳回空值。請只在您想刊登插頁式廣告的網頁或環境中,發出插頁式遊戲廣告請求。插頁式遊戲廣告可在桌上型電腦、平板電腦和行動裝置上放送。 - 如果透過
makeGameManualInterstitialVisible
事件呼叫makeGameManualInterstitialVisible
,系統就會顯示插頁式廣告。 - 插頁式遊戲廣告設有固定的展示頻率上限,避免
gameManualInterstitialSlotReady
事件在 120 秒內觸發多次。
需求條件和建議
- 發布商不得在非遊戲廣告空間使用插頁式 H5 遊戲廣告。實作這類格式即表示發布商自動同意此條件,且必須遵守 Google 發布商政策和 Google Ad Manager 夥伴規範。
- Google 保留隨時核准或拒絕發布商的權利,並會將違規發布商從許可清單中移除。
- 插頁式遊戲廣告會產生專屬的廣告版位。與其他廣告類型不同,您不必為插頁式遊戲廣告定義 <div> 元素。這類廣告將自動建立,並在廣告供應時將本身容器插入網頁。
- 如果您是在擁有多個廣告版位的網頁上使用單一請求架構 (SRA),請勿在建立靜態廣告版位 div 前呼叫
display()
。如廣告最佳做法所述,系統會在您第一次呼叫display()
時要求在這之前定義的所有廣告版位。雖然插頁式遊戲廣告版位不必預先定義 <div>,但靜態廣告版位必須這麼做。如果在網頁顯示上述元素前呼叫display()
,可能會造成信號品質較低。因此,建議您延後發出第一次呼叫,直到靜態廣告版位定義完成。 - 如要投放手動插頁式廣告,必須採用與標準網站插頁式廣告相同的廣告單元和委刊項設定。
開始使用
- 標記
- 使用
googletag.defineOutOfPageSlot()
建立 GPT 版位,並將 OutOfPage 格式設為googletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL
。
請參閱 GPT 技術開發人員指南,瞭解插頁式 H5 遊戲廣告。 - 定義版位後,請新增事件監聽器,以便監聽
gameManualInterstitialSlotReady
事件。在事件監聽器回呼中,請針對所提供的事件物件呼叫makeGameManualInterstitialVisible()
方法,以便顯示廣告。 - 宣告所有其他靜態廣告版位後,呼叫
googletag.display
就會觸發填入插頁式遊戲廣告版位的請求。
- 使用
示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Game Manual Interstitial Ad Example</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
let gameManualInterstitialSlot;
googletag.cmd.push(function () {
// Define a game manual interstitial ad slot.
defineGameManualInterstitialSlot();
// Define static ad slots.
staticSlot = googletag.defineSlot(
'/6355419/Travel/Europe', [100, 100], 'static-ad-1')
.addService(googletag.pubads());
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
function defineGameManualInterstitialSlot() {
gameManualInterstitialSlot = googletag.defineOutOfPageSlot(
'/6355419/Travel/Europe/France/Paris',
googletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL);
// Slot returns null if the page or device does not support interstitials.
if (gameManualInterstitialSlot) {
gameManualInterstitialSlot.addService(googletag.pubads());
printStatus('Waiting for interstitial to be ready...');
// Add event listener to register click handler once interstitial loads.
// If this event doesn't fire, try clearing local storage and refreshing
// the page.
googletag.pubads().addEventListener('gameManualInterstitialSlotReady',
(slotReadyEvent) => {
if (gameManualInterstitialSlot === slotReadyEvent.slot) {
printStatus('Interstitial is ready.');
const button = document.getElementById('trigger');
button.style.display = 'block';
button.addEventListener('click', () => {
slotReadyEvent.makeGameManualInterstitialVisible();
printStatus('Interstitial is active.');
}, { once: true });
}
});
googletag.pubads().addEventListener('gameManualInterstitialSlotClosed',
resumeGame);
}
}
function resumeGame() {
document.getElementById('trigger').style.display = 'none';
// Game manual interstitial ad slots are one-time use, so destroy the
old slot and create a new one.
googletag.destroySlots([gameManualInterstitialSlot]);
defineGameManualInterstitialSlot();
googletag.display(gameManualInterstitialSlot);
}
function printStatus(status) {
document.getElementById('status').innerText = status;
}
</script>
<style>
button {
display: none;
}
div.content {
position: fixed;
top: 50%;
}
</style>
</head>
<body>
<div id="static-ad-1" style="width: 100px; height: 100px;"></div>
<div class="content">
<span id="status">Game manual interstitial is not supported on this page.</span>
<p>
<button id="trigger">TRIGGER INTERSTITIAL</button>
</p>
</div>
<script>
googletag.cmd.push(function () {
// Ensure the first call to display comes after static ad slot
// divs are defined.
googletag.display(staticSlot);
});
</script>
</body>
</html>
廣告投放
委刊項設定 | ||||
---|---|---|---|---|
用途 | 廣告類型 | 委刊項類型 | 預計使用的廣告素材 | 指定目標 > 廣告空間 |
放送預訂多媒體廣告 | 多媒體 |
|
320x480、300x250 或 336x280 |
先前步驟中建立或選取的廣告單元 |
放送非預訂廣告 | 多媒體 |
|
||
放送預訂影片廣告 (例如 VAST 代碼或 MP4) | 影片或音訊 |
|
300x250v 或 320x480v | |
放送候補/公開競價廣告 | 多媒體 | Ad Exchange | 所有請求的大小 |