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 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. To support older TV devices, this guide and the GitHub sample app are in ES5 JavaScript.
For information on integrating with other non-HbbTV platforms, see Interactive Media Ads SDKs.
Prerequisites
Before continuing with this guide, ensure you have the following:
- To use IMA DAI, you must have an Ad Manager 360 Advanced 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.
- An HbbTV app interacting with the broadcast object for media playback. For more details, see HbbTV 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.
- 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.
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.
To set up your broadcast stream, see the example
multiplexed MPEG transport stream.
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. 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. To follow along with this guide, ensure you 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: An object that defines a stream request to Google's advertising servers.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.
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.
<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>
Next, create a video player wrapper class to initiate and control the dash.js player.