リニアディスプレイ広告を有効にする

IMA SDK for HTML5 では、リニア動画広告に加えて、リニアディスプレイ広告もサポートされています。リニア動画広告の詳細については、動画ソリューション広告の概要をご覧ください。

リニアディスプレイ広告を有効にすると、リニアディスプレイ広告がリニア動画広告と広告スペースを競合するため、広告スペースの広告デマンドが増加する可能性があります。IMA はリニアディスプレイ広告のレンダリングを処理しますが、動画コンテンツの検出を設定する必要があります。IMA コンテンツ検出の実装は、コンテンツプレーヤーを広告プレーヤーと同じオリジンフレームに作成するか、広告プレーヤーをクロスオリジンフレームに作成するかによって異なります。

このガイドでは、リニアディスプレイ広告を有効にするためのコンテンツ検出の設定、コンテンツ動画プレーヤーの変更、コンテンツシグナルの収集の停止について説明します。

コンテンツ検出を設定する

広告リクエストでリニアディスプレイ広告を有効にする手順は次のとおりです。

同一オリジン

IMA SDK がコンテンツプレーヤーと同じオリジンを共有している場合は、次のいずれかを行います。

推奨: 動画プレーヤーを AdsManagerLoadedEvent.getAdsManager() 呼び出しに渡します。getAdsManager() では currentTime プロパティを含むオブジェクトを渡すことができますが、コンテンツ検出をサポートするには、HTMLVideoElement インスタンスを getAdsManager() に渡す必要があります。
```
function onAdsManagerLoaded(adsManagerLoadedEvent) {
  // Set any AdsRenderingSettings here.
  const adsRenderingSettings = new google.ima.AdsRenderingSettings();

  // Get the ads manager.
  adsManager =
    adsManagerLoadedEvent.getAdsManager(videoElement, adsRenderingSettings);
}
```
AdsManagerLoadedEvent.getAdsManager() の呼び出し中にコンテンツプレーヤーを提供できない場合は、動画プレーヤーで AdsManager.configureAdsManager() メソッドを呼び出します。コンテンツ検出が機能するには、HTMLVideoElement である必要があります。

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager =
    adsManagerLoadedEvent.getAdsManager(null);
  adsManager.configureAdsManager(videoElement);
}

コンテンツ検出を設定しないと、Google 広告サーバーがリニアディスプレイ広告の配信を停止する可能性があります。

コンテンツプレーヤーが IMA SDK を読み込むのと同じオリジンにある場合、コンテンツプレーヤーの変更やコンテンツシグナルの収集の停止を処理するために IMA の実装を変更する必要はありません。

クロスオリジン

IMA SDK がコンテンツプレーヤーに対してクロスオリジンである場合、IMA は CrossOriginProxy クラスを介してコンテンツ検出シグナルを収集できます。このクラスを使用すると、IMA SDK でリニアディスプレイ広告のプレースメントが正しいことを確認し、動画コンテンツのテーマに関連するシグナルを収集できます。IMA SDK をクロスドメイン iframe に配置する場合は、CrossOriginProxy クラスを実装する必要があります。

CrossOriginProxy クラスを実装せずに、コンテンツプレーヤーを IMA SDK とクロスオリジンに配置し続けると、Google 広告サーバーがリニアディスプレイ広告の配信を停止する可能性があります。

CrossOriginProxy クラスをアプリに読み込む手順は次のとおりです。

HTML ファイルに ima_proxy.js ファイルをインポートします。

<html>
  <head>
    <title>IMA HTML5 cross-origin iframe sample</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="mainContainer">
      <div id="content">
        <video id="contentElement">
          <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
        </video>
      </div>

      <!-- The cross-origin iframe where you load IMA SDK and play ads. -->
      <iframe id="adContainerIframe"
              src="https://cross-origin-domain.com/ads-sandbox.html" >
      </iframe>

    </div>
    <button id="playButton">Play</button>

    <script src="//imasdk.googleapis.com/js/sdkloader/ima_proxy.js"></script>
    <script src="main.js"></script>
  </body>
</html>

main.js ファイルで、CrossOriginProxy インスタンスを取得します。
ページまたはアプリで広告を表示するすべての動画プレーヤーの配列を指定して、setVideoElements() メソッドを呼び出します。

広告リクエストを行う前に、setVideoElements() 呼び出しで動画要素を CrossOriginProxy インスタンスに渡す必要があります。次の例では、1 つのコンテンツ動画プレーヤーを含む配列を渡しています。

// On window load attach an event to the play button click
// that triggers playback of the content video element.
window.addEventListener('load', function(event) {
videoContent = document.getElementById('contentElement');
ima.crossOriginProxy.getInstance().setVideoElements([videoContent]);
playButton = document.getElementById('playButton');
playButton.addEventListener('click', playAds);
});

コンテンツ動画プレーヤーを変更する

別のコンテンツ動画プレーヤーに変更または追加する場合は、新しい配列を setVideoElements() メソッドに渡す必要があります。新しい setVideoElements() 呼び出しを行うと、IMA は新しいコンテンツプレーヤーのシグナルの収集を開始し、以前の呼び出しで渡されたコンテンツプレーヤーのシグナルの収集を停止します。

次の例では、新しい動画要素を CrossOriginProxy クラスに渡しています。

function createNewContentPlayer(newPlayerId) {
newVideoContent = document.getElementById(newPlayerId);
ima.crossOriginProxy.getInstance().setVideoElements([newVideoContent]);

// Continue with any other steps needed to initiate the content player
}

広告が完了したらシグナルの収集を停止する

広告の再生を終了して AdsLoader.destroy() メソッドを呼び出す場合は、空の配列を指定して setVideoElements() メソッドも呼び出す必要があります。空の配列を指定して setVideoElements() を呼び出すと、IMA が保持しているコンテンツプレーヤーへの参照が削除され、メモリリークの問題が回避されます。