ページ内 HTML 広告スロットを動画広告スロットまたはオーバーレイ広告スロットと関連付けることができます。関連付けられた広告スロット間のこの関係は、マスターとコンパニオンの関係と呼ばれます。
動画マスター広告とオーバーレイ マスター広告をリクエストするだけでなく、IMA SDK を使用してコンパニオン HTML 広告を表示することもできます。これらの広告は HTML 環境内で表示されます。
コンパニオン広告を使用する
コンパニオン広告を使用する手順は次のとおりです。
1. コンパニオン広告を予約する
マスター広告とともに表示するコンパニオン広告をまず予約する必要があります。コンパニオン広告は、 アド マネージャーで入稿できます。マスター広告ごとに最大 6 つのコンパニオン広告を配信できます。1 人の購入者がページ上のすべての広告を管理するこの手法は、ロードブロッキングとも呼ばれます。
2. コンパニオン広告をリクエストする
デフォルトでは、コンパニオン広告は各広告リクエストで有効になっています。
3. コンパニオン ディスプレイ広告を表示する
コンパニオン広告をレンダリングする方法は 2 つあります。
- Google パブリッシャー タグ（GPT）を使用した自動表示
GPT を使用してコンパニオン広告を実装している場合、HTML ページにコンパニオン広告スロットが宣言され、これらの広告が API に登録されている限り（つまり、JavaScript と HTML の div ID が一致している必要があります）、コンパニオン広告は自動的に表示されます。GPT を使用するメリットは次のとおりです。- コンパニオン スロットの検出
- VAST レスポンスに含まれるコンパニオン広告の数が、HTML ページで定義されているスロットよりも少ない場合は、パブリッシャーのネットワークからコンパニオン バックフィルを行うことができます。
- 動画広告がない場合にコンパニオンを自動入力する
- Click-to-Play 動画プレーヤー用にプリロードされたコンパニオン広告スロット
HTMLResourceとiFrameResourceを含むコンパニオン レンダリングの自動化
- Ad API を使用した手動
Google パブリッシャー タグでコンパニオン広告を使用する
Google パブリッシャー タグ（GPT）を使用すると、サイトに HTML コンパニオン広告を自動的に表示できます。ほとんどのパブリッシャー様には GPT の使用をおすすめします。HTML5 SDK は、GPT がメインのウェブページ（IFrame 内ではない）に読み込まれている場合に GPT スロットを認識します。IMA SDK で GPT を使用する方法について詳しくは、GPT のドキュメントをご覧ください。
HTML5 SDK を IFrame 内にホストする場合
次の両方の条件を満たしている場合、GPT コンパニオンを正しく表示するには、追加のプロキシ スクリプトを含める必要があります。
- HTML5 SDK を IFrame に読み込みます。
- メインのウェブページ（IFrame の外部）に GPT を読み込みます。
このシナリオでコンパニオンを表示するには、SDK を読み込む前に GPT プロキシ スクリプトを読み込む必要があります。
<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>
注意事項:
- SDK を読み込む IFrame 内に GPT が読み込まれてはなりません。
- GPT は、別の IFrame ではなく、トップページに読み込む必要があります。
- プロキシ スクリプトは、GPT と同じフレーム（メインページ）に読み込む必要があります。
HTML でコンパニオン広告スロットを宣言する
このセクションでは、GPT を使用して HTML でコンパニオン広告を宣言する方法について説明します。また、さまざまなシナリオのサンプルコードも示します。HTML5 SDK の場合は、HTML ページに JavaScript を追加して、コンパニオン広告スロットを宣言する必要があります。
注: 以下の各例では、googletag.defineSlot メソッド呼び出しで有効な network と unit-path を指定してください（使用している実際の例に応じて、<head> タグまたは <body> タグに指定します）。
例 1: 基本的な広告スロットの実装
次のサンプルコードは、HTML ページに gpt.js ファイルを含めて広告スロットを宣言する方法を示しています。宣言された広告スロットは 728x90 ピクセルです。GPT は、このサイズに一致するコンパニオン広告が VAST レスポンスで返された場合は、その広告でスロットを埋めようとします。広告スロットが宣言されると、googletag.display() 関数はページ上のどこで呼び出されても、その広告スロットをレンダリングできます。これらのスロットはコンパニオン スロットであるため、広告はすぐには表示されません。代わりに、マスター動画広告の横に表示されます。
実装例を次に示します。
<html> <head> <!-- Uncomment the line below for the HTML5 SDK caveat proxy --> <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>--> <!-- HEAD part --> <!-- Initialize the tagging library --> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <!-- Register your companion slots --> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(function() { // Supply YOUR_NETWORK and YOUR_UNIT_PATH. googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv') .addService(googletag.companionAds()) .addService(googletag.pubads()); googletag.companionAds().setRefreshUnfilledSlots(true); googletag.pubads().enableVideoAds(); googletag.enableServices(); }); </script> </head> <body> <!-- BODY part --> <!-- Declare a div where you want the companion to appear. Use googletag.display() to make sure the ad is displayed. --> <div id="companionDiv" style="width:728px; height:90px;"> <script> // Using the command queue to enable asynchronous loading. // The unit does not actually display now - it displays when // the video player is displaying the ads. googletag.cmd.push(function() { googletag.display('companionDiv'); }); </script> </div> <body> </html>
試してみる
動作する実装については、次の Codepen をご覧ください。
例 2: 動的広告スロットの実装
ページのコンテンツがレンダリングされるまで、ページにいくつの広告スロットがあるかわからない場合があります。次のサンプルコードは、ページのレンダリング中に広告スロットを定義する方法を示しています。この例は、実際に広告が表示される場所に広告スロットを登録する点を除き、例 1 と同じです。
注: 動画プレーヤーが広告を表示しようとすると、スロットを求められます。プレーヤーが広告を表示する前に、スロットが定義されていることを確認します。
<html> <head> <!-- Uncomment the line below for the HTML5 SDK caveat proxy --> <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> --> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <!-- HEAD part --> <!-- Initialize the tagging library --> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(function() { googletag.companionAds().setRefreshUnfilledSlots(true); googletag.pubads().enableVideoAds(); googletag.enableServices(); }); </script> </head> <body> <!-- BODY part --> <!-- Declare a div where you want the companion to appear. Use googletag.display() to make sure the ad is displayed. --> <div id="companionDiv" style="width:728px; height:90px;"> <script> // Using the command queue to enable asynchronous loading. // The unit does not actually display now - it displays when // the video player is displaying the ads. googletag.cmd.push(function() { // Supply YOUR_NETWORK and YOUR_UNIT_PATH. googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv') .addService(googletag.companionAds()) .addService(googletag.pubads()); googletag.display('companionDiv'); }); </script> </div> <body> </html>
試してみる
動作する実装については、次のコードをご覧ください。
例 3: プリロードされた広告スロット
コンパニオン広告がリクエストされる前に、広告スロットに何かを表示する必要がある場合があります。コンパニオン広告は通常、動画広告と一緒にリクエストされます。このリクエストは、ページの読み込み後に発生する可能性があります。たとえば、コンパニオン広告は、ユーザーがクリックして再生する動画をクリックした後にのみ読み込まれます。このような場合、コンパニオン広告がリクエストされる前に、広告スロットを埋める通常の広告をリクエストする機能が必要です。このユースケースをサポートするために、コンパニオン スロットに標準のウェブ広告を表示できます。ウェブ広告がコンパニオン スロットをターゲットに設定されていることを確認します。コンパニオン スロットは、標準のウェブ広告スロットをターゲットに設定する場合と同じ方法でターゲットに設定できます。
注: 次のサンプルコードは、太字のセクションを除き、例 1 で提供されたコードとまったく同じです。この場合、動画広告ユニットではなく、プリロード広告の広告ネットワークとユニットパスを指定します。
前述の実装例を次に示します。
<html> <head> ... <!-- Register your companion slots --> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(function() { // Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH. googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv') .addService(googletag.companionAds()) .addService(googletag.pubads()); googletag.companionAds().setRefreshUnfilledSlots(true); googletag.pubads().enableVideoAds(); googletag.enableServices(); }); </script> </head> ... </html>
試してみる
動作する実装については、次のコードペンをご覧ください。
Ad API でコンパニオン広告を使用する
このセクションでは、Ad API を使用してコンパニオン広告を表示する方法について説明します。
コンパニオン ディスプレイ広告を表示する
コンパニオン広告を表示するには、まず AdsManager からディスパッチされた AdEvent イベントのいずれかを使用して、Ad オブジェクトへの参照を取得します。コンパニオン広告の表示はマスター広告の表示と一致させる必要があるため、AdEvent.STARTED イベントを使用することをおすすめします。
次に、この Ad オブジェクトを使用して getCompanionAds() を呼び出し、CompanionAd オブジェクトの配列を取得します。ここで CompanionAdSelectionSettings を指定すると、クリエイティブ タイプ、ニアフィット率、リソースタイプ、サイズ条件のコンパニオン広告のフィルタを設定できます。これらの設定の詳細については、
HTML5 API のドキュメントをご覧ください。
getCompanionAds から返された CompanionAd オブジェクトを使用して、以下のガイドラインに沿ってページにコンパニオン広告を表示できるようになりました。
- ページに必要なサイズのコンパニオン広告スロット
<div>を作成します。 -
STARTED イベントのイベント ハンドラで、
getAd()を呼び出してAdオブジェクトを取得します。 -
getCompanionAds()を使用して、コンパニオン広告スロットのサイズとCompanionAdSelectionSettingsの両方に一致し、マスター クリエイティブと同じシーケンス番号を持つコンパニオン広告のリストを取得します。シーケンス属性がないクリエイティブは、シーケンス番号 0 として扱われます。 -
CompanionAdインスタンスからコンテンツを取得し、その広告スロットの<div>の内部 HTML として設定します。
サンプルコード
<!--Set a companion ad div in html page. --> <div id="companion-ad-300-250" width="300" height="250"></div> <script> // Listen to the STARTED event. adsManager.addEventListener( google.ima.AdEvent.Type.STARTED, onAdEvent); function onAdEvent(adEvent) { switch (adEvent.type) { case google.ima.AdEvent.Type.STARTED: // Get the ad from the event. var ad = adEvent.getAd(); var selectionCriteria = new google.ima.CompanionAdSelectionSettings(); selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC; selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE; selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE; // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings var companionAds = ad.getCompanionAds(300, 250, selectionCriteria); var companionAd = companionAds[0]; // Get HTML content from the companion ad. var content = companionAd.getContent(); // Write the content to the companion ad slot. var div = document.getElementById('companion-ad-300-250'); div.innerHTML = content; break; } } </script>
フレキシブル コンパニオン広告を表示する
IMA で Fluid サイズのコンパニオン広告がサポートされるようになりました。これらのコンパニオン広告は、広告スロットのサイズに合わせてサイズを変更できます。親 div の幅の 100% を占有し、コンパニオンのコンテンツに合わせて高さを変更します。アド マネージャーで Fluid コンパニオン サイズを使用して設定します。この値を設定する場所については、次の画像をご覧ください。
GPT の液体コンパニオン
GPT コンパニオンを使用する場合は、defineSlot() メソッドの 2 番目のパラメータを更新して、フレキシブル コンパニオン スロットを宣言できます。
<!-- Register your companion slots -->
<script>
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>Ad API のフレキシブル コンパニオン
コンパニオン広告に Ad API を使用する場合は、google.ima.CompanionAdSelectionSettings.SizeCriteria を SELECT_FLUID 値に更新して、フレキシブル コンパニオン スロットを宣言できます。
<script> ... // Get the ad from the event. var ad = adEvent.getAd(); var selectionCriteria = new google.ima.CompanionAdSelectionSettings(); selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC; selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE; selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID; // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings // Note: Companion width and height are irrelevant when fluid size is used. var companionAds = ad.getCompanionAds(0, 0, selectionCriteria); var companionAd = companionAds[0]; ... } } </script>