広告のルール

IMA HTML5 SDK では、完全に自動化された広告再生リストがサポートされています。この機能により、広告の入稿時に Google アド マネージャーの指定に沿ってコンテンツにミッドロール挿入点が挿入されます。また、プレロール、ミッドロール、ポストロールなどのミッドロール挿入点をサポートするために必要な動画プレーヤー コードも大幅に簡素化されます。

  • AdsManager を作成する際、getAdsManager 呼び出しによって contentPlayback オブジェクトが渡されます。このオブジェクトには、動画の現在のプレイヘッドの位置を返す currentTime プロパティが必要です。HTML5 video 要素を使用してコンテンツを表示している場合は、その要素を SDK に渡すことができます。このオブジェクトを使用してコンテンツ再生の進捗状況をトラッキングすることで、アド マネージャーで指定された時間に広告ブレークが自動的に挿入されるようにします。また、ユーザーに代わってコンテンツの状態を処理することを SDK に伝える必要もあります。
    var adsRenderingSettings = new google.ima.AdsRenderingSettings();
    adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
    adsManager = adsManagerLoadedEvent.getAdsManager(
        videoContent, adsRenderingSettings); // See API reference for
        
        contentPlayback.
    
  • ポストロールが再生されるようにするには、コンテンツが終了したことを SDK に伝える必要があります。SDK が動画プレーヤーを使用して広告を再生する場合があるため、SDK に通知できるのはコンテンツが終了したときだけであり、広告の終了時は通知しないため、少し厄介です。これを行うには、以下のコードを使用します。
    var videoContent = document.getElementById('contentElement');
    var contentEndedListener = function() {adsLoader.contentComplete();};
    
    videoContent.addEventListener('ended', contentEndedListener);
    
    function onContentPauseRequested() {
      contentElement.removeEventListener('ended', contentEndedListener);
      ...
    }
    
    function onContentResumeRequested() {
      contentElement.addEventListener('ended', contentEndedListener);
      ...
    }
  • CONTENT_PAUSE_REQUESTED イベントと CONTENT_RESUME_REQUESTED イベントは、広告ブレークの再生時にコンテンツを一時停止または再開するために使用されます。
  • 動画プレーヤーがドラッグして移動に対応しており、ユーザーがドラッグしている間に動画プレーヤーの現在の時間プロパティが更新される場合、SDK は正常に進行しているコンテンツとユーザーがコンテンツをシークしているを区別できません。 getAdsManager のパラメータとして、カスタムの contentPlayback オブジェクトを使用する必要があります。このユースケースの例については、シーク表示に関する問題をご覧ください。

注: コンテンツの再生が終了した場合、またはユーザーが再生を停止した場合は、コンテンツが完了したことを SDK に伝えるために、必ず AdsLoader.contentComplete を呼び出します。その後、ポストロール広告ブレークがスケジュールされている場合、SDK はポストロール広告ブレークを再生します。ALL_ADS_COMPLETED イベントは、すべての広告ブレークが再生されると発生します。また、コンテンツ トラッキングは init() が呼び出されると開始されます。また、コンテンツを再生する前に必ず init() を呼び出す必要があります。

ミッドロール挿入点の自動再生を無効にする

状況によっては、準備が整うまで SDK がミッドロール挿入点を再生しないようにする必要があります。このシナリオでは、広告ブレークの自動再生を無効にして、広告ブレークの再生を開始するタイミングを SDK に通知できます。この構成では、SDK が広告ブレークを読み込むと、AD_BREAK_READY イベントが発生します。プレーヤーが広告ブレークを開始する準備が整ったら、adsManager.start() を呼び出します。

function requestAds() {}
  ...
  adsLoader.getSettings().setAutoPlayAdBreaks(false);
  ...
}

function onAdsManagerLoaded() {
  ...
  // For non-auto ad breaks, listen for ad break ready
  adsManager.addEventListener(
      google.ima.AdEvent.Type.AD_BREAK_READY,
      adBreakReadyHandler);
  ...
}

function adBreakReadyHandler() {
  // Once we're ready to play ads. To skip this ad break, simply return
  // from this handler without calling adsManager.start().
  adsManager.start();
}

試してみる

実際に実装されている例を以下に示します。

再生位置を移動する際の問題

広告ルールを使用すると、クリック&ドラッグのシーク動作で問題が発生することがあります。 具体的には、ユーザーがクリックしてドラッグし、動画内の複数のミッドロール 連続配信広告を通過した後、コンテンツが再開する前にこれらの連続配信広告のうち 2 つ以上が再生される場合があります。これは、ユーザーがシーク中に動画のプレイヘッド時間が更新されたことで発生します。ユーザーが広告を前に移動している間に SDK が現在時刻をポーリングした場合、広告が再生されるべきだと SDK が判断する可能性があります。コンテンツが再開されると、対象の広告が再生され、その後、シーク後の最新の広告が再生されます。この問題を図で示します。

この問題を解決する簡単な方法は、ユーザーがシークを開始した現在の時刻を保存し、SDK がリクエストを行ったときにユーザーが通常の再生を再開するまでその時刻を報告することです。このソリューションを視覚的に表現するには、次の図をご覧ください。

この方法では、0:10 のミッドロールを適切にスキップし、0:20 のミッドロールのみを再生します。 そのためには、以下のようにカスタムのプレイヘッド トラッカーを使用します。以下のコードには、ダウンロード ページにある高度な HTML5 サンプルに含まれる ads.js の変更(太字の部分)が含まれています。

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.videoPlayer_.contentPlayer.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

モバイル Safari に関する既知の問題

この方法は、モバイル Safari を除くすべてのプラットフォームで動作するはずです。モバイル Safari では、動画タグのシーク プロパティが適切に実装されていません(常に false を返します)。これを回避するには、ユーザーが動画内を移動しているかどうかを独自に確認する必要があります。このメソッドのサンプルコードを以下に示します。繰り返しになりますが、以下の太字の行は既存のコードの変更を示しています。

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
  this.seeking = false;
  this.seekCheckInterval = 1000;
  // You may need to adjust this value, depending on your platform
  this.seekThreshold = 100;
  this.previousTime = 0;
  setInterval(
      Application.bind(this, this.checkForSeeking),
      this.seekCheckInterval);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.checkForSeeking = function() {
  var currentTime = this.videoPlayer_.contentPlayer.currentTime;
  // How much time has passed since you last ran this method, in milliseconds
  var diff = (currentTime - this.previousTime) * 1000;
  // If that difference is greater than the time since you last ran this method,
  // plus the threshold, the user was seeking
  if (Math.abs(diff)  > this.interval + this.threshold) {
    this.seeking = true;
  } else {
    this.seeking = false;
  }
  // Grab the current video time again to make up for time spent in this method
  previousTime = this.videoPlayer_.contentPlayer.currentTime;
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

この変更により、SDK はコンテンツ動画プレーヤーの currentTime プロパティではなく、Ads オブジェクトの currentTime プロパティを使用して、ミッドロール挿入点を再生するタイミングを決定するようになりました。