H5 ゲームのインタースティシャル広告を表示する

この例では、Google パブリッシャー タグ(GPT)ライブラリを使用してゲームのインタースティシャル広告を表示します。ゲーム インタースティシャルは、手動のトリガーに基づいてウェブベースのゲームをプレイしているユーザーに表示される、GPT 管理の全画面広告です。ゲーム インタースティシャルについて詳しくは、H5 ゲームのインタースティシャル広告を表示するをご覧ください。

ゲーム インタースティシャル広告を表示して操作するには、次の GPT イベントを使用します。

イベント トリガーのタイミング
GamingInterstitialSlotReady ゲーム インタースティシャル広告をユーザーに表示する準備が整いました。

インタースティシャル広告を表示するには、指定されたイベント オブジェクトで makeGameManualInterstitialVisible() を呼び出します。
GamingInterstitialSlotClosed ユーザーが、以前に表示されたゲーム インタースティシャル広告を閉じました。

このイベントは、ゲーム インタースティシャルが閉じられた際にカスタム ロジックを実行する場合に使用します。

ゲームの構造

ゲーム インタースティシャル広告は、ゲームの構造に応じて、全画面またはゲームのフレーム内に表示できます。詳しくは、H5 ゲームの構造をご覧ください。

サンプル実装では、H5 ゲームが Fullscreen 構造を使用して最上位のウィンドウに直接レンダリングされることを前提としています。このシナリオでは、ゲーム インタースティシャル広告も全画面表示でレンダリングされます。

ただし、このコードは、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> を定義する必要はありません。これらの広告では、広告が掲載時に自動的に作成され、独自のコンテナがページに挿入されます。

  • ゲーム インタースティシャル広告は 1 回限りの使用です。ゲーム インタースティシャル広告スロットは更新できません。代わりに、サンプル実装に示すように、スロットを破棄して再作成する必要があります。

  • ゲーム インタースティシャル広告には一定のフリークエンシー キャップが設定されます。フリークエンシー キャップにより、gamingInterstitialSlotReady イベントが 120 秒ごとに 2 回以上呼び出されないようにします。

  • 複数のスロットがあるページでシングル リクエスト アーキテクチャ(SRA)を使用する場合は、静的広告スロットの DIV が作成されるまで display() を呼び出さないようにします。広告のベスト プラクティスで説明されているように、display() の最初の呼び出しでは、それまでに定義されたすべての広告スロットがリクエストされます。ゲーム インタースティシャル スロットでは事前定義された <div> は不要ですが、静的広告スロットでは必要です。ページにあるこれらの要素より前に display() を呼び出すと、シグナルの品質が低下する可能性があります。静的スロットが定義されるまで、最初の呼び出しを遅らせることをおすすめします。

実装例

デモを見る