The IMA DAI SDK supports integration into a minimal HbbTV video player app. The
IMA DAI SDK enables Google Ad Manager demand for a broadband ad stream to
accompany a broadcast content stream. This guide covers
[loading an ad manifest](https://developers.google.com/ad-manager/dynamic-ad-insertion/sdk/html5/TODO_link_to_ad_pod_manifest)
based on ad event data from the broadcast stream.
To view or follow along with a completed sample integration, download the
[HbbTV Linear Sample App with IMA HTML5 DAI SDK](https://github.com/googleads/googleads-ima-html5-dai/tree/main/hbbtv).
To support older TV devices, this guide and the GitHub sample app are in ES5
JavaScript.
> [!NOTE]
> **Note:** The IMA DAI SDK for HTML5 supports ad pod manifests, and requires a media player with stream preloading support. This guide uses [dash.js](https://github.com/Dash-Industry-Forum/dash.js/) for the video player.
For information on integrating with other non-HbbTV platforms, see
[Interactive Media Ads SDKs](https://developers.google.com/interactive-media-ads).
## Prerequisites
Before continuing with this guide, confirm you have the following:
- To use IMA DAI, you must have an [Ad Manager 360 Advanced](https://support.google.com/admanager/answer/3485387) account. If you have an Ad Manager account, contact your account manager for more details. For information about signing up for Ad Manager, visit the [Ad Manager Help Center](https://support.google.com/admanager/answer/7084151).
- An HbbTV app interacting with the broadcast object for media playback. For more details, see [HbbTV Broadcast AV object](https://developer.hbbtv.org/guide/broadcast-video-control/handling-the-broadcast-av-object/).
- A dash.js version that supports preloading. We recommend using version 4.6.0 or later.
- A web server to host the application.
- A testing environment with a DVB broadcast stream. For detailed instructions on setting up your testing environment, see [Running an HbbTV application](https://developer.hbbtv.org/tutorials/running-a-hbbtv-application-on-a-hybrid-terminal/).
- **Broadcast Stream**: Prepare a broadcast stream containing custom Application Information Table (AIT) data. You also require a way to transmit the broadcast stream for reception by the TV. You can use a DVB modulator to transmit the broadcast stream, or other methods.
- **Web Server**: Host the HbbTV application on a web server accessible by the TV.
- A livestream event with type **Pod serving manifest** . To create the event, see [Set up a livestream for DAI](https://support.google.com/admanager/answer/7294289).
### Create a compatible broadcast stream
Your HbbTV app uses `broadcastContainer.addStreamEventListener()` to listen
to HbbTV stream events in your broadcast stream. To properly load and play ads,
you must set up your broadcast stream with the following event types to
include the associated JSON string payload:
- `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"}`
For these events, include a JSON string payload with `streamEvent.type`. To
support ad preloading, the `AD_BREAK_EVENT_ANNOUNCE` event must include
`streamEvent.duration` and `streamEvent.offset`. For more information, see
[Listen to HbbTV stream events](https://developers.google.com/ad-manager/dynamic-ad-insertion/sdk/html5/hbbtv-application.md.txt#listen_to_hbbtv_stream_events).
To set up your broadcast stream, see the example
[multiplexed MPEG transport stream](https://storage.googleapis.com/interactive-media-ads/media/ima-hbbtv-sample-transfer-stream.ts).
To use the example stream, you must update the application information table URL
for your own stream setup.
### Create a pod serving livestream event
To serve ads to your HbbTV app, you need a pod serving livestream event. For
information on setting up the event, see
[Set up a livestream for DAI](https://support.google.com/admanager/answer/7294289).
To access the stream you set up, the app must have the following variables:
- `NETWORK_CODE`: The Ad Manager network code for requesting ads.
- `CUSTOM_ASSET_KEY`: The Ad Manager custom asset key generated during the process of setting up the livestream for DAI.
## Create the application file structure
This guide uses a similar file structure to the
[IMA HbbTV sample app](https://github.com/googleads/googleads-ima-html5-dai/tree/main/hbbtv).
To follow along with this guide, create the following files:
- `index.html`: HTML index for your app.
- `Style.css`: CSS styling for your app.
- `application.js`: Main JS entry point. Manages playstate and ad breaks.
- `video_player.js`: Manages the dash.js player used for ad playback.
- `ads_manager.js`: Manages the IMA setup, stream request, and event handling.
`ads_manager.js` sets up the IMA DAI SDK. The following components implement the
IMA DAI SDK:
- [`PodStreamRequest`](https://developers.google.com/ad-manager/dynamic-ad-insertion/sdk/html5/reference/js/PodStreamRequest): An object that defines a stream request to Google's advertising servers.
- [`StreamManager`](https://developers.google.com/ad-manager/dynamic-ad-insertion/sdk/html5/reference/js/StreamManager): An object that handles dynamic ad insertion streams and interactions with the DAI backend. The stream manager also handles tracking pings and forwards stream and ad events to the publisher.
For detailed instructions on setting up your testing environment, refer to this
guide on [running an HbbTV application](https://developer.hbbtv.org/tutorials/running-a-hbbtv-application-on-a-hybrid-terminal/).
## Load the IMA DAI SDK and DASH.js
To begin broadcast ad stream playback, load the IMA DAI SDK and dash.js into
your app. Before the `application.js` tag, add dash.js and the IMA framework
using script tags in `index.html`.
```html
```
Next, create a video player wrapper class to initiate and control the dash.js
player.