IMA DAI SDK는 최소 HbbTV 동영상 플레이어 앱으로의 통합을 지원합니다. IMA DAI SDK를 사용하면 광대역 광고 스트림이 방송 콘텐츠 스트림과 함께 제공되도록 Google Ad Manager 요청을 사용 설정할 수 있습니다. 이 가이드에서는 방송 스트림의 광고 이벤트 데이터를 기반으로 광고 매니페스트를 로드하는 방법을 설명합니다.
미디어 재생을 위해 방송 객체와 상호작용하는 HbbTV 앱 자세한 내용은 HbbTV 방송 AV 객체를 참고하세요.
미리 로드를 지원하는 dash.js 버전 버전 4.6.0 이상을 사용하는 것이 좋습니다.
애플리케이션을 호스팅하는 웹 서버
DVB 브로드캐스트 스트림이 있는 테스트 환경 테스트 환경 설정에 관한 자세한 안내는 HbbTV 애플리케이션 실행을 참고하세요.
브로드캐스트 스트림: 맞춤 애플리케이션 정보 표 (AIT) 데이터가 포함된 브로드캐스트 스트림을 준비합니다. 또한 TV에서 수신할 수 있도록 방송 스트림을 전송하는 방법도 필요합니다. DVB 변조기를 사용하여 브로드캐스트 스트림을 전송하거나 다른 방법을 사용할 수 있습니다.
HbbTV 앱은 broadcastContainer.addStreamEventListener()를 사용하여 브로드캐스트 스트림에서 HbbTV 스트림 이벤트를 수신 대기합니다. 광고를 올바르게 로드하고 재생하려면 연결된 JSON 문자열 페이로드를 포함하도록 다음 이벤트 유형으로 브로드캐스트 스트림을 설정해야 합니다.
이러한 이벤트의 경우 streamEvent.type을 사용하여 JSON 문자열 페이로드를 포함합니다. 광고 미리 로드를 지원하려면 AD_BREAK_EVENT_ANNOUNCE 이벤트에 streamEvent.duration 및 streamEvent.offset가 포함되어야 합니다. 자세한 내용은 HbbTV 스트림 이벤트 수신 대기를 참고하세요.
브로드캐스트 스트림을 설정하려면 다중화된 MPEG 전송 스트림 예시를 참고하세요.
예시 스트림을 사용하려면 자체 스트림 설정을 위해 애플리케이션 정보 표 URL을 업데이트해야 합니다.
라이브 스트림 이벤트를 제공하는 포드 만들기
HbbTV 앱에 광고를 게재하려면 광고 모음 게재 라이브 스트림 이벤트가 필요합니다. 이벤트 설정에 관한 자세한 내용은 DAI용 라이브 스트림 설정하기를 참고하세요.
설정한 스트림에 액세스하려면 앱에 다음 변수가 있어야 합니다.
NETWORK_CODE: 광고 요청에 사용되는 Ad Manager 네트워크 코드입니다.
CUSTOM_ASSET_KEY: DAI용 라이브 스트림을 설정하는 과정에서 생성된 Ad Manager 커스텀 애셋 키입니다.
애플리케이션 파일 구조 만들기
이 가이드에서는 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를 구현합니다.
[null,null,["최종 업데이트: 2025-08-31(UTC)"],[[["\u003cp\u003eThis guide provides instructions on integrating the IMA DAI SDK into an HbbTV video player application for dynamic ad insertion.\u003c/p\u003e\n"],["\u003cp\u003ePrerequisites include an Ad Manager 360 Advanced account, an HbbTV app, a compatible dash.js version, a web server, and a testing environment with a DVB broadcast stream.\u003c/p\u003e\n"],["\u003cp\u003eThe broadcast stream needs specific event types with JSON payloads for ad break announcements, starts, and ends to trigger ad insertion.\u003c/p\u003e\n"],["\u003cp\u003eA pod serving livestream event is required in Ad Manager to deliver ads to the HbbTV app.\u003c/p\u003e\n"],["\u003cp\u003eThe integration process involves creating the application file structure, loading the IMA DAI SDK and dash.js, and setting up the stream request and ad management.\u003c/p\u003e\n"]]],[],null,["The IMA DAI SDK supports integration into a minimal HbbTV video player app. The\nIMA DAI SDK enables Google Ad Manager demand for a broadband ad stream to\naccompany a broadcast content stream. This guide covers\n[loading an ad manifest](/ad-manager/dynamic-ad-insertion/sdk/html5/TODO_link_to_ad_pod_manifest)\nbased on ad event data from the broadcast stream.\n\nTo view or follow along with a completed sample integration, download the\n[HbbTV Linear Sample App with IMA HTML5 DAI SDK](//github.com/googleads/googleads-ima-html5-dai/tree/main/hbbtv).\nTo support older TV devices, this guide and the GitHub sample app are in ES5\nJavaScript.\n| **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](//github.com/Dash-Industry-Forum/dash.js/) for the video player.\n\nFor information on integrating with other non-HbbTV platforms, see\n[Interactive Media Ads SDKs](/interactive-media-ads).\n\nPrerequisites\n\nBefore continuing with this guide, confirm you have the following:\n\n- To use IMA DAI, you must have an [Ad Manager 360 Advanced](//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](//support.google.com/admanager/answer/7084151).\n- An HbbTV app interacting with the broadcast object for media playback. For more details, see [HbbTV Broadcast AV object](//developer.hbbtv.org/guide/broadcast-video-control/handling-the-broadcast-av-object/).\n- A dash.js version that supports preloading. We recommend using version 4.6.0 or later.\n- A web server to host the application.\n- A testing environment with a DVB broadcast stream. For detailed instructions on setting up your testing environment, see [Running an HbbTV application](//developer.hbbtv.org/tutorials/running-a-hbbtv-application-on-a-hybrid-terminal/).\n - **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.\n - **Web Server**: Host the HbbTV application on a web server accessible by the TV.\n- A livestream event with type **Pod serving manifest** . To create the event, see [Set up a livestream for DAI](//support.google.com/admanager/answer/7294289).\n\nCreate a compatible broadcast stream\n\nYour HbbTV app uses `broadcastContainer.addStreamEventListener()` to listen\nto HbbTV stream events in your broadcast stream. To properly load and play ads,\nyou must set up your broadcast stream with the following event types to\ninclude the associated JSON string payload:\n\n- `AD_BREAK_EVENT_ANNOUNCE` - `{\"type\":\"adBreakAnnounce\", \"pod_id\":1,\"duration\":90, \"offset\":10}`\n- `AD_BREAK_EVENT_START` - `{\"type\":\"adBreakStart\"}`\n- `AD_BREAK_EVENT_END` - `{\"type\":\"adBreakEnd\"}`\n\nFor these events, include a JSON string payload with `streamEvent.type`. To\nsupport ad preloading, the `AD_BREAK_EVENT_ANNOUNCE` event must include\n`streamEvent.duration` and `streamEvent.offset`. For more information, see\n[Listen to HbbTV stream events](/ad-manager/dynamic-ad-insertion/sdk/html5/hbbtv-application#listen_to_hbbtv_stream_events).\nTo set up your broadcast stream, see the example\n[multiplexed MPEG transport stream](https://storage.googleapis.com/interactive-media-ads/media/ima-hbbtv-sample-transfer-stream.ts).\nTo use the example stream, you must update the application information table URL\nfor your own stream setup.\n\nCreate a pod serving livestream event\n\nTo serve ads to your HbbTV app, you need a pod serving livestream event. For\ninformation on setting up the event, see\n[Set up a livestream for DAI](//support.google.com/admanager/answer/7294289).\nTo access the stream you set up, the app must have the following variables:\n\n- `NETWORK_CODE`: The Ad Manager network code for requesting ads.\n- `CUSTOM_ASSET_KEY`: The Ad Manager custom asset key generated during the process of setting up the livestream for DAI.\n\nCreate the application file structure\n\nThis guide uses a similar file structure to the\n[IMA HbbTV sample app](//github.com/googleads/googleads-ima-html5-dai/tree/main/hbbtv).\nTo follow along with this guide, create the following files:\n\n- `index.html`: HTML index for your app.\n- `Style.css`: CSS styling for your app.\n- `application.js`: Main JS entry point. Manages playstate and ad breaks.\n- `video_player.js`: Manages the dash.js player used for ad playback.\n- `ads_manager.js`: Manages the IMA setup, stream request, and event handling.\n\n`ads_manager.js` sets up the IMA DAI SDK. The following components implement the\nIMA DAI SDK:\n\n- [`PodStreamRequest`](/ad-manager/dynamic-ad-insertion/sdk/html5/reference/js/PodStreamRequest): An object that defines a stream request to Google's advertising servers.\n- [`StreamManager`](/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.\n\nFor detailed instructions on setting up your testing environment, refer to this\nguide on [running an HbbTV application](//developer.hbbtv.org/tutorials/running-a-hbbtv-application-on-a-hybrid-terminal/).\n\nLoad the IMA DAI SDK and DASH.js\n\nTo begin broadcast ad stream playback, load the IMA DAI SDK and dash.js into\nyour app. Before the `application.js` tag, add dash.js and the IMA framework\nusing script tags in `index.html`. \n\n \u003cscript src=\"https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"//imasdk.googleapis.com/js/sdkloader/ima3_dai.js\"\u003e\u003c/script\u003e \n https://github.com/googleads/googleads-ima-html5-dai/blob/d215db4a053d12c842e899da470684142ff732f6/hbbtv/index.html#L23-L24\n\nNext, create a video player wrapper class to initiate and control the dash.js\nplayer."]]
