サービスに関するご意見やご提案は、Google 広告と測定のコミュニティサーバーの公式アドマネージャー Discord チャンネルにご参加ください。

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

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

プラットフォームを選択: 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 のドキュメントをご覧ください。

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

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

IFrame で HTML5 SDK を読み込みます。
メインのウェブページ（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: 基本的な広告スロットの実装
例 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 をご覧ください。

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>

試してみる

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

CodePen

例 3: 事前読み込みされた広告スロット

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

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

<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 をご覧ください。

CodePen

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

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

コンパニオンディスプレイ広告

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

次に、この Ad オブジェクトを使用して getCompanionAds() を呼び出し、CompanionAd オブジェクトの配列を取得します。ここでは CompanionAdSelectionSettings を指定できます。これにより、クリエイティブタイプ、ニアフィット率、リソースタイプ、サイズの条件でコンパニオン広告にフィルタを設定できます。これらの設定の詳細については、IMA CompanionAdSelectionSettings 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>

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

IMA で、Fluid サイズのコンパニオン広告がサポートされるようになりました。コンパニオン広告は、広告スロットのサイズに合わせてサイズ変更できます。親 div の幅いっぱいに表示され、コンパニオンのコンテンツに合わせて高さが調整されます。コンパニオン広告のサイズは、アドマネージャーの 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 の Fluid コンパニオン

コンパニオン広告に 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>

コンパニオン広告のサポートを追加 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

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

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

3. コンパニオン ディスプレイ広告

Google パブリッシャー タグでコンパニオン広告を使用する

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

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

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

試してみる

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

試してみる

例 3: 事前読み込みされた広告スロット

試してみる

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

コンパニオン ディスプレイ広告

サンプルコード

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

GPT: 流動的なコンパニオン

Ad API の Fluid コンパニオン

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

3. コンパニオンディスプレイ広告

Google パブリッシャータグでコンパニオン広告を使用する

コンパニオンディスプレイ広告