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

Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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

プラットフォームを選択: 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 コンパニオンを正しく表示するために、追加のプロキシスクリプトを含める必要があります。

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 を追加して、コンパニオン広告スロットを宣言する必要があります。

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

前述の実装の例を次に示します。

<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 を使用してコンパニオン広告を表示する方法について説明します。

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

コンパニオン広告を表示するには、まず 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 の幅の 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>

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

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

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

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

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

Google パブリッシャー タグを使用したコンパニオン広告

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

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

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

試してみる

例 2: ダイナミック広告スロットの実装

試してみる

例 3: プリロードされた広告スロット

試してみる

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

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

サンプルコード

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

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

Ad API の流動的なコンパニオン

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

Google パブリッシャータグを使用したコンパニオン広告