El SDK de IMA DAI admite la integración en una app de reproductor de video de HbbTV mínima. El SDK de IMA DAI habilita la demanda de Google Ad Manager para que una transmisión de anuncios de banda ancha acompañe una transmisión de contenido de emisión. En esta guía, se explica cómo cargar un manifiesto de anuncios en función de los datos de eventos de anuncios de la transmisión de la emisión.
Para ver o seguir una integración de muestra completa, descarga la app de muestra lineal de HbbTV con el SDK de DAI de IMA HTML5. Para admitir dispositivos de TV más antiguos, esta guía y la app de ejemplo de GitHub están en JavaScript ES5.
Para obtener información sobre la integración con otras plataformas que no son de HbbTV, consulta los SDKs de Interactive Media Ads.
Requisitos previos
Antes de continuar con esta guía, confirma que tienes lo siguiente:
- Para usar la DAI de IMA, debes tener una cuenta de Ad Manager 360 Advanced. Si tienes una cuenta de Ad Manager, comunícate con tu administrador de cuentas para obtener más detalles. Para obtener información sobre cómo registrarte en Ad Manager, visita el Centro de ayuda de Ad Manager.
- Una app de HbbTV que interactúa con el objeto de transmisión para la reproducción de contenido multimedia. Para obtener más detalles, consulta Objeto AV de transmisión de HbbTV.
- Una versión de dash.js que admita la carga previa. Te recomendamos que uses la versión 4.6.0 o una posterior.
- Un servidor web para alojar la aplicación
- Un entorno de pruebas con una transmisión de DVB. Para obtener instrucciones detalladas sobre cómo configurar tu entorno de pruebas, consulta Cómo ejecutar una aplicación de HbbTV.
- Broadcast Stream: Prepara una transmisión de emisión que contenga datos personalizados de la tabla de información de la aplicación (AIT). También necesitas una forma de transmitir el flujo de emisión para que la TV lo reciba. Puedes usar un modulador de DVB para transmitir la transmisión o usar otros métodos.
- Servidor web: Aloja la aplicación de HbbTV en un servidor web al que pueda acceder la TV.
- Es un evento de transmisión en vivo con el tipo Manifiesto de publicación de grupos de anuncios. Para crear el evento, consulta Cómo configurar una transmisión en vivo para DAI.
Crea una transmisión compatible
Tu app de HbbTV usa broadcastContainer.addStreamEventListener() para escuchar los eventos de transmisión de HbbTV en tu transmisión. Para cargar y reproducir anuncios correctamente, debes configurar tu transmisión en vivo con los siguientes tipos de eventos para incluir la carga útil de la cadena JSON asociada:
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"}
Para estos eventos, incluye una carga útil de cadena JSON con streamEvent.type. Para admitir la precarga de anuncios, el evento AD_BREAK_EVENT_ANNOUNCE debe incluir streamEvent.duration y streamEvent.offset. Para obtener más información, consulta Cómo escuchar eventos de transmisión de HbbTV.
Para configurar tu transmisión de emisión, consulta el ejemplo de transmisión de transporte MPEG multiplexada.
Para usar el flujo de ejemplo, debes actualizar la URL de la tabla de información de la aplicación para tu propia configuración de transmisión.
Crea un evento de transmisión en vivo con servicio de Pod
Para publicar anuncios en tu app de HbbTV, necesitas un evento de transmisión en vivo de publicación de grupos de anuncios. Para obtener información sobre cómo configurar el evento, consulta Cómo configurar una transmisión en vivo para DAI. Para acceder al flujo que configuraste, la app debe tener las siguientes variables:
NETWORK_CODE: Es el código de red de Ad Manager para solicitar anuncios.CUSTOM_ASSET_KEY: Es la clave de recurso personalizada de Ad Manager que se generó durante el proceso de configuración de la transmisión en vivo para la DAI.
Crea la estructura de archivos de la aplicación
En esta guía, se usa una estructura de archivos similar a la de la app de ejemplo de IMA HbbTV. Para seguir esta guía, crea los siguientes archivos:
index.html: Es el índice HTML de tu app.Style.css: Es el diseño de CSS para tu app.application.js: Es el punto de entrada principal de JS. Administra el estado de reproducción y las pausas publicitarias.video_player.js: Administra el reproductor dash.js que se usa para la reproducción de anuncios.ads_manager.js: Administra la configuración de IMA, la solicitud de transmisión y el control de eventos.
ads_manager.js configura el SDK de IMA DAI. Los siguientes componentes implementan el SDK de IMA DAI:
PodStreamRequest: Objeto que define una solicitud de transmisión a los servidores de anuncios de Google.StreamManager: Es un objeto que controla las transmisiones de inserción de anuncios dinámicos y las interacciones con el backend de la DAI. El administrador de transmisiones también controla los pings de seguimiento y reenvía los eventos de transmisión y de anuncios al publicador.
Para obtener instrucciones detalladas sobre cómo configurar tu entorno de pruebas, consulta esta guía sobre cómo ejecutar una aplicación de HbbTV.
Carga el SDK de IMA DAI y DASH.js
Para comenzar la reproducción de la transmisión de anuncios de emisión, carga el SDK de DAI de IMA y dash.js en tu app. Antes de la etiqueta application.js, agrega dash.js y el framework de IMA con etiquetas de secuencia de comandos en index.html.
A continuación, crea una clase de wrapper del reproductor de video para iniciar y controlar el reproductor de dash.js.