展示 H5 游戏插页式广告

此示例使用 Google 发布商代码 (GPT) 库展示游戏插页式广告。游戏插页式广告是由 GPT 管理的全屏广告,可根据手动触发器向玩在线游戏的用户展示。如需详细了解游戏插页式广告,请参阅展示 H5 游戏插页式广告

如需展示游戏插页式广告以及与之互动,请使用以下 GPT 事件:

事件 触发时机…
GamingInterstitialSlotReady 游戏插页式广告已准备好向用户展示。

如需展示插页式广告,请对提供的事件对象调用 makeGameManualInterstitialVisible()
GamingInterstitialSlotClosed 用户关闭了之前展示的游戏插页式广告。

每当游戏插页式广告关闭时,请使用此事件运行自定义逻辑。

游戏结构

游戏插页式广告可以全屏展示,也可以在游戏框架内展示,具体取决于游戏的结构。如需了解详情,请参阅 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>

   
<!-- Sample code is served here. The Google Publisher Tag loaded in this frame will only be used within the H5 game. -->
   
<iframe src="https://www.example.com" title="Example game" allow="autoplay"></iframe>
 
</body>
</html>

使用说明

  • 为确保提供最佳用户体验,GPT 只会在正确支持游戏插页式广告格式的页面上请求此类广告。受此限制影响,defineOutOfPageSlot() 可能会返回 null。您必须检查是否存在这种情况,以确保不会执行任何不必要的工作。

  • 仅在您希望展示插页式广告的网页或环境中请求游戏插页式广告。游戏插页式广告可以在桌面设备、平板电脑和移动设备上投放。

  • 游戏插页式广告会生成自己的广告位。与其他广告类型不同,您不必为游戏插页式广告定义 <div>。当广告填充时,这些广告会自动创建自己的容器并将其插入网页中。

  • 游戏插页式广告是一次性的。您无法刷新游戏插页式广告位。而是必须销毁槽并重新创建它,如示例实现所示。

  • 游戏插页式广告具有固定的频次上限。该频次上限可防止 gamingInterstitialSlotReady 事件的触发频率高于每 120 秒一次。

  • 如果对包含多个广告位的网页使用了单一请求架构 (SRA),请勿在创建静态广告位 div 之前调用 display()广告最佳实践中所述,第一次调用 display() 时会请求在该时间点之前定义的每个广告位。虽然游戏插页式广告位不需要预定义的 <div>,但静态广告位需要。在这些元素呈现在页面上之前调用 display() 可能会导致信号质量较差。我们建议将初始调用延迟到定义静态槽后。

实现示例

查看演示