このページは Cloud Translation API によって翻訳されました。

コンパニオン広告

ページはめ込み HTML 広告スロットと動画広告スロットまたはオーバーレイ広告スロットを関連付けることができます。関連付けられた広告スロット間のこの関係は、マスターとコンパニオンの関係と呼ばれます。

動画とオーバーレイマスター広告をリクエストするほか、IMA SDK を使用してコンパニオン HTML 広告を表示することもできます。これらの広告は HTML 環境内に表示されます。

コンパニオン広告を使用

コンパニオン広告を使用する手順は次のとおりです。

1. コンパニオン広告を予約する

まず、マスター広告と一緒に表示するコンパニオン広告を予約する必要があります。コンパニオン広告はアドマネージャーで入稿できます。マスター広告ごとに最大 6 つのコンパニオン広告を配信できます。1 人の購入者がページ上のすべての広告を管理する手法であるこの手法は、ロードブロッキングとも呼ばれます。

2. コンパニオン広告をリクエストする

デフォルトでは、すべての広告リクエストに対してコンパニオン広告が有効になっています。

3.コンパニオン広告を表示する

コンパニオン広告を表示する方法は 2 つあります。

自動 Google パブリッシャータグ（GPT）を使用
Google パブリッシャータグを使用してコンパニオン広告を実装している場合は、HTML ページでコンパニオン広告スロットが宣言されており、これらの広告が API で登録されていれば、自動的に表示されます（JavaScript と HTML の div ID が一致している必要があります）。GPT を使用するメリットは次のとおりです。
- コンパニオンスロットの認識
- パブリッシャーのネットワークからのコンパニオンバックフィル（VAST レスポンスに含まれるコンパニオン広告が HTML ページで定義されたスロットよりも少ない場合）
- 動画広告がない場合のコンパニオンの自動入力
- Click-to-Play 動画プレーヤー用のプリロード済みコンパニオン広告スロット
- コンパニオンの自動レンダリング（HTMLResource、iFrameResource など）
手動で Ad API を使用します。

レスポンシブ広告を Google パブリッシャータグとともに使用する

Google パブリッシャータグ（GPT）を使用すると、サイトへの HTML コンパニオン広告の表示を自動化できます。通常は GPT を使用することをおすすめします。GPT が（iframe ではなく）メインのウェブページに読み込まれると、HTML5 SDK は GPT スロットを認識します。IMA SDK で GPT を使用する方法について詳しくは、GPT のドキュメントをご覧ください。

iframe 内に HTML5 SDK をホストする場合

次の両方の条件を満たす場合、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 メソッド呼び出し（使用している実際の例に応じて <head> タグまたは <body> タグにあります）に有効な network と unit-path を指定してください。

例 1: 基本的な広告スロットの実装
例 2: 動的広告スロットの実装
例 3: プリロード済み広告スロット

例 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: プリロード済み広告スロット

場合によっては、コンパニオン広告がリクエストされる前に、広告スロットに何かを表示しなければならないことがあります。通常は動画広告と一緒にリクエストされます。このリクエストは、ページが読み込まれた後に発生する可能性があります。たとえば、ユーザーが Click-to-Play 動画をクリックした後にのみ、コンパニオン広告が読み込まれる場合があります。そのような場合は、コンパニオン広告がリクエストされる前に、広告スロットを埋めるために通常の広告をリクエストできる機能が必要です。このユースケースに対応するには、コンパニオンスロットに標準のウェブ広告を表示できます。ウェブ広告のターゲットがコンパニオンスロットであることを確認します。コンパニオンスロットも、標準のウェブ広告スロットと同じようにターゲットに設定できます。

注: 次のサンプルコードは、太字の部分を除いて、例 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 Fluid コンパニオン

GPT コンパニオンを使用する場合、defineSlot() メソッドの 2 番目のパラメータを更新することで、Fluid コンパニオンスロットを宣言できます。

 <!-- 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 の Fluid コンパニオン

コンパニオン広告に Ad API を使用する場合は、google.ima.CompanionAdSelectionSettings.sizeCriteria を SELECT_FLUID 値に更新することで、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>

コンパニオン広告

コンパニオン広告を使用

1. コンパニオン広告を予約する

2. コンパニオン広告をリクエストする

3.コンパニオン広告を表示する

レスポンシブ広告を Google パブリッシャー タグとともに使用する

iframe 内に HTML5 SDK をホストする場合

HTML でコンパニオン広告スロットを宣言する

例 1: 基本的な広告スロットの実装

試してみる

例 2: 動的広告スロットの実装

試してみる

例 3: プリロード済み広告スロット

試してみる

Ad API でコンパニオン広告を使用する

コンパニオン広告を表示する

サンプルコード

滑らかなコンパニオン広告を表示する

GPT Fluid コンパニオン

Ad API の Fluid コンパニオン

レスポンシブ広告を Google パブリッシャータグとともに使用する