この記事では、Google パブリッシャー タグ（GPT）ライブラリを使用してゲームの手動インタースティシャル広告を表示する際の注意事項と例を示します。ゲームの手動インタースティシャルは、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="サンプルゲーム" allow="autoplay">
<!-- サンプルコードはこちらに表示されます。このフレームで読み込まれた Google パブリッシャー タグは、H5 ゲーム内でのみ使用されます。-->
</iframe>
</body>
</html>
使用上の注意
- 最適なユーザー エクスペリエンスを実現するため、GPT ではこのフォーマットを適切にサポートしているページでのみ、ゲームの手動インタースティシャル広告をリクエストします。このため、
defOutOfPageSlot()が null を返すことがあります。このケースを確認して、不要な作業を行っていないことを確認する必要があります。 - インタースティシャル広告を表示したいページや環境でのみ、ゲームの手動インタースティシャル広告をリクエストします。ゲームの手動インタースティシャル広告は、パソコン、タブレット、モバイル デバイスに配信できます。
- インタースティシャルは、
GameManualInterstitialSlotReadyイベントからmakeGameManualInterstitialvisibleを呼び出した場合に表示されます。 - ゲームの手動インタースティシャル広告では、フリークエンシー キャップは固定されています。これにより、
gameManualInterstitialSlotReadyイベントが 120 秒に 1 回以上発生しなくなります。
要件と推奨事項
- ゲームの手動インタースティシャル広告では、独自の広告スロットが生成されます。他の広告タイプとは異なり、ゲームの手動インタースティシャル広告では
<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';
// ゲームの手動インタースティシャル広告スロットは 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>
