To discuss and provide feedback on our products, join the official Ad Manager Discord channel in the Google Advertising and Measurement Community server.

Build the application class

Page Summary

To integrate DAI into your HbbTV app, you must first create the main application class, initialize it, and set up the broadcast manager and container.
Make an IMA stream request within the onPlayStateChangeEvent() method, triggered when the app switches to the PRESENTING_PLAYSTATE .
Implement the onStreamEvent() method to listen for ad break events such as adBreakAnnounce , adBreakStart , and adBreakEnd .
Handle these ad break events by creating specific methods to load the ad pod manifest, switch to ad stream playback, and return to the content broadcast.

In application.js , create the main class for your HbbTV app that interacts with the HbbTV broadcast. This class interacts with the broadcastAppManager and broadcastContainer . For an example of a similar class, see Handling the broadcast a/v object .

Modify this base HbbTV app to request an IMA stream and respond to ad break events.

Initialize the application

Initialize the application class in application.js , set up the broadcastAppManager , and broadcastContainer following the tutorial, Handling the broadcast a/v object . Afterwards, initiate new VideoPlayer and AdManager objects.

  /** Main HbbTV Application. */ 
 var 
  
 HbbTVApp 
  
 = 
  
 function 
 () 
  
 { 
  
 this 
 . 
 broadcastAppManager 
  
 = 
  
 document 
 . 
 getElementById 
 ( 
 'broadcast-app-manager' 
 ); 
  
 this 
 . 
 broadcastContainer 
  
 = 
  
 document 
 . 
 getElementById 
 ( 
 'broadcast-video' 
 ); 
  
 this 
 . 
 playState 
  
 = 
  
 - 
 1 
 ; 
  
 // -1 as null play state. 
  
 try 
  
 { 
  
 this 
 . 
 applicationManager 
  
 = 
  
 this 
 . 
 broadcastAppManager 
 . 
 getOwnerApplication 
 ( 
 document 
 ); 
  
 this 
 . 
 applicationManager 
 . 
 show 
 (); 
  
 this 
 . 
 broadcastContainer 
 . 
 bindToCurrentChannel 
 (); 
  
 this 
 . 
 subscribedToStreamEvents 
  
 = 
  
 false 
 ; 
  
 this 
 . 
 broadcastContainer 
 . 
 addEventListener 
 ( 
  
 'PlayStateChange' 
 , 
  
 this 
 . 
 onPlayStateChangeEvent 
 . 
 bind 
 ( 
 this 
 )); 
  
 debugView 
 . 
 log 
 ( 
 'HbbTVApp: App loaded' 
 ); 
  
 this 
 . 
 videoPlayer 
  
 = 
  
 new 
  
 VideoPlayer 
 (); 
  
 this 
 . 
 videoPlayer 
 . 
 setOnAdPodEnded 
 ( 
 this 
 . 
 resumeBroadcast 
 . 
 bind 
 ( 
 this 
 )); 
  
 } 
  
 catch 
  
 ( 
 e 
 ) 
  
 { 
  
 debugView 
 . 
 log 
 ( 
 'HbbTVApp: No HbbTV device detected.' 
 ); 
  
 return 
 ; 
  
 } 
  
 this 
 . 
 adManager 
  
 = 
  
 new 
  
 AdManager 
 ( 
 this 
 . 
 videoPlayer 
 ); 
 }; 
   application 
 . 
 js

Make an IMA stream request

In the HbbTVApp.onPlayStateChangeEvent() method, make a stream request in response to the app switching to the PRESENTING_PLAYSTATE . This approach prepares your app to load the ad pod manifest in response to an AD_BREAK_EVENT_ANNOUNCE event.

  if 
  
 ( 
 ! 
 this 
 . 
 subscribedToStreamEvents 
  
&&  
 this 
 . 
 broadcastContainer 
 . 
 playState 
  
 == 
  
 PRESENTING_PLAYSTATE 
 ) 
  
 { 
  
 this 
 . 
 subscribedToStreamEvents 
  
 = 
  
 true 
 ; 
  
 this 
 . 
 broadcastContainer 
 . 
 addStreamEventListener 
 ( 
  
 STREAM_EVENT_URL 
 , 
  
 'eventItem' 
 , 
  
 function 
 ( 
 event 
 ) 
  
 { 
  
 this 
 . 
 onStreamEvent 
 ( 
 event 
 ); 
  
 }. 
 bind 
 ( 
 this 
 )); 
  
 debugView 
 . 
 log 
 ( 
 'HbbTVApp: Subscribing to stream events.' 
 ); 
  
 this 
 . 
 adManager 
 . 
 requestStream 
 ( 
 NETWORK_CODE 
 , 
  
 CUSTOM_ASSET_KEY 
 ); 
 } 
   application 
 . 
 js

If your device doesn't correctly emit the broadcast container PlayStateChange event, use the setInterval() function to check for playstate changes:

  setInterval 
 ( 
 function 
 () 
  
 { 
  
 if 
  
 ( 
 ! 
 subscribedToStreamEvents 
  
&&  
 this 
 . 
 broadcastContainer 
 . 
 playState 
  
 == 
  
 PRESENTING_PLAYSTATE 
 ) 
  
 { 
  
 subscribedToStreamEvents 
  
 = 
  
 true 
 ; 
  
 this 
 . 
 broadcastContainer 
 . 
 addStreamEventListener 
 ( 
  
 STREAM_EVENT_URL 
 , 
  
 'eventItem' 
 , 
  
 function 
 ( 
 event 
 ) 
  
 { 
  
 this 
 . 
 onStreamEvent 
 ( 
 event 
 ); 
  
 }. 
 bind 
 ( 
 this 
 )); 
  
 debugView 
 . 
 log 
 ( 
 'Subscribing to stream events' 
 ); 
  
 this 
 . 
 adManager 
 . 
 requestStream 
 ( 
 NETWORK_CODE 
 , 
  
 CUSTOM_ASSET_KEY 
 ); 
  
 } 
  
 …

Listen to HbbTV stream events

Create the HbbTVApp.onStreamEvent() method to listen to the ad break events adBreakAnnounce , adBreakStart , and adBreakEnd :

  /** 
 * Callback for HbbTV stream event. 
 * @param {!Event} event Stream event payload. 
 */ 
 HbbTVApp 
 . 
 prototype 
 . 
 onStreamEvent 
  
 = 
  
 function 
 ( 
 event 
 ) 
  
 { 
  
 var 
  
 eventData 
  
 = 
  
 JSON 
 . 
 parse 
 ( 
 event 
 . 
 text 
 ); 
  
 var 
  
 eventType 
  
 = 
  
 eventData 
 . 
 type 
 ; 
  
 if 
  
 ( 
 eventType 
  
 == 
  
 AD_BREAK_EVENT_ANNOUNCE 
 ) 
  
 { 
  
 this 
 . 
 onAdBreakAnnounce 
 ( 
 eventData 
 ); 
  
 } 
  
 else 
  
 if 
  
 ( 
 eventType 
  
 == 
  
 AD_BREAK_EVENT_START 
 ) 
  
 { 
  
 this 
 . 
 onAdBreakStart 
 ( 
 eventData 
 ); 
  
 } 
  
 else 
  
 if 
  
 ( 
 eventType 
  
 == 
  
 AD_BREAK_EVENT_END 
 ) 
  
 { 
  
 this 
 . 
 onAdBreakEnd 
 ( 
 eventData 
 ); 
  
 } 
 }; 
   application 
 . 
 js

Handle the HbbTV stream events

To handle the HbbTV stream events, complete the following steps:

To load the ad pod manifest in response to the adBreakAnnounce event, create the HbbTVApp.onAdBreakAnnounce() method:

  /** 
 * Callback function on ad break announce stream event. 
 * @param {!Event} event HbbTV stream event payload. 
 */ 
 HbbTVApp 
 . 
 prototype 
 . 
 onAdBreakAnnounce 
  
 = 
  
 function 
 ( 
 event 
 ) 
  
 { 
  
 var 
  
 eventType 
  
 = 
  
 event 
 . 
 type 
 ; 
  
 var 
  
 eventDuration 
  
 = 
  
 event 
 . 
 duration 
 ; 
  
 var 
  
 eventOffset 
  
 = 
  
 event 
 . 
 offset 
 ; 
  
 debugView 
 . 
 log 
 ( 
  
 'HbbTV event: ' 
  
 + 
  
 eventType 
  
 + 
  
 ' duration: ' 
  
 + 
  
 eventDuration 
  
 + 
  
 's offset: ' 
  
 + 
  
 eventOffset 
  
 + 
  
 's' 
 ); 
  
 this 
 . 
 adManager 
 . 
 loadAdPodManifest 
 ( 
 NETWORK_CODE 
 , 
  
 CUSTOM_ASSET_KEY 
 , 
  
 eventDuration 
 ); 
 }; 
   application 
 . 
 js

To switch to ad stream playback during ad breaks, create the HbbTVApp.onAdBreakStart() method:

  /** 
 * Callback function on ad break start stream event. 
 * @param {!Event} event HbbTV stream event payload. 
 */ 
 HbbTVApp 
 . 
 prototype 
 . 
 onAdBreakStart 
  
 = 
  
 function 
 ( 
 event 
 ) 
  
 { 
  
 debugView 
 . 
 log 
 ( 
 'HbbTV event: ' 
  
 + 
  
 event 
 . 
 type 
 ); 
  
 if 
  
 ( 
 ! 
 this 
 . 
 videoPlayer 
 . 
 isPreloaded 
 ()) 
  
 { 
  
 debugView 
 . 
 log 
 ( 
 'HbbTVApp: Switch aborted. ' 
  
 + 
  
 'The ad preloading buffer is insufficient.' 
 ); 
  
 return 
 ; 
  
 } 
  
 this 
 . 
 stopBroadcast 
 (); 
  
 this 
 . 
 videoPlayer 
 . 
 play 
 (); 
 }; 
   application 
 . 
 js

To return to the content broadcast, create the HbbTVApp.onAdBreakEnd() method:

  /** 
 * Callback function on ad break end stream event. 
 * @param {!Event} event HbbTV stream event payload. 
 */ 
 HbbTVApp 
 . 
 prototype 
 . 
 onAdBreakEnd 
  
 = 
  
 function 
 ( 
 event 
 ) 
  
 { 
  
 debugView 
 . 
 log 
 ( 
 'HbbTV event: ' 
  
 + 
  
 event 
 . 
 type 
 ); 
  
 this 
 . 
 videoPlayer 
 . 
 stop 
 (); 
  
 this 
 . 
 resumeBroadcast 
 (); 
 }; 
   application 
 . 
 js

You're now requesting and displaying IMA SDK ad pods in your HbbTV app. To compare your app with a completed sample app, see the IMA HbbTV sample on GitHub .

Create the ads manager class