HbbTV 向け IMA SDK スタートガイド

IMA DAI SDK は、最小限の HbbTV 動画プレーヤー アプリへの統合をサポートしています。IMA DAI SDK を使用すると、ブロードバンド広告ストリームの Google アド マネージャーのデマンドをブロードキャスト コンテンツ ストリームに付随させることができます。このガイドでは、ブロードキャスト ストリームの広告イベント データに基づいて広告マニフェストを読み込む方法について説明します。

完成したサンプル統合を表示または確認するには、IMA HTML5 DAI SDK を使用した HbbTV リニア サンプルアプリをダウンロードします。古いテレビ デバイスをサポートするため、このガイドと GitHub のサンプルアプリは ES5 JavaScript で記述されています。

注: HTML5 用の IMA DAI SDK は広告ポッド マニフェストをサポートしており、ストリームのプリロードをサポートするメディア プレーヤーが必要です。このガイドでは、動画プレーヤーに dash.js を使用します。

HbbTV 以外のプラットフォームとの統合については、Interactive Media Ads SDK をご覧ください。

前提条件

このガイドに進む前に、次のことを確認してください。

• IMA DAI を使用するには、アド マネージャー 360 アドバンス アカウントが必要です。アド マネージャー アカウントをお持ちの場合は、詳細についてアカウント マネージャーにお問い合わせください。アド マネージャーへの登録について詳しくは、アド マネージャー ヘルプセンターをご覧ください。
• メディア再生のためにブロードキャスト オブジェクトとやり取りする HbbTV アプリ。詳しくは、HbbTV ブロードキャスト AV オブジェクトをご覧ください。
• プリロードをサポートする dash.js バージョン。バージョン 4.6.0 以降を使用することをおすすめします。
• アプリケーションをホストするウェブサーバー。
• DVB ブロードキャスト ストリームを含むテスト環境。テスト環境の設定に関する詳しい手順については、HbbTV アプリケーションを実行するをご覧ください。
  • ブロードキャスト ストリーム: カスタムのアプリケーション情報テーブル（AIT）データを含むブロードキャスト ストリームを準備します。また、テレビで受信するためのブロードキャスト ストリームを送信する手段も必要です。DVB 変調器を使用してブロードキャスト ストリームを送信することも、他の方法を使用することもできます。
  • ウェブサーバー: テレビからアクセス可能なウェブサーバーで HbbTV アプリケーションをホストします。
• タイプが連続広告配信マニフェストのライブ配信イベント。イベントを作成するには、ダイナミック広告挿入用のライブ配信を設定するをご覧ください。

互換性のあるブロードキャスト ストリームを作成する

HbbTV アプリは broadcastContainer.addStreamEventListener() を使用して、ブロードキャスト ストリーム内の HbbTV ストリーム イベントをリッスンします。広告を正しく読み込んで再生するには、関連する JSON 文字列ペイロードを含めるように、次のイベント タイプでブロードキャスト ストリームを設定する必要があります。

• AD_BREAK_EVENT_ANNOUNCE - {"type":"adBreakAnnounce", "pod_id":1,"duration":90, "offset":10}
• AD_BREAK_EVENT_START～{"type":"adBreakStart"}
• AD_BREAK_EVENT_END～{"type":"adBreakEnd"}

これらのイベントでは、streamEvent.type を含む JSON 文字列ペイロードを含めます。広告のプリロードをサポートするには、AD_BREAK_EVENT_ANNOUNCE イベントに streamEvent.duration と streamEvent.offset を含める必要があります。詳しくは、HbbTV ストリーム イベントをリッスンするをご覧ください。ブロードキャスト ストリームを設定するには、多重化された MPEG トランスポート ストリームの例をご覧ください。サンプル ストリームを使用するには、独自のストリーム設定に合わせてアプリケーション情報テーブルの URL を更新する必要があります。

Pod 配信ライブ ストリーム イベントを作成する

HbbTV アプリに広告を配信するには、ライブ配信イベントを配信するポッドが必要です。イベントの設定については、ダイナミック広告挿入用のライブ ストリームを設定するをご覧ください。設定したストリームにアクセスするには、アプリに次の変数が必要です。

• NETWORK_CODE: 広告をリクエストするためのアド マネージャー ネットワーク コード。
• CUSTOM_ASSET_KEY: DAI のライブ配信の設定プロセス中に生成されるアド マネージャーのカスタム アセットキー。

アプリケーション ファイル構造を作成する

このガイドでは、IMA HbbTV サンプルアプリと同様のファイル構造を使用します。このガイドに沿って作業するには、次のファイルを作成します。

• index.html: アプリの HTML インデックス。
• Style.css: アプリの CSS スタイル設定。
• application.js: メイン JS エントリ ポイント。再生状態と広告ブレークを管理します。
• video_player.js: 広告再生に使用される dash.js プレーヤーを管理します。
• ads_manager.js: IMA の設定、ストリーム リクエスト、イベント処理を管理します。

ads_manager.js は IMA DAI SDK を設定します。次のコンポーネントは IMA DAI SDK を実装します。

• PodStreamRequest: Google の広告サーバーへのストリーム リクエストを定義するオブジェクト。
• StreamManager: ダイナミック広告挿入ストリームと DAI バックエンドとのやり取りを処理するオブジェクト。ストリーム マネージャーは、トラッキング ping を処理し、ストリーム イベントと広告イベントをパブリッシャーに転送します。

テスト環境の設定手順について詳しくは、HbbTV アプリケーションの実行に関するガイドをご覧ください。

IMA DAI SDK と DASH.js を読み込む

ブロードキャスト広告ストリームの再生を開始するには、IMA DAI SDK と dash.js をアプリに読み込みます。application.js タグの前に、index.html のスクリプトタグを使用して dash.js と IMA フレームワークを追加します。

<script src="https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
index.html

次に、dash.js プレーヤーを初期化して制御する動画プレーヤー ラッパー クラスを作成します。