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

ゲームインタースティシャル広告は、アクセス制限のあるフォーマットです。アクセス権を取得するには、h5support@google.com 宛てにメールを送信してください。

この記事では、Google パブリッシャータグ（GPT）ライブラリを使用して H5 ゲームのインタースティシャル広告を表示する方法に関する注意事項と例を説明します。ゲームインタースティシャルは、ウェブページで実行されるゲームで手動のトリガーによってユーザーに表示される、GPT 管理の全画面広告です。

ゲームインタースティシャル広告の表示と操作には、次の GPT イベントが使用されます。

イベントトリガーのタイミング

イベント	トリガーのタイミング
`GameManualInterstitialSlotReady`	ゲームインタースティシャル広告スロットを表示する準備ができている場合。インタースティシャルを表示するには、指定されたイベントオブジェクトで `makeGameManualInterstitialVisible()` を呼び出します。
`GameManualInterstitialSlotClosed`	表示されていたゲームインタースティシャル広告スロットが現在閉じられている場合。ゲームインタースティシャルが閉じられている際にカスタムロジックを実行する場合に使用します。

GameManualInterstitialSlotReady

ゲームインタースティシャル広告スロットを表示する準備ができている場合。

インタースティシャルを表示するには、指定されたイベントオブジェクトで makeGameManualInterstitialVisible() を呼び出します。

GameManualInterstitialSlotClosed

表示されていたゲームインタースティシャル広告スロットが現在閉じられている場合。ゲームインタースティシャルが閉じられている際にカスタムロジックを実行する場合に使用します。

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

次のサンプルコードでは、H5 ゲームが（「全画面表示」構造を使用して）ページと同じトップフレームに直接配置されていることを想定しています。その場合は、ゲームインタースティシャル広告も全画面表示でレンダリングされます。

ただし、このコードは、（「iframe / WebView」構造を使用して）子フレーム内に配置された場合も機能します。ゲームインタースティシャル広告の表示を H5 ゲームキャンバスに制限するには、ゲームが iframe に配置されている必要があります。

例

<!doctype html>

<html>

<head>

<title>このサンプル H5 ゲームのページ</title>

</head>

<body>

<span id="example-text">サンプル H5 ゲーム</span>

<iframe src="https://www.example-game.com" title="Example game" allow="autoplay">

</iframe>

</body>

</html>

使用上の注意

最適なユーザーエクスペリエンスを実現するため、GPT ではこのフォーマットを適切にサポートしているページでのみ、ゲームインタースティシャル広告をリクエストします。このため、defineOutOfPageSlot() は null を返す可能性があります。インタースティシャルを表示したいページや環境でのみ、ゲームインタースティシャル広告をリクエストします。ゲームインタースティシャル広告は、パソコン、タブレット、モバイルデバイスに配信できます。
インタースティシャルは、makeGameManualInterstitialVisibleから makeGameManualInterstitialVisible を呼び出した場合に表示されます。
ゲームインタースティシャル広告には一定のフリークエンシーキャップが設定されます。これは、gameManualInterstitialSlotReady イベントが 30 秒ごとに 2 回以上呼び出されないようにするためです。

Chrome デベロッパーツールのモバイルシミュレーションを使用すると、デスクトップ環境からモバイルでのゲームインタースティシャル広告をテストできます。

要件と推奨事項

ゲーム以外の広告枠で 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	上述の手順で作成または選択した広告ユニット
予約以外の広告を配信する	ディスプレイ	価格優先ネットワークバルク	300×250、728×90、468×60
予約動画広告（VAST タグや MP4 など）を配信する	動画またはオーディオ	スポンサーシップ標準	300×250v または 320×480v
バックフィル / 公開オークションの広告を配信する	ディスプレイ	Ad Exchange	リクエストされたすべてのサイズ

注: ディスプレイと動画のデマンドをバックフィル / 公開オークションの対象にするには、広告ユニットで [ディスプレイ広告をブロック] または [インストリーム以外の動画広告をブロック] の保護設定が無効になっていることを確認します。

レポート

ゲームインタースティシャルフォーマットは、「広告在庫のフォーマット」ディメンションに「インタースティシャル」として表示されます。

フィードバックを送信するセクションを選択してください

この情報は役に立ちましたか？

改善できる点がありましたらお聞かせください。

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

例

使用上の注意

要件と推奨事項

設定方法

例

入稿

レポート

この情報は役に立ちましたか？

さらにサポートが必要な場合

次の手順をお試しください。

この選択肢を報告する理由を選択してください

追加情報や提案を共有する