コンパニオン広告のサポートを追加

プラットフォームを選択: HTML5 Android iOS

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

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

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

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

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

まず、マスター広告と一緒に表示するコンパニオン広告を予約する必要があります。コンパニオン広告は アド マネージャーで入稿できます。 マスター広告 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 のドキュメントをご覧ください。

IFrame 内で HTML5 SDK をホストする場合

次の両方の条件を満たす場合は、GPT コンパニオンを正しく表示するために、追加のプロキシ スクリプトを含める必要があります。

  1. IFrame に HTML5 SDK を読み込む。
  2. メインのウェブページ（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 を追加して、コンパニオン広告スロットを宣言する必要があります。

例 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 動画をクリックした後にのみ読み込まれることがあります。このような場合は、コンパニオン広告がリクエストされる前に、通常の広告をリクエストして広告スロットを埋める必要があります。このユースケースをサポートするために、コンパニオン スロットに標準のウェブ広告を表示できます。ウェブ広告がコンパニオン スロットをターゲットにしていることを確認してください。 標準のウェブ広告スロットをターゲットにするのと同じ方法で、コンパニオン スロットをターゲットにできます。

上記の実装例を次に示します。

<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>

試してみる

動作する実装については、次の CodePen をご覧ください。

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

このセクションでは、Ad API を使用してコンパニオン広告を表示する方法について説明します。

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

コンパニオン広告を表示するには、まず Ad オブジェクトへの参照を、AdsManager からディスパッチされた AdEvent イベントのいずれかを使用して取得します。コンパニオン広告の表示はマスター広告の表示と同時に行う必要があるため、AdEvent.STARTED イベントを使用することをおすすめします。

次に、この Ad オブジェクトを使用して getCompanionAds() を呼び出し、 CompanionAd オブジェクトの配列を取得します。ここでは、CompanionAdSelectionSettings を指定して、クリエイティブ タイプ、ニアフィット率、リソースタイプ、サイズ条件のコンパニオン広告にフィルタを設定できます。 これらの設定について詳しくは、 IMA CompanionAdSelectionSettings API のドキュメントをご覧ください。

CompanionAd から返された getCompanionAds オブジェクトを使用して、次のガイドラインに沿ってページにコンパニオン広告を 表示できます。

  1. 必要なサイズのコンパニオン広告スロット <div> をページに作成します。
  2. イベントのイベント ハンドラで、オブジェクトを呼び出して取得します。STARTEDAdgetAd()
  3. getCompanionAds() を使用して、コンパニオン広告スロットのサイズと CompanionAdSelectionSettings の両方に一致し、マスター クリエイティブと同じシーケンス番号を持つコンパニオン広告のリストを取得します。シーケンス属性がないクリエイティブは、シーケンス番号 0 として扱われます。
  4. CompanionAd インスタンスからコンテンツを取得し、その広告スロットの <div> の inner 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>

Fluid サイズのコンパニオン広告を表示する

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 を使用する場合は、Fluid サイズのコンパニオン スロットを宣言できます を更新して 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>