展示 H5 游戏手动插页式广告

游戏手动插页式广告是一种仅供小范围使用的格式。您可以向 h5support@google.com 发送电子邮件以获取使用权限。

本文提供了一些说明和示例,演示了如何使用 Google 发布商代码 (GPT) 库展示游戏手动插页式广告。游戏手动插页式广告是由 GPT 管理的全屏广告,可通过手动触发器向用户展示。

以下 GPT 事件用于展示插页式广告以及与之互动:

事件 触发时机…

GameManualInterstitialSlotReady

游戏手动插页式广告位已可以展示。

若要展示插页式广告,请对提供的事件对象调用 makeGameManualInterstitialVisible()

游戏手动插页式广告可以全屏呈现,也可以在游戏框架内呈现,具体取决于游戏的显示方式。详细了解 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 秒触发多次。
您可以使用 Chrome 开发者工具的移动设备模拟工具,从桌面环境测试游戏手动插页式广告在移动设备上的表现。

要求和建议

  • 游戏手动插页式广告会生成自己的广告位。与其他广告类型不同,您无需为游戏手动插页式广告定义 <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>

该内容对您有帮助吗?

您有什么改进建议?
true
版本说明

获悉最新的 Ad Manager 功能和帮助中心更新。

了解新变化

搜索
清除搜索内容
关闭搜索框
主菜单
10239327687752704545
true
搜索支持中心
true
true
true
true
true
148
false
false