本文提供了一些说明和示例，演示了如何使用 Google 发布商代码 (GPT) 库展示游戏手动插页式广告。游戏手动插页式广告是由 GPT 管理的全屏广告，可通过手动触发器向用户展示。
以下 GPT 事件用于展示插页式广告以及与之互动：
| 事件 | 触发时机… |
|---|---|
|
|
游戏手动插页式广告位已可以展示。 若要展示插页式广告，请对提供的事件对象调用 |
游戏手动插页式广告可以全屏呈现，也可以在游戏框架内呈现，具体取决于游戏的显示方式。详细了解 H5 游戏广告结构。
以下示例代码假定 H5 游戏直接放置在与网页相同的顶部框架中（使用“全屏”结构）。如果是这种情况，手动插页式广告也会全屏呈现。
不过，当这段代码放置在子框架内时（使用“iFrame/WebView”结构），同样也适用。若要将手动插页式广告限制在 H5 游戏画布上，需要将游戏放置在 iframe 中。
示例
<!doctype html>
<html>
<head>
<!-- 此处的 Google 发布商代码（如果有）仅负责在 H5 游戏之外投放广告。-->
<title>此示例 H5 游戏的页面</title>
<!-- 在此处插入您的 <head> 内容。-->
</head>
<body>
<span id="example-text">H5 游戏示例</span>
<iframe src="https://www.example-game.com" title="示例游戏" allow="autoplay">
<!-- 在此处提供示例代码。在此框架中加载的 Google 发布商代码只会在 H5 游戏中使用。-->
</iframe>
</body>
</html>
使用说明
- 为确保提供最佳用户体验，GPT 只会在正确支持游戏手动插页式广告格式的页面上请求此类广告。因此，
defineOutOfPageSlot()可能会返回 null。您应检查是否存在这种情况，以确保不会执行任何不必要的工作。 - 仅在您希望展示插页式广告的网页或环境中请求手动插页式广告。游戏手动插页式广告可以在桌面设备、平板电脑和移动设备上投放。
- 插页式广告在您从
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>游戏手动插页式广告示例</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 () {
// 定义游戏手动插页式广告位。
defineGameManualInterstitialSlot();
// 定义静态广告位。
staticSlot = googletag.defineSlot(
'/6355419/Travel/Europe', [100, 100], 'static-ad-1')
.addService(googletag.pubads());
// 启用 SRA 和服务。
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
function defineGameManualInterstitialSlot() {
gameManualInterstitialSlot = googletag.defineOutOfPageSlot(
'/6355419/Travel/Europe/France/Paris',
googletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL);
// 如果网页或设备不支持插页式广告，广告位会返回 null。
if (gameManualInterstitialSlot) {
gameManualInterstitialSlot.addService(googletag.pubads());
printStatus('正在等待插页式广告准备就绪…');
// 添加事件监听器，以便在插页式广告加载后注册点击处理程序。
// 如果此事件未触发，请尝试清除本地存储空间并刷新
// 页面。
googletag.pubads().addEventListener('gameManualInterstitialSlotReady',
(slotReadyEvent) => {
if (gameManualInterstitialSlot === slotReadyEvent.slot) {
printStatus('插页式广告已就绪。');
const button = document.getElementById('trigger');
button.style.display = 'block';
button.addEventListener('click', () => {
slotReadyEvent.makeGameManualInterstitialVisible();
printStatus('插页式广告处于有效状态。');
}, { once: true });
}
});
googletag.pubads().addEventListener('gameManualInterstitialSlotClosed',
resumeGame);
}
}
function resumeGame() {
document.getElementById('trigger').style.display = 'none';
// 游戏手动插页式广告位是一次性的，因此销毁旧广告位并创建一个新广告位。
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">此页面不支持游戏手动插页式广告。</span>
<p>
<button id="trigger">触发插页式广告</button>
</p>
</div>
<script>
googletag.cmd.push(function () {
// 确保对展示广告的首次调用发生在定义静态广告位
// div 之后。
googletag.display(staticSlot);
});
</script>
</body>
</html>
