本文會說明使用須知並提供相關範例，協助您瞭解如何使用 Google 發布商廣告代碼 (GPT) 程式庫顯示手動插頁式遊戲廣告。手動插頁式遊戲廣告是以 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()可能會傳回空值。建議您檢查是否發生這個情況，確定並未執行不必要的作業。 - 請只在您想刊登插頁式廣告的網頁或環境中，發出手動插頁式遊戲廣告請求。手動插頁式遊戲廣告可在電腦、筆電和行動裝置上放送。
- 如果透過
GameManualInterstitialSlotReady事件呼叫makeGameManualInterstitialVisible，系統就會顯示插頁式廣告。 - 手動插頁式遊戲廣告設有固定的展示頻率上限，避免
gameManualInterstitialSlotReady事件在 120 秒內觸發多次。
需求條件和建議
- 手動插頁式遊戲廣告會產生專屬的廣告版位。與其他廣告類型不同的是，您不必為手動插頁式遊戲廣告定義
<div>。廣告放送時，這類廣告將自動建立，並在插入專屬容器後於頁面顯示。 - 如果您是在擁有多個廣告版位的網頁上使用單一請求架構 (SRA)，請勿在建立靜態廣告版位 div 前呼叫
display()。如廣告最佳做法所述，系統會在您第一次呼叫display()時要求在這之前定義的所有廣告版位。雖然手動插頁式遊戲廣告版位不必預先定義<div>，但靜態廣告版位必須這麼做。如果在網頁顯示上述元素前呼叫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>
