Configurar o SDK do IMA para DAI

Os SDKs do IMA facilitam a integração de anúncios multimídia aos seus sites e apps. Os SDKs do IMA podem solicitar anúncios de qualquer servidor de anúncios compatível com VAST e gerenciar a veiculação de anúncios nos seus apps. Com os SDKs do IMA DAI, os apps fazem uma solicitação de transmissão para anúncios e vídeos de conteúdo, seja VOD ou conteúdo ao vivo. O SDK retorna um stream de vídeo combinado para que você não precise alternar entre o anúncio e o vídeo de conteúdo no app.

Selecione a solução de DAI de seu interesse

Serviço completo Serviço de pods

DAI de serviço completo

Este guia demonstra como integrar o SDK IMA DAI a um app de player de vídeo. Se você quiser conferir ou seguir uma integração de exemplo completa, faça o download do exemplo simples no GitHub.

Observação:o SDK da DAI do IMA para HTML5 oferece suporte a streams HLS e DASH, mas a reprodução de cada um deles requer um player de mídia ou uma extensão diferente, como HLS.js ou DASH.js, com implementações variadas.

Este guia explica como configurar o HLS.js e o SDK do IMA DAI para reproduzir um stream HLS, com notas importantes sobre as diferenças de implementação do DASH.

Consulte o app de exemplo DASH.js do IMA para saber como começar a implementar transmissões DASH DAI com o IMA.

Para usar o IMA DAI, você precisa ter uma conta do Ad Manager 360 Advanced. Se você tiver uma conta do Ad Manager, entre em contato com seu gerente de contas para saber mais detalhes. Para saber como se inscrever no Ad Manager, acesse a Central de Ajuda do Ad Manager.

Observação:para informações sobre a integração com outras plataformas ou o uso dos SDKs do lado do cliente do IMA, consulte SDKs do Interactive Media Ads.

Visão geral da DAI do IMA

A implementação do SDK do IMA DAI envolve dois componentes principais, conforme demonstrado neste guia:

• StreamRequest: um VODStreamRequest ou um LiveStreamRequest. Um objeto que define uma solicitação de stream. As solicitações de transmissão podem ser para transmissões ao vivo ou de vídeo on demand. As solicitações de transmissão ao vivo especificam uma chave de recurso, enquanto as solicitações de VOD especificam um ID do CMS e um ID de vídeo. Os dois tipos de solicitação podem incluir uma chave de API necessária para acessar streams específicos e um código de rede do Google Ad Manager para que o SDK do IMA gerencie os identificadores de anúncios conforme especificado nas configurações do Google Ad Manager.
• 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 transmissão também processa pings de rastreamento e encaminha eventos de transmissão e de anúncio para o editor.

Pré-requisitos

• Três arquivos vazios
  • dai.html
  • dai.css
  • dai.js
• Python instalado no computador ou um servidor da Web para uso em testes

Iniciar um servidor de desenvolvimento

Como o SDK do IMA DAI carrega dependências usando o mesmo protocolo da página de carregamento, é necessário usar um servidor da Web para testar o app. Uma maneira rápida de iniciar um servidor de desenvolvimento local é usar o servidor integrado do Python.

1. Usando uma linha de comando, no diretório que contém o arquivo index.html, execute:

   python -m http.server 8000

   Observação: http.server está disponível apenas no Python 3.x.

2. Em um navegador da Web, acesse http://localhost:8000/.

   Você também pode usar qualquer outro servidor da Web, como o Apache HTTP Server.

Criar um player de vídeo

Primeiro, modifique dai.html para criar um elemento de vídeo HTML5 e um div para usar no clique. O exemplo a seguir importa o SDK do IMA DAI. Para mais detalhes, consulte Importar o SDK do IMA DAI.

Além disso, adicione as tags necessárias para carregar os arquivos dai.css e dai.js, bem como para importar o player de vídeo hls.js. Em seguida, modifique dai.css para especificar o tamanho e a posição dos elementos da página. Por fim, em dai.js, defina variáveis para armazenar as informações da solicitação de transmissão, uma função initPlayer() para executar quando a página for carregada e configure o botão de reprodução para solicitar uma transmissão ao clicar.

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA SDK DAI Demo (HLS.JS)</h2>
  <video id="video"></video>
  <div id="adUi"></div>
  <button id="play-button">Play</button>
</body>
</html>

dai.html

#video,
#adUi {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#adUi {
  cursor: pointer;
}

#play-button {
  position: absolute;
  top: 400px;
  left: 15px;
}
dai.css

// This stream will be played if ad-enabled playback fails.
const BACKUP_STREAM =
    'http://storage.googleapis.com/testtopbox-public/video_content/bbb/' +
    'master.m3u8';

// Live stream asset key.
// const TEST_ASSET_KEY = 'c-rArva4ShKVIAkNfy6HUQ';

// VOD content source and video IDs.
const TEST_CONTENT_SOURCE_ID = '2548831';
const TEST_VIDEO_ID = 'tears-of-steel';

// Ad Manager network code.
const NETWORK_CODE = '21775744923';
const API_KEY = null;

// StreamManager which will be used to request ad-enabled streams.
let streamManager;

// hls.js video player
const hls = new Hls();

// Video element
let videoElement;

// Ad UI element
let adUiElement;

// The play/resume button
let playButton;

// Whether the stream is currently in an ad break.
let adBreak = false;

/**
 * Initializes the video player.
 */
function initPlayer() {
  videoElement = document.getElementById('video');
  playButton = document.getElementById('play-button');
  adUiElement = document.getElementById('adUi');
  createStreamManager();
  listenForMetadata();

  // Show the video controls when the video is paused during an ad break,
  // and hide them when ad playback resumes.
  videoElement.addEventListener('pause', () => {
    if (adBreak) {
      showVideoControls();
    }
  });
  videoElement.addEventListener('play', () => {
    if (adBreak) {
      hideVideoControls();
    }
  });

  playButton.addEventListener('click', () => {
    console.log('initiatePlayback');
    requestStream();
    // Hide this play button after the first click to request the stream.
    playButton.style.display = 'none';
  });
}
dai.js

Para retomar a reprodução durante os intervalos de anúncios pausados, configure listeners de eventos para os eventos pause e start do elemento de vídeo para mostrar e ocultar os controles do player.

/**
 * Hides the video controls.
 */
function hideVideoControls() {
  videoElement.controls = false;
  adUiElement.style.display = 'block';
}

/**
 * Shows the video controls.
 */
function showVideoControls() {
  videoElement.controls = true;
  adUiElement.style.display = 'none';
}
dai.js

Carregar o SDK do IMA DAI

Em seguida, adicione o framework IMA usando uma tag de script em dai.html, antes da tag para dai.js.

<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
dai.html

Inicializar o StreamManager

Para solicitar um conjunto de anúncios, crie um ima.dai.api.StreamManager, que é responsável por solicitar e gerenciar fluxos de DAI. O construtor usa um elemento de vídeo e um elemento de interface do anúncio para processar cliques em anúncios.

/**
 * Create the StreamManager and listen to stream events.
 */
function createStreamManager() {
  streamManager =
      new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.LOADED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.ERROR, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED, onStreamEvent);
}
dai.js

Fazer uma solicitação de streaming

Defina funções para solicitar transmissões. Esse exemplo inclui funções para VOD e transmissões ao vivo, que criam instâncias das classes VODStreamRequest e LiveStreamRequest. Depois de ter a instância streamRequest, chame o método streamManager.requestStream() com a instância de solicitação de stream.

/**
 * Makes a stream request and plays the stream.
 */
function requestStream() {
  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, NETWORK_CODE, API_KEY);
  // Uncomment line below and comment one above to request a LIVE stream.
  // requestLiveStream(TEST_ASSET_KEY, NETWORK_CODE, API_KEY);
}

/**
 * Requests a Live stream with ads.
 * @param {string} assetKey
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestLiveStream(assetKey, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

/**
 * Requests a VOD stream with ads.
 * @param {string} cmsId
 * @param {string} videoId
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestVODStream(cmsId, videoId, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}
dai.js

Os dois métodos de solicitação de transmissão usam uma chave de API opcional. Se você estiver usando um stream protegido, precisará criar uma chave de autenticação da DAI. Para mais detalhes, consulte Autenticar solicitações de stream de vídeo da DAI. Nenhum dos streams neste exemplo é protegido usando uma chave de autenticação da DAI. Portanto, apiKey não é usado.

Analisar metadados de streaming (somente transmissão ao vivo)

Para transmissões ao vivo, também é necessário adicionar um gerenciador para detectar eventos de metadados temporizados e encaminhar os eventos para a classe StreamManager para que o IMA emita eventos de anúncios durante intervalos de anúncios:

/**
 * Set up metadata listeners to pass metadata to the StreamManager.
 */
function listenForMetadata() {
  // Only used in LIVE streams. Timed metadata is handled differently
  // by different video players, and the IMA SDK provides two ways
  // to pass in metadata, StreamManager.processMetadata() and
  // StreamManager.onTimedMetadata().
  //
  // Use StreamManager.onTimedMetadata() if your video player parses
  // the metadata itself.
  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with hls.js.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });
}
dai.js

Este guia usa o player hls.js para reprodução de streaming, mas a implementação de metadados depende do tipo de player usado.

Processar eventos de transmissão

Implemente listeners de eventos para os principais eventos de vídeo. Este exemplo processa os eventos LOADED, ERROR, AD_BREAK_STARTED e AD_BREAK_ENDED chamando uma função onStreamEvent(). Essa função processa o carregamento de fluxo, os erros de fluxo e a desativação dos controles do player durante a reprodução do anúncio, o que é necessário para o SDK do IMA.

/**
 * Responds to a stream event.
 * @param {!google.ima.dai.api.StreamEvent} e
 */
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      adBreak = true;
      hideVideoControls();
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      adBreak = false;
      showVideoControls();
      break;
    default:
      break;
  }
}

/**
 * Loads and plays a Url.
 * @param {string} url
 */
function loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}
dai.js

Quando o stream é carregado, o player de vídeo carrega e reproduz o URL fornecido usando uma função loadUrl().

Pronto! Agora você está solicitando e exibindo anúncios com o SDK do DAI do IMA. Para saber mais sobre recursos avançados do SDK, consulte os outros guias ou os exemplos no GitHub.