Guia de implementação

Vídeo pre-roll

Pre-roll video ads

Anúncio em vídeo que toca dentro do player antes do vídeo que a pessoa escolheu assistir.

Ad Manager
Ad Exchange
AdSense (via Ad Manager)
dentro do player de vídeo (celular e desktop)

Aprender o formato Conferir no meu site

Desktop

Celular

Entenda em 1 minuto

O que é o vídeo pre-roll

Sabe quando você vai ao cinema e, antes do filme começar, passam alguns trailers e propagandas? O vídeo pre-roll é exatamente isso, só que no seu site. A pessoa aperta o play para ver um vídeo e, antes do conteúdo aparecer, toca um anúncio dentro do mesmo player. Player é a caixinha onde o vídeo passa, com os botões de play, pausa e volume. Quando o anúncio acaba, o vídeo escolhido começa.

Para isso funcionar, o player precisa saber pedir o anúncio. O Google oferece um pacote de código chamado IMA SDK, que você coloca junto do player. Ele faz um pedido ao Ad Manager usando uma tag de anúncio, que é um endereço da internet com as informações do espaço, como o bloco de anúncios e o tamanho do player. A resposta vem em VAST, que é um formato padrão, como uma receita que diz qual vídeo tocar e como contar as visualizações. Quando o site usa regras de anúncio de vídeo, a resposta pode vir em VMAP, que é como a grade de horários da TV, dizendo quando entra cada intervalo.

O Google também explica uma coisa importante sobre o vídeo começar sozinho, o chamado autoplay. Os navegadores, como o Chrome e o Safari, têm regras próprias, e muitas vezes o vídeo só pode começar sozinho se estiver sem som. Não existe uma pergunta simples para saber se o navegador deixa: o único jeito é tentar tocar. Por isso o guia do IMA diz que, no celular, a caixa do anúncio deve ser ligada por uma ação da pessoa, como tocar no botão de play. E, se o player for começar sozinho ou sem som, ele deve avisar isso no pedido, para vir só anúncio que pode tocar desse jeito.

O pre-roll vale a pena quando o vídeo é o motivo da visita, como uma aula, uma receita ou uma notícia em vídeo. Na política de vídeo do Google, esse espaço se chama In-stream, que quer dizer dentro do conteúdo que a pessoa escolheu ver, e ele precisa ser declarado do jeito certo. Lembre sempre: a pessoa veio pelo vídeo, então o anúncio não pode atrapalhar os controles nem travar o conteúdo.

Passo a passo

Como implementar

Crie um bloco de anúncios de vídeoNo Ad Manager, o pre-roll usa um bloco de anúncios de vídeo e áudio. É desse bloco que sai a tag que o player vai usar.
Gere a tag do anúncioVá em Inventário, Blocos de anúncios, abra o bloco e clique em Tags. Escolha Tag de publisher do Google para vídeo e áudio, avance pelas etapas e copie a tag. Os valores entre colchetes precisam ser preenchidos pelo player na hora do pedido.
Coloque o IMA SDK na páginaCarregue o script do IMA SDK antes do seu código. Crie uma caixa por cima do vídeo para o anúncio e ligue a caixa ao vídeo com o AdDisplayContainer, que é a peça do IMA que mostra o anúncio.
Peça o anúncioCrie um AdsLoader e um AdsRequest com a sua tag. Informe a largura e a altura do espaço do anúncio linear. Isso ajuda o IMA a escolher o anúncio certo quando vêm vários.
Pause e retome o conteúdoQuando o IMA pedir pausa (evento CONTENT_PAUSE_REQUESTED), pause o vídeo. Quando pedir para continuar (CONTENT_RESUME_REQUESTED), volte a tocar. Se der erro, destrua o gerenciador de anúncios e deixe o vídeo tocar sem anúncio.
Comece no clique da pessoaNo botão de play, ligue a caixa do anúncio e depois inicie e comece o AdsManager. O guia do IMA diz que, no celular, a caixa do anúncio precisa ser ligada por uma ação da pessoa.

Exemplo implementado

O código e como fica na tela

Vai na página do vídeo: o script do IMA no topo, o player com a caixa do anúncio por cima e o código que pede o pre-roll quando a pessoa clica em Assistir.

<!-- 1. Carrega o IMA SDK (antes do seu código) -->
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

<!-- 2. O vídeo e, por cima dele, a caixa do anúncio -->
<div style="position:relative;width:640px;height:360px">
  <video id="conteudo" width="640" height="360" playsinline controls>
    <source src="meu-video.mp4" type="video/mp4">
  </video>
  <div id="adContainer" style="position:absolute;top:0;left:0"></div>
</div>
<button id="playButton">Assistir</button>

<script>
  var video = document.getElementById('conteudo');
  var adDisplayContainer = new google.ima.AdDisplayContainer(
      document.getElementById('adContainer'), video);
  var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
  var adsManager;

  adsLoader.addEventListener(
      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
      function (e) {
        adsManager = e.getAdsManager(video);
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
            function () { video.pause(); });
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
            function () { video.play(); });
        adsManager.addEventListener(
            google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
      });
  adsLoader.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);

  function onAdError(e) {
    console.log(e.getError());
    if (adsManager) { adsManager.destroy(); }
    video.play(); // sem anúncio, o vídeo continua
  }

  // 3. Pedido do anúncio (IDs de exemplo)
  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
      'iu=/1234567/exemplo&sz=640x480&env=vp&gdfp_req=1&output=vast' +
      '&unviewed_position_start=1&vpa=click&vpmute=0&plcmt=1' +
      '&description_url=https%3A%2F%2Fwww.exemplo.com%2Fvideo&correlator=';
  adsRequest.linearAdSlotWidth = 640;
  adsRequest.linearAdSlotHeight = 400;
  adsLoader.requestAds(adsRequest);

  // 4. Só começa quando a pessoa clica em Assistir
  document.getElementById('playButton').addEventListener('click', function () {
    adDisplayContainer.initialize();
    try {
      adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
      adsManager.start();
    } catch (err) {
      video.play();
    }
  });
</script>

No desktopO anúncio toca dentro do player, no mesmo lugar onde o vídeo vai passar, antes do conteúdo começar. Quando ele termina, o vídeo escolhido começa.

No celularTambém aparece dentro do player, normalmente depois que a pessoa toca no play. No iPhone, o vídeo precisa do atributo playsinline para tocar dentro da página, e não no player de tela cheia.

O que o Google orienta

Pode e não pode

Pode

Tocar o anúncio antes do vídeo que a pessoa escolheu, dentro do player, usando o IMA SDK, uma das ferramentas que o Google exige para espaços In-stream.
Começar o anúncio a partir do clique da pessoa no botão de play, como o guia do IMA recomenda para o celular.
Usar autoplay, inclusive sem som, desde que o player avise no pedido que vai tocar sozinho e se vai tocar mudo.
Deixar o vídeo tocar normalmente quando o anúncio dá erro, como o exemplo do Google faz.

Não pode

Não pode declarar o espaço errado: anúncio em player com vídeo precisa ser declarado como In-stream ou Conteúdo complementar (vídeo que acompanha o conteúdo principal).
Não pode deixar os controles do anúncio e do vídeo cobertos, escondidos ou sem funcionar.
Não pode ter mais de um vídeo tocando sozinho com som ao mesmo tempo, nem mais de um player tocando sozinho visível na tela.
O anúncio não pode começar sozinho antes de pelo menos 50% do espaço estar visível.
Não pode usar os produtos IMA para ganhar dinheiro com vídeos do YouTube.

Dicas

Para fazer do jeito certo

O Google diz que o único jeito de saber se o navegador deixa tocar sozinho é tentar tocar. Se não der, mostre o botão de play e espere o clique.
Se o player vai começar sem som, pense nos anúncios só de áudio: o Google sugere colocar ad_type=video na tag ou não começar mudo.
Use um só AdsLoader por página. Para cada novo pedido de anúncio, crie um novo AdsRequest.
No computador, o IMA não abre o link do anúncio nos 2 primeiros segundos, para evitar cliques sem querer.

Cuidado

Erros comuns

Abrir o arquivo direto no computador

O guia do IMA pede para servir a página por um servidor web, mesmo que seja local. Abrir o arquivo HTML direto pode fazer o teste falhar.

Começar sem a ação da pessoa no celular

No celular, a caixa do anúncio precisa ser ligada por uma ação da pessoa, como tocar no play. Sem isso, o anúncio pode não tocar.

Não tratar o erro do anúncio

Uma resposta VAST com problema pode gerar erro. O exemplo do Google destrói o gerenciador de anúncios e toca o vídeo, para a pessoa não ficar presa numa tela parada.

Esquecer de ajustar o tamanho

Quando a janela muda de tamanho, o exemplo do Google chama o redimensionamento do AdsManager com o tamanho do vídeo. Sem isso, o anúncio pode ficar do tamanho errado.

Perguntas frequentes

Preciso das regras de anúncio para ter pre-roll?

Não. O player pode pedir uma tag VAST pelo IMA. O Google diz que o parâmetro de regras de anúncio (ad_rule) não é obrigatório para servir anúncios, só para usar as regras de anúncio de vídeo.

Qual a diferença entre VAST e VMAP?

VAST é a resposta que diz qual anúncio tocar. VMAP é a resposta usada com regras de anúncio, que diz quando entram os intervalos. A tag escolhe o formato pelo parâmetro output, com valores como vast e vmap.

O pre-roll pode tocar sozinho?

Pode, quando o navegador deixa. O Chrome e o Safari limitam o autoplay, principalmente com som. O player deve testar, avisar no pedido se vai tocar sozinho e sem som, e no celular começar o anúncio pela ação da pessoa.

O que acontece se o anúncio não carregar?

O guia do Google pede que o vídeo continue tocando quando os anúncios não carregam. No exemplo, o gerenciador de anúncios é destruído e o vídeo toca sem anúncio.

Biblioteca

Fonte oficial do Google

Tudo nesta página segue a documentação oficial do Google. Leia direto na fonte:

Seu site usa este formato do jeito certo?

A auditoria lê o site como um visitante, sem clicar em nada, e mostra o que corrigir.

Fazer uma auditoria