IMA DAI SDK スタートガイド

IMA SDK を使用すると、マルチメディア広告をウェブサイトやアプリに簡単に統合できます。IMA SDK は、 VAST 準拠の任意の広告サーバーから広告をリクエストし、アプリ内の広告再生を管理できます。IMA DAI SDK を使用すると、アプリは広告とコンテンツ動画（VOD またはライブ コンテンツ）のストリーム リクエストを行います。SDK は統合された動画ストリームを返すため、アプリ内で広告動画とコンテンツ動画を切り替える必要はありません。

関心のある DAI ソリューションを選択する

フルサービス DAI

このガイドでは、IMA DAI SDK をシンプルな動画プレーヤー アプリに統合する方法について説明します。統合済みのサンプルを確認したり、サンプルに沿って学習したりするには、GitHub からシンプルなサンプルをダウンロードしてください。

IMA DAI の概要

IMA DAI SDK の実装には、このガイドで説明するように、次の 2 つの主要コンポーネントが関与します。

  • StreamRequest - VODStreamRequest または LiveStreamRequest: ストリーム リクエストを定義するオブジェクト。ストリーム リクエストは、ビデオ オンデマンドまたはライブ配信のいずれかです。リクエストでは、コンテンツ ID のほか、API キーまたは認証トークンなどのパラメータを指定します。
  • StreamManager: ダイナミック広告挿入ストリームと DAI バックエンドとのインタラクションを処理するオブジェクト。ストリーム マネージャーは、トラッキング ピングも処理し、ストリーム イベントと広告イベントをパブリッシャーに転送します。

前提条件

  • 3 つの空のファイル
    • dai.html
    • dai.css
    • dai.js
  • Python がパソコン、またはテストに使用するウェブサーバーにインストールされている

開発用サーバーを起動する

IMA DAI SDK は、読み込まれたページと同じプロトコルを使用して依存関係を読み込むため、ウェブサーバーを使用してアプリをテストする必要があります。ローカル開発用サーバーをすばやく起動する方法は、Python の組み込みサーバーを使用することです。

  1. index.html ファイルを含むディレクトリから、コマンドラインを使用して次のコマンドを実行します。

    python -m http.server 8000

  2. ウェブブラウザで http://localhost:8000/ にアクセスします。

    Apache HTTP Server などの他のウェブサーバーも使用できます。

シンプルな動画プレーヤーを作成する

まず、dai.html を変更して、シンプルな HTML5 動画要素と、クリックスルーに使用する div を作成します。また、dai.css ファイルと dai.js ファイルを読み込み、hls.js 動画プレーヤーをインポートするために必要なタグを追加します。次に、dai.css を変更して、ページ要素のサイズと位置を指定します。最後に、dai.js で、ストリーム リクエスト情報を保持する変数と、ページの読み込み時に実行する initPlayer() 関数を定義します。

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA DAI SDK DAI Demo (HLS.JS)</h2>
    <video id="video"></video>
    <div id="ad-ui"></div>
</body>
</html>

dai.css

#video,
#ad-ui {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#ad-ui {
  cursor: pointer;
}

dai.js

var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
}

IMA DAI SDK を読み込む

次に、dai.html で、dai.js のタグの前にスクリプトタグを使用して IMA フレームワークを追加します。

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>

StreamManager を初期化してストリーム リクエストを実行する

広告セットをリクエストするには、DAI ストリームのリクエストと管理を行う ima.dai.api.StreamManager を作成します。コンストラクタは動画要素を受け取り、生成されたインスタンスは広告 UI 要素を受け取って広告クリックを処理します。

次に、ストリームをリクエストする関数を定義します。この例には、VOD とライブ配信の両方の関数があります。これらの関数は、それぞれ VODStreamRequest と LiveStreamRequest のインスタンスを作成し、streamRequest パラメータで streamManager.requestStream() を呼び出します。ライブ配信の場合は、タイムド メタデータ イベントをリッスンしてイベントを StreamManager に転送するハンドラも追加する必要があります。ユースケースに合わせてコードのコメント化またはコメント解除を行うことができます。どちらのメソッドも、オプションの API キーを受け取ります。保護されたストリームを使用している場合は、DAI 認証キーを作成する必要があります。

この例のどちらのストリーミングも保護されていないため、apiKey は使用されません。

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in the metadata, pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null);
}

function requestVODStream(cmsId, videoId, apiKey) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

ストリーム イベントを処理する

最後に、主要な動画イベントのイベント リスナーを実装する必要があります。この簡単な例では、onStreamEvent() 関数を呼び出して LOADED、ERROR、AD_BREAK_STARTED、AD_BREAK_ENDED イベントを処理します。この関数は、ストリームの読み込みとエラーを処理します。また、広告の再生中にプレーヤーのコントロールを無効にします。これは SDK で必須です。ストリームが読み込まれると、動画プレーヤーは loadUrl() 関数を使用して指定された URL を読み込み、再生します。

動画要素の pause イベントと start イベントのイベント リスナーを設定すると、ミッドロール挿入点中に IMA が一時停止したときに、ユーザーが再生を再開できるようになります。

DAI を使用するには、サンプルコードに示すように、カスタム プレーヤーがライブ配信の ID3 イベントを IMA DAI SDK に渡す必要があります。

dai.js

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     google.ima.dai.api.StreamEvent.Type.ERROR,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
    onStreamEvent,
    false);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

function onStreamPause() {
  console.log('paused');
  if (isAdBreak) {
    videoElement.controls = true;
    adUiElement.style.display = 'none';
  }
}

function onStreamPlay() {
  console.log('played');
  if (isAdBreak) {
    videoElement.controls = false;
    adUiElement.style.display = 'block';
  }
}

これで、これで、IMA DAI SDK を使用して広告をリクエストして表示できるようになりました。SDK の高度な機能については、他のガイドまたは GitHub のサンプルをご覧ください。