本文提供了一些说明和示例，展示了如何使用 Google 发布商代码 (GPT) 库展示 H5 游戏插页式广告。游戏插页式广告是由 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="Example game" allow="autoplay">
<!-- 示例代码在此处调用。在此框架中加载的 Google 发布商代码将仅在 H5 游戏中使用。-->
</iframe>
</body>
</html>
使用说明
- 为确保提供最佳用户体验，GPT 只会在正确支持游戏插页式广告格式的页面上请求此类广告。因此，
defineOutOfPageSlot()可能会返回 null。仅在您希望展示插页式广告的网页或环境中请求游戏插页式广告。游戏插页式广告可以在桌面设备、平板电脑和移动设备上投放。 - 插页式广告在您从
makeGameManualInterstitialVisible事件调用makeGameManualInterstitialVisible时展示。 - 游戏插页式广告具有固定的频次上限。这可防止
gameManualInterstitialSlotReady事件的触发频率高于每 120 秒一次。
要求和建议
- 发布商不得在非游戏广告资源中使用 H5 游戏插页式广告。植入这种格式的广告即表示，发布商自动同意此条件。发布商还应遵守《Google 发布商政策》和《Google Ad Manager 合作伙伴指南》。
- Google 保留随时批准或拒绝发布商的权利，如发现发布商有违规行为，随后会将其移出许可名单。
- 游戏插页式广告会生成自己的广告位。与其他广告类型不同，不必为游戏插页式广告定义 <div> 元素。当广告填充时，这些广告会自动创建自己的容器并将其插入网页中。
- 如果对包含多个广告位的网页使用了单一请求架构 (SRA)，请勿在创建静态广告位 div 之前调用
display()。如广告最佳实践中所述，第一次调用display()时会请求在该时间点之前定义的每个广告位。虽然游戏插页式广告位不需要预定义的 <div>，但静态广告位需要。在这些元素呈现在页面上之前调用display()可能会导致信号质量较差，因此建议您将初始调用延后到定义静态广告位之后。 - 若要对手动插页式广告进行投放管理，广告单元和订单项设置需要与标准网站插页式广告的设置相同。
开始使用
- 添加代码
- 使用
googletag.defineOutOfPageSlot()创建一个 GPT 广告位，并将“页外广告格式”设置为googletag.defineOutOfPageSlot()。
请参阅 适用于 H5 游戏插页式广告的 GPT 技术开发者指南。 - 定义广告位后，添加一个用于监听
gameManualInterstitialSlotReady事件的事件监听器。在事件监听器回调中，对提供的事件对象调用makeGameManualInterstitialVisible()方法以展示广告。 - 声明所有其他静态广告位后，调用
googletag.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>
广告投放管理
| 订单项设置 | ||||
|---|---|---|---|---|
| 用例 | 广告类型 | 订单项类型 | 预期的广告素材 | 定位 > 广告资源 |
| 投放预订型展示广告 | 展示广告 |
|
320x480、300x250 或 336x280 |
在前一步中创建或选择的广告单元 |
| 投放非预订型广告 | 展示广告 |
|
||
| 投放预订型视频广告（例如 VAST 代码或 MP4） | 视频或音频 |
|
300x250v 或 320x480v | |
| 投放补余广告/公开竞价广告 | 展示广告 | Ad Exchange | 请求中包含的所有尺寸 | |