この記事では、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 秒ごとに 2 回以上呼び出されないようにするためです。
要件と推奨事項
- ゲーム以外の広告枠で H5 ゲームのインタースティシャルを使用することは認められません。パブリッシャー様はこのフォーマットを実装することで、自動的にこの条件に同意したものと見なされます。Google パブリッシャー向けポリシーと Google アド マネージャー パートナー ガイドラインも遵守していただく必要があります。
- Google は、パブリッシャー様を承認または不承認とする権利を常に有しており、違反が判明したパブリッシャー様は許可リストから除外されます。
- ゲーム インタースティシャル広告では、独自の広告スロットが生成されます。他の広告タイプとは異なり、ゲーム インタースティシャル広告では <div> 要素を定義する必要がありません。これらの広告では、広告が掲載時に自動的に作成され、独自のコンテナがページに挿入されます。
- 複数のスロットがあるページでシングル リクエスト アーキテクチャ（SRA）を使用する場合は、静的広告スロットの div が作成されるまで
display()を呼び出さないようにします。広告のベスト プラクティスで説明されているように、display()の最初の呼び出しでは、それまでに定義されたすべての広告スロットがリクエストされます。ゲーム インタースティシャル スロットでは事前定義された <div> は不要ですが、静的広告スロットでは必要です。ページにあるこれらの要素より前にdisplay()を呼び出すと、シグナルの品質が低下する可能性があるため、静的スロットが定義されるまで最初の呼び出しを遅らせることをおすすめします。 - 手動インタースティシャルを入稿するには、広告ユニットと広告申込情報の設定を標準のウェブ インタースティシャルと同じものにする必要があります。
設定方法
- タグ設定
googletag.defineOutOfPageSlot()を使用して GPT スロットを作成し、OutOfPage Format をgoogletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIALに設定します。
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';
// ゲームの手動インタースティシャル広告スロットは 1 回限りの使用であるため、古いスロットを削除して新しいスロットを作成します。
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>
入稿
- 新しい広告ユニットを作成するか、既存の広告ユニットを再利用します。広告ユニットのサイズとして 320×480、300×250、336×280 を選択します。
- 広告申込情報を作成します。ユースケースに応じて、適切な広告申込情報の設定を選択します。
| 広告申込情報の設定 | ||||
|---|---|---|---|---|
| ユースケース | 広告タイプ | 広告申込情報タイプ | 想定されるクリエイティブ | [ターゲティング] > [広告枠] |
| 予約ディスプレイ広告を配信する | ディスプレイ |
|
300×250、728×90、468×60 |
上述の手順で作成または選択した広告ユニット |
| 予約以外の広告を配信する | ディスプレイ |
|
||
| 予約動画広告（VAST タグや MP4 など）を配信する | 動画またはオーディオ |
|
300×250v または 320×480v | |
| バックフィル / 公開オークションの広告を配信する | ディスプレイ | Ad Exchange | リクエストされたすべてのサイズ | |