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

コンパニオン広告

ページはめ込み HTML 広告スロットを動画または追加することをおすすめします関連付けられた広告スロット間の関係は、 master-companion 関係として扱うよう設定されます。

動画広告とオーバーレイマスター広告に加え、IMA SDK を使用して HTML 広告を作成します。これらの広告は HTML 形式で表示されます。できます。

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

コンパニオン広告を使用するには、次の手順を行います。

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

まず、お客様と一緒に表示するコンパニオン広告を予約する必要があります。設定します。コンパニオン広告は <ph type="x-smartling-placeholder"></ph> アドマネージャーで入稿されます。マスター広告ごとに最大 6 つのコンパニオン広告を配信できます。この手法では、1 人の購入者がページ上のすべての広告を管理する場合、ロードブロッキング。

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

デフォルトでは、コンパニオン広告は広告リクエストごとに有効になります。

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

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

Google パブリッシャータグ（GPT）を使用して自動作成する
GPT を使用してコンパニオン広告を実装している場合: コンパニオン広告スロットが宣言されている限り、自動的に表示されます。を HTML ページに配置し、それらの広告が API（つまり div JavaScript と HTML の ID は一致している必要があります）。GPT を使用する利点次のとおりです。 <ph type="x-smartling-placeholder">
- コンパニオンスロットの認識
- パブリッシャーのネットワークからのコンパニオンバックフィル（VAST タグがレスポンスに含まれるコンパニオン広告の数が、HTML ページに定義されているスロットの数より少ない。
- 動画広告がない場合のコンパニオンの自動入力
- Click-to-Play 動画プレーヤー用のプリロードされたコンパニオン広告スロット
- コンパニオンの自動レンダリング（HTMLResource、iFrameResource など）
手動で Ad API を使用します。

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

Google パブリッシャータグ（GPT）は HTML の表示を自動化するサイトに掲載できます。ほとんどのニュースメディアには GPT の使用をおすすめします。「 GPT がメインのウェブページに読み込まれている場合、HTML5 SDK が GPT スロットを認識する（iframe ではない）GPT を使用する方法について詳しくは、 GPT ドキュメントの IMA SDK をご覧ください。

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

次の条件を両方とも満たす場合は、必要なプロキシスクリプトを次のとおり追加する必要があります。

iframe で HTML5 SDK を読み込みます。
GPT をメインのウェブページ（iframe の外）で読み込みます。

このシナリオでコンパニオンを表示するには、 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 を追加して、コンパニオン広告を宣言する必要があるあります。

注: 次の例では、有効な network と unit-path を googletag.defineSlot メソッド呼び出し（<head> または <body>必ず指定してください）。

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

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

次のサンプルコードは、gpt.js ファイルを HTML ページに含めて、宣言します。宣言する広告スロットは 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 動画をクリックする。このような場合は、Cloud Storage バケットを通常の広告が広告スロットに配信されてから、コンパニオン広告がリクエストされる。宛先サポートしている場合、通常のウェブ広告を選択します。ウェブ広告がコンパニオンスロットにターゲティングされていることを確認します。コンパニオンスロットは、通常のスロットと同様の方法でターゲットにできます。標準ウェブ広告スロットに配信されます

注: 次のサンプルコードは、例 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 を使用してコンパニオン広告を表示する方法について説明します。

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

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

次に、この Ad オブジェクトを使用して getCompanionAds() を呼び出し、 CompanionAd オブジェクトの配列を取得します。ここで CompanionAdSelectionSettings を指定します。これにより、コンパニオン広告のフィルタをクリエイティブタイプ、ほぼ適合率、サイズなどの条件を指定できますこれらの設定の詳細については、 <ph type="x-smartling-placeholder"></ph> HTML5 API ドキュメントをご覧ください。

getCompanionAds から返される CompanionAd オブジェクトを使用して、ページにコンパニオン広告を表示できるようになりました。以下のガイドラインをご覧ください。

必要なサイズのコンパニオン広告スロット <div> を作成します表示されます。
イベントのイベントハンドラで、 <ph type="x-smartling-placeholder"></ph> STARTED イベントを処理すると、 <ph type="x-smartling-placeholder"></ph> Ad オブジェクトに呼び出して、 getAd()。
<ph type="x-smartling-placeholder"></ph>を使用してください getCompanionAds() を呼び出して、コンパニオン広告スロットのサイズと <ph type="x-smartling-placeholder"></ph> CompanionAdSelectionSettings であり、同じシーケンス番号を持つマスタークリエイティブとして使用しますシーケンス属性のないクリエイティブはシーケンス番号 0 のものとして処理されます。
コンテンツの取得先 <ph type="x-smartling-placeholder"></ph> CompanionAd インスタンスを作成し、その広告スロットの内側 HTMl として設定します。 <div>。

サンプルコード

<!--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% いっぱいに広げてから、親 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 の可変コンパニオン

コンパニオン広告で 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 パブリッシャー タグを使用する

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

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

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

試してみる

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

試してみる

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

試してみる

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

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

サンプルコード

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

GPT の流動的コンパニオン

Ad API の可変コンパニオン

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

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

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