O SDK de DAI do IMA é compatível com a integração em um app player de vídeo HbbTV mínimo. Ele permite a demanda do Google Ad Manager por um fluxo de anúncios de banda larga para acompanhar um fluxo de conteúdo de transmissão. Este guia aborda o carregamento de um manifesto de anúncio com base nos dados de eventos de anúncios do stream de transmissão.
Para conferir ou acompanhar uma integração de exemplo concluída, baixe o app de exemplo linear do HbbTV com o SDK de DAI HTML5 do IMA. Para oferecer suporte a dispositivos de TV mais antigos, este guia e o app de exemplo do GitHub estão em JavaScript ES5.
Para informações sobre a integração com outras plataformas que não são HbbTV, consulte SDKs do Interactive Media Ads.
Pré-requisitos
Antes de continuar com este guia, confirme se você tem o seguinte:
- Para usar a DAI da IMA, você precisa ter uma conta do Ad Manager 360 Advanced. Se você tiver uma conta do Ad Manager, entre em contato com o gerente dela para mais detalhes. Para saber como se inscrever no Ad Manager, acesse a Central de Ajuda do Ad Manager.
- Um app HbbTV interagindo com o objeto de transmissão para reprodução de mídia. Para mais detalhes, consulte Objeto AV de transmissão HbbTV.
- Uma versão do dash.js que oferece suporte ao pré-carregamento. Recomendamos usar a versão 4.6.0 ou mais recente.
- Um servidor da Web para hospedar o aplicativo.
- Um ambiente de teste com um fluxo de transmissão DVB. Para instruções detalhadas
sobre como configurar seu ambiente de teste, consulte
Executar um aplicativo HbbTV.
- Transmissão de broadcast: prepare uma transmissão de broadcast com dados personalizados da tabela de informações do aplicativo (AIT, na sigla em inglês). Você também precisa de uma maneira de transmitir o stream de transmissão para recepção pela TV. É possível usar um modulador DVB para transmitir o fluxo de transmissão ou outros métodos.
- Servidor da Web: hospede o aplicativo HbbTV em um servidor da Web acessível pela TV.
- Um evento de transmissão ao vivo do tipo Manifesto de veiculação de conjunto. Para criar o evento, consulte Configurar uma transmissão ao vivo para DAI.
Criar um stream de transmissão compatível
O app HbbTV usa broadcastContainer.addStreamEventListener() para detectar
eventos de stream HbbTV no seu stream de transmissão. Para carregar e veicular anúncios corretamente,
configure seu stream de transmissão com os seguintes tipos de eventos para
incluir o payload de string JSON associado:
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 esses eventos, inclua um payload de string JSON com streamEvent.type. Para
permitir o pré-carregamento de anúncios, o evento AD_BREAK_EVENT_ANNOUNCE precisa incluir
streamEvent.duration e streamEvent.offset. Para mais informações, consulte
Detectar eventos de stream do HbbTV.
Para configurar seu fluxo de transmissão, consulte o exemplo de
fluxo de transporte MPEG multiplexado.
Para usar o stream de exemplo, atualize o URL da tabela de informações do aplicativo
para sua própria configuração de stream.
Criar um evento de transmissão ao vivo de veiculação de pod
Para veicular anúncios no seu app HbbTV, você precisa de um evento de transmissão ao vivo com veiculação de pod. Para informações sobre como configurar o evento, consulte Configurar uma transmissão ao vivo para DAI. Para acessar o stream configurado, o app precisa ter as seguintes variáveis:
NETWORK_CODE: o código de rede do Ad Manager para solicitar anúncios.CUSTOM_ASSET_KEY: a chave de recurso personalizada do Ad Manager gerada durante o processo de configuração da transmissão ao vivo para DAI.
Criar a estrutura de arquivos do aplicativo
Este guia usa uma estrutura de arquivos semelhante ao app de exemplo HbbTV da IMA. Para acompanhar este guia, crie os seguintes arquivos:
index.html: índice HTML do seu app.Style.css: estilo CSS para seu app.application.js: ponto de entrada principal do JS. Gerencia o estado de reprodução e os intervalos de anúncios.video_player.js: gerencia o player dash.js usado para reprodução de anúncios.ads_manager.js: gerencia a configuração da IMA, a solicitação de stream e o processamento de eventos.
O ads_manager.js configura o SDK DAI do IMA. Os seguintes componentes implementam o SDK de DAI da IMA:
PodStreamRequest: um objeto que define uma solicitação de stream para os servidores de publicidade do Google.StreamManager: um objeto que processa streams de inserção de anúncios dinâmicos e interações com o back-end da DAI. O gerenciador de stream também processa pings de rastreamento e encaminha eventos de stream e de anúncio ao publisher.
Para instruções detalhadas sobre como configurar seu ambiente de teste, consulte este guia sobre execução de um aplicativo HbbTV.
Carregar o SDK DAI do IMA e o DASH.js
Para iniciar a reprodução do stream de anúncios de transmissão, carregue o SDK da DAI do IMA e o dash.js no
seu app. Antes da tag application.js, adicione o dash.js e a estrutura do IMA
usando tags de script em index.html.
Em seguida, crie uma classe wrapper do player de vídeo para iniciar e controlar o player dash.js.