ワークスペースへ

導入ガイド

コンパニオン広告

Companion ads

プレーヤーで動画広告または音声広告が再生されるのと同時にページに表示され、ペアになるバナー。

  • Ad Manager
  • ページ上、動画または音声プレーヤーの近くにあるディスプレイ広告スペース
デスクトップ
スマートフォン

1分でわかる

コンパニオン広告とは

コンサートを思い浮かべてください。歌手がステージにいる間、横のスクリーンに曲名が出ています。2つは同じ話を同時に伝えています。コンパニオン広告もこれと同じです。動画または音声の広告がプレーヤーで流れている間、同じ広告のバナーが、プレーヤーの近くのページの広告枠に表示されます。

Googleによると、コンパニオン広告を使うと、動画または音声のプレーヤーで広告が配信されるのと同時に、ディスプレイ広告のスペースに広告を表示できます。コンパニオン広告は常に、マスターと呼ばれるメインの広告に依存します。マスターがなければ、コンパニオンは存在しません。歌っている人がいなければ意味がない、コンサートのスクリーンのようなものです。1つのVAST広告には、最大6つのコンパニオン ディスプレイ広告を含められます。

サイトはどうやっているのでしょうか。プレーヤーの近くのディスプレイ枠は GPT(Google Publisher Tag、広告枠を作る Google のコード)で作られます。GPT には3つの部品があります。1つ目の companionAds は、同じページのプレーヤーで VAST 広告が再生されているときに、その枠にコンパニオンを入れてよいと伝えます。2つ目の setRefreshUnfilledSlots は、空のままになった枠をあとで埋めるよう依頼します。3つ目の enableVideoAds は、GPT と IMA SDK に同じ correlator を使わせます。correlator は、同じページ表示のすべての広告リクエストで共通になる数値です。プレーヤー側では、IMA がタグの ciu_szs パラメータでコンパニオンのサイズを送ります。

どんなときに向いているでしょうか。動画や音声の広告があり、その広告をページにも表示したいときです。音声広告を受け取れる動画プレーヤーでは、音声が流れている間プレーヤーが空白にならないよう、Google はコンパニオン バナーを使うことを強く推奨しています。注意点がいくつかあります。枠はコンパニオンと同じサイズにすること、レスポンシブ広告は動画のコンパニオンとしてはサポートされないこと、プレーヤーが iframe の中にある場合は GPT のプロキシ スクリプトが必要なことです。

手順

実装の方法

  1. 広告申込情報でサイズを指定する動画と音声の広告申込情報を作成するときに、マスター クリエイティブの想定サイズと、コンパニオンのサイズを指定します。
  2. コンパニオン クリエイティブを追加する対応しているタイプのいずれかを使います。「画像」、「Campaign Manager 360」、「サードパーティ」、「カスタム」、「ネイティブ形式(ベータ版)」、または標準かカスタムのクリエイティブ テンプレートです。
  3. メインページでGPTを読み込むHTML5用のIMAは、GPTがメインページで読み込まれているときにだけ、GPTのスペースを認識します。プレーヤーがiframeの中にある場合は、GPTのプロキシ スクリプトを含めてください。
  4. コンパニオンのスペースを作成するcompanionAdsとpubadsでスペースを定義し、空のスペースの補充をオンにし、動画広告を有効にして、スペースを表示します。スペースは、プレーヤーが広告を表示する前に定義してください。
  5. プレーヤーのタグでサイズを送るIMAのタグで、ciu_szsパラメータに、コンパニオンのサイズをカンマで区切って指定します。たとえば728x90,300x250です。
  6. 自動再生でのちらつきを避ける動画や音声が自動再生される場合、GPTはdisableInitialLoadを使って、コンパニオンが届く前に通常のバナーが一瞬表示されるのを防げます。

実装例

コードと画面での表示

GPTはプレーヤーと同じページのheadに入れ、コンパニオンのボックスは、プレーヤーの近くに、コンパニオン広告と同じサイズで置きます。
<!-- No head: GPT com um espaço que aceita complementar -->
<script async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(function () {
    googletag
        .defineSlot('/1234567/exemplo', [728, 90], 'companionDiv')
        .addService(googletag.companionAds())
        .addService(googletag.pubads());
    googletag.companionAds().setRefreshUnfilledSlots(true);
    googletag.pubads().enableVideoAds();
    googletag.enableServices();
  });
</script>

<!-- No body: a caixa do complementar, do mesmo tamanho -->
<div id="companionDiv" style="width:728px; height:90px;">
  <script>
    googletag.cmd.push(function () { googletag.display('companionDiv'); });
  </script>
</div>

<!-- Na tag do IMA, os tamanhos dos complementares vão em ciu_szs:
     ...&ciu_szs=728x90&... -->
デスクトッププレーヤーで広告が再生されている間、同じ広告のバナーがページのディスプレイ枠に表示されます。
モバイル広告がプレーヤーで再生されている間、コンパニオン バナーがページのディスプレイ スペースに表示されます。fluidサイズでは、どの画面でも同じ割合のスペースを占めます。

Googleのガイダンス

できることとできないこと

してよいこと

  • 1つのVAST広告につき、最大6つのコンパニオン広告を表示する。
  • 「画像」、「Campaign Manager 360」、「サードパーティ」、「カスタム」、「ネイティブ形式(ベータ版)」、またはクリエイティブ テンプレートのコンパニオンを使うこと。
  • 空のコンパニオン スペースを、あとで自分のネットワークの別の広告で埋めるよう要求する。
  • どの画面でも同じ割合のスペースを占める、fluidサイズのコンパニオンを使う。
  • 音声広告を受け取れる動画プレーヤーでコンパニオン バナーを使うこと。Google が強く推奨しています。

してはいけないこと

  • コンパニオン単独では存在しません。常にマスター広告に依存します。
  • レスポンシブ広告は、動画のコンパニオンとして対応していません。
  • IMAは、動画のコンパニオンでクリックして音を出す機能に対応していません。
  • ネイティブ動画が有効なフォーマットは、コンパニオンとして使えません。
  • プレーヤーがiframeの中にあると、プロキシ スクリプトがない限りGPTは認識されません。

ヒント

正しく行うために

注意

よくあるエラー

iframeの中のGPT

HTML5用のIMAは、メインページのGPTスペースだけを認識します。iframeの中では、プロキシ スクリプトがないと、コンパニオンは表示されません。

サイズが合わない

コンパニオンは、スペースと同じサイズである必要があります。728x90のスペースに300x250のコンパニオンは入りません。

タグでサイズを忘れる

IMAを使うプレーヤーは、コンパニオンのサイズをciu_szsパラメータで送る必要があります。なければ、サーバーはページが受け入れるサイズを判断できません。

コンパニオンの前にバナーがちらつく

自動再生される動画や音声では、通常のバナーが一瞬表示されることがあります。Googleは、これを避けるためにdisableInitialLoadを推奨しています。

よくある質問

コンパニオンは動画なしで表示されますか?

いいえ。常に、プレーヤーで再生されるマスター広告に依存します。コンパニオンがない場合、そのスペースには自分のネットワークの別の広告が入ることがあります。

コンパニオンはいくつ置けますか?

1つのVAST広告には、最大6つのコンパニオン ディスプレイ広告を含められます。

音声広告でも使えますか?

はい。音声広告を受け取れる動画プレーヤーでは、音が流れている間プレーヤーが空白にならないよう、Google はコンパニオン バナーを使うことを強く推奨しています。

enableVideoAdsは何のためにありますか?

GPT と IMA SDK に同じ correlator を使わせます。correlator は、同じページ表示のすべての広告リクエストで共通になる数値です。

ライブラリ

Google の公式情報

このページの内容はすべて Google の公式ドキュメントに基づいています。原文で直接確認できます。

あなたのサイトは、このフォーマットを正しく使っていますか?

監査は、何もクリックせずに訪問者としてサイトを読み取り、修正すべき点を表示します。

監査を実行する