ワークスペースへ

導入ガイド

プレロール動画

Pre-roll video ads

ユーザーが見ようと選んだ動画の前に、プレーヤー内で再生される動画広告です。

  • Ad Manager
  • Ad Exchange
  • AdSense(Ad Manager経由)
  • 動画プレーヤーの中(モバイルとデスクトップ)
デスクトップ
スマートフォン

1分でわかる

プレロール動画とは

映画館で、本編が始まる前に予告編や広告が流れるのを見たことはありませんか? プレロール動画はまさにそれで、舞台があなたのサイトになったものです。ユーザーが再生ボタンを押すと、コンテンツが表示される前に、同じプレーヤー内で広告が再生されます。プレーヤーとは、動画が流れる枠のことで、再生、一時停止、音量のボタンがあります。広告が終わると、選ばれた動画が始まります。

これを動かすには、プレーヤーが広告をリクエストできる必要があります。Google は IMA SDK というコードのパッケージを提供しており、プレーヤーと一緒に組み込みます。IMA SDK は、広告タグを使って Ad Manager にリクエストを送ります。広告タグとは、広告ユニットやプレーヤーのサイズなど、広告枠の情報が入ったインターネット上のアドレスです。レスポンスは VAST という標準形式で返ります。どの動画を再生し、再生回数をどう数えるかが書かれた、レシピのようなものです。サイトで動画広告ルールを使っている場合、レスポンスは VMAP で返ることもあります。これはテレビの番組表のように、各広告ブレークが入るタイミングを示します。

Google は、動画が自動的に始まる「自動再生」についても重要な点を説明しています。Chrome や Safari などのブラウザには独自のルールがあり、音声なしの場合にだけ自動再生できることが多くあります。ブラウザが許可しているかを簡単に確認する方法はなく、実際に再生を試すしかありません。そのため IMA のガイドでは、モバイルでは広告コンテナをユーザーの操作、たとえば再生ボタンのタップで有効にするよう案内しています。また、プレーヤーが自動再生またはミュートで始まる場合は、その旨をリクエストで伝え、その方法で再生できる広告だけが返るようにします。

プレロールは、授業、レシピ、動画ニュースのように、動画が訪問の目的である場合に向いています。Google の動画ポリシーでは、この枠は「インストリーム」と呼ばれます。ユーザーが見ると選んだコンテンツの中という意味で、正しく宣言する必要があります。常に覚えておいてください。ユーザーは動画を見に来たので、広告がコントロールを邪魔したり、コンテンツを止めたりしてはいけません。

手順

実装の方法

  1. 動画広告ユニットを作成するAd Manager では、プレロールに動画と音声の広告ユニットを使います。プレーヤーが使うタグは、この広告ユニットから取得します。
  2. 広告タグを生成する「在庫」、「広告ユニット」に進み、広告ユニットを開いて「タグ」をクリックします。「動画と音声用の Google パブリッシャー タグ」を選び、手順を進めてタグをコピーします。角かっこの中の値は、リクエスト時にプレーヤーが入力する必要があります。
  3. ページに IMA SDK を入れる自分のコードより前に、IMA SDK のスクリプトを読み込みます。動画の上に広告用のコンテナを作り、AdDisplayContainer で動画につなぎます。AdDisplayContainer は、広告を表示する IMA の部品です。
  4. 広告をリクエストする自分のタグで AdsLoader と AdsRequest を作ります。リニア広告枠の幅と高さを渡してください。複数の広告が返ってきたとき、IMA が合う広告を選びやすくなります。
  5. コンテンツを一時停止して再開するIMA が一時停止を求めたら(CONTENT_PAUSE_REQUESTED イベント)、動画を一時停止します。再開を求めたら(CONTENT_RESUME_REQUESTED)、再生を再開します。エラーが出たら、広告マネージャーを破棄し、広告なしで動画を再生させます。
  6. ユーザーのクリックで開始する再生ボタンで広告コンテナを初期化し、AdsManager を初期化して開始します。IMA のガイドでは、モバイルでは広告コンテナをユーザーの操作で初期化する必要があるとされています。

実装例

コードと画面での表示

動画ページに入れます。上部に IMA のスクリプト、プレーヤーの上に広告コンテナ、そしてユーザーが[再生]をクリックしたときにプレロールをリクエストするコードです。
<!-- 1. Carrega o IMA SDK (antes do seu código) -->
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

<!-- 2. O vídeo e, por cima dele, a caixa do anúncio -->
<div style="position:relative;width:640px;height:360px">
  <video id="conteudo" width="640" height="360" playsinline controls>
    <source src="meu-video.mp4" type="video/mp4">
  </video>
  <div id="adContainer" style="position:absolute;top:0;left:0"></div>
</div>
<button id="playButton">Assistir</button>

<script>
  var video = document.getElementById('conteudo');
  var adDisplayContainer = new google.ima.AdDisplayContainer(
      document.getElementById('adContainer'), video);
  var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
  var adsManager;

  adsLoader.addEventListener(
      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
      function (e) {
        adsManager = e.getAdsManager(video);
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
            function () { video.pause(); });
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
            function () { video.play(); });
        adsManager.addEventListener(
            google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
      });
  adsLoader.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);

  function onAdError(e) {
    console.log(e.getError());
    if (adsManager) { adsManager.destroy(); }
    video.play(); // sem anúncio, o vídeo continua
  }

  // 3. Pedido do anúncio (IDs de exemplo)
  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
      'iu=/1234567/exemplo&sz=640x480&env=vp&gdfp_req=1&output=vast' +
      '&unviewed_position_start=1&vpa=click&vpmute=0&plcmt=1' +
      '&description_url=https%3A%2F%2Fwww.exemplo.com%2Fvideo&correlator=';
  adsRequest.linearAdSlotWidth = 640;
  adsRequest.linearAdSlotHeight = 400;
  adsLoader.requestAds(adsRequest);

  // 4. Só começa quando a pessoa clica em Assistir
  document.getElementById('playButton').addEventListener('click', function () {
    adDisplayContainer.initialize();
    try {
      adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
      adsManager.start();
    } catch (err) {
      video.play();
    }
  });
</script>
デスクトップ広告はプレーヤー内の、動画が流れるのと同じ場所で、コンテンツが始まる前に再生されます。広告が終わると、選ばれた動画が始まります。
モバイルこちらもプレーヤー内に表示されます。多くの場合、ユーザーが再生をタップした後です。iPhone では、全画面プレーヤーではなくページ内で再生するために、動画に playsinline 属性が必要です。

Googleのガイダンス

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

してよいこと

  • ユーザーが選んだ動画の前に、プレーヤーの中で、IMA SDK を使って広告を再生すること。IMA SDK は、Google がインストリーム枠に求めるツールの1つです。
  • Google が携帯向けに推奨しているとおり、ユーザーが再生ボタンをクリックした操作から広告を開始する。
  • プレーヤーがリクエストで自動再生であること、およびミュートで再生することを伝えていれば、ミュートでも自動再生を使う。
  • Google の例のように、広告でエラーが出たときは、動画をそのまま再生させる。

してはいけないこと

  • 枠を誤って宣言してはいけません。プレーヤー内の動画広告は、インストリームまたは補足コンテンツ(メイン コンテンツに付随する動画)として宣言する必要があります。
  • 広告や動画のコントロールを覆ったり、隠したり、動かなくしたりしてはいけません。
  • 音声ありで自動再生される動画を同時に複数再生してはいけません。画面に見えている自動再生プレーヤーも複数にしてはいけません。
  • 広告スペースの50%以上が見える状態になる前に、広告が自動的に始まってはいけません。
  • YouTubeの動画で収益を得るためにIMAのプロダクトを使ってはいけません。

ヒント

正しく行うために

注意

よくあるエラー

ファイルをパソコンで直接開く

IMA のガイドでは、ローカルでもウェブサーバー経由でページを配信するよう案内しています。HTML ファイルを直接開くと、テストが失敗することがあります。

モバイルでユーザーの操作なしに始める

モバイルでは、再生をタップするなど、ユーザーの操作で広告コンテナを有効にする必要があります。そうしないと、広告が再生されないことがあります。

広告のエラーを処理しない

問題のある VAST レスポンスはエラーになることがあります。Google の例では、広告マネージャーを破棄して動画を再生し、ユーザーが止まった画面に取り残されないようにしています。

サイズの調整を忘れる

ウィンドウのサイズが変わると、Google の例では、動画のサイズを指定して AdsManager のリサイズを呼び出します。これがないと、広告のサイズがずれることがあります。

よくある質問

プレロールを使うのに広告ルールは必要ですか?

いいえ。プレーヤーは IMA 経由で VAST タグをリクエストできます。Google によると、広告ルールのパラメータ(ad_rule)は広告配信に必須ではなく、動画の広告ルールを使うときだけ必要です。

VAST と VMAP の違いは何ですか?

VAST は、どの広告を再生するかを示すレスポンスです。VMAP は、広告ルールと一緒に使われ、ブレークが入るタイミングを示すレスポンスです。タグは output パラメータで形式を選び、値には vast や vmap などがあります。

プレロールは自動で再生できますか?

ブラウザが許可していればできます。Chrome や Safari は、特に音声ありの自動再生を制限しています。プレーヤーは再生を試し、自動再生やミュートで再生することをリクエストで伝え、モバイルではユーザーの操作から広告を始めてください。

広告が読み込まれなかったらどうなりますか?

Google のガイドでは、広告が読み込まれなかったときも動画の再生を続けるよう求めています。例では、広告マネージャーを破棄して、広告なしで動画を再生します。

ライブラリ

Google の公式情報

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

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

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

監査を実行する