L'SDK IMA DAI supporta l'integrazione in un'app video player HbbTV minima. L'SDK IMA DAI consente la domanda di Google Ad Manager per uno stream di annunci a banda larga da accompagnare a uno stream di contenuti di trasmissione. Questa guida illustra il caricamento di un manifest dell'annuncio in base ai dati sugli eventi pubblicitari dello stream di trasmissione.
Per visualizzare o seguire un'integrazione di esempio completata, scarica l'app di esempio lineare HbbTV con l'SDK DAI per HTML5 di IMA. Per supportare i dispositivi TV meno recenti, questa guida e l'app di esempio GitHub sono in ES5 JavaScript.
Per informazioni sull'integrazione con altre piattaforme non HbbTV, consulta SDK Interactive Media Ads.
Prerequisiti
Prima di continuare con questa guida, verifica di disporre di quanto segue:
- Per utilizzare IMA DAI, devi disporre di un account Ad Manager 360 Advanced. Se hai un account Ad Manager, contatta il tuo account manager per maggiori dettagli. Per informazioni sulla registrazione ad Ad Manager, visita il Centro assistenza Ad Manager.
- Un'app HbbTV che interagisce con l'oggetto di trasmissione per la riproduzione dei contenuti multimediali. Per maggiori dettagli, consulta la pagina Oggetto HbbTV Broadcast AV.
- Una versione di dash.js che supporti il precaricamento. Ti consigliamo di utilizzare la versione 4.6.0 o successive.
- Un server web per ospitare l'applicazione.
- Un ambiente di test con uno stream di trasmissione DVB. Per istruzioni dettagliate
sulla configurazione dell'ambiente di test, vedi
Esecuzione di un'applicazione HbbTV.
- Stream di trasmissione: prepara uno stream di trasmissione contenente dati personalizzati della tabella delle informazioni sull'applicazione (AIT). Inoltre, devi disporre di un modo per trasmettere il flusso di trasmissione per la ricezione da parte della TV. Puoi utilizzare un modulatore DVB per trasmettere lo stream di trasmissione o altri metodi.
- Server web: ospita l'applicazione HbbTV su un server web accessibile dalla TV.
- Un evento in live streaming di tipo Manifest pubblicazione pod. Per creare l'evento, vedi Configurare un live streaming per DAI.
Creare uno stream di trasmissione compatibile
La tua app HbbTV utilizza broadcastContainer.addStreamEventListener() per ascoltare
gli eventi di streaming HbbTV nel tuo stream di trasmissione. Per caricare e riprodurre correttamente gli annunci,
devi configurare il flusso di trasmissione con i seguenti tipi di eventi per
includere il payload della stringa JSON associata:
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"}
Per questi eventi, includi un payload di stringa JSON con streamEvent.type. Per
supportare il precaricamento degli annunci, l'evento AD_BREAK_EVENT_ANNOUNCE deve includere
streamEvent.duration e streamEvent.offset. Per maggiori informazioni, vedi
Ascoltare gli eventi di streaming HbbTV.
Per configurare il flusso di trasmissione, consulta l'esempio di
flusso di trasporto MPEG multiplexato.
Per utilizzare lo stream di esempio, devi aggiornare l'URL della tabella delle informazioni sull'applicazione
per la configurazione del tuo stream.
Creare un evento di live streaming con pod di pubblicità
Per pubblicare annunci nella tua app HbbTV, devi disporre di un evento in live streaming di pubblicazione pod. Per informazioni sulla configurazione dell'evento, consulta Configurare un live streaming per DAI. Per accedere allo stream che hai configurato, l'app deve avere le seguenti variabili:
NETWORK_CODE: il codice di rete Ad Manager per la richiesta di annunci.CUSTOM_ASSET_KEY: la chiave asset personalizzata di Ad Manager generata durante la procedura di configurazione del live streaming per DAI.
Crea la struttura dei file dell'applicazione
Questa guida utilizza una struttura di file simile a quella dell'app di esempio IMA HbbTV. Per seguire questa guida, crea i seguenti file:
index.html: indice HTML per la tua app.Style.css: stili CSS per la tua app.application.js: punto di ingresso principale di JS. Gestisce lo stato di riproduzione e le interruzioni pubblicitarie.video_player.js: gestisce il player dash.js utilizzato per la riproduzione degli annunci.ads_manager.js: gestisce la configurazione di IMA, la richiesta di stream e la gestione degli eventi.
ads_manager.js configura l'SDK IMA DAI. I seguenti componenti implementano l'SDK IMA DAI:
PodStreamRequest: Un oggetto che definisce una richiesta di stream ai server pubblicitari di Google.StreamManager: Un oggetto che gestisce i flussi di inserimento di annunci dinamici e le interazioni con il backend DAI. Stream Manager gestisce anche i ping di monitoraggio e inoltra gli eventi di stream e annuncio al publisher.
Per istruzioni dettagliate sulla configurazione dell'ambiente di test, consulta questa guida sull'esecuzione di un'applicazione HbbTV.
Carica l'SDK IMA DAI e DASH.js
Per iniziare la riproduzione del flusso di annunci della trasmissione, carica l'SDK IMA DAI e dash.js nella tua app. Prima del tag application.js, aggiungi dash.js e il framework IMA utilizzando i tag script in index.html.
Successivamente, crea una classe wrapper del video player per avviare e controllare il player dash.js.