Guia de implementação

Anúncio complementar

Companion ads

Banner que aparece na página ao mesmo tempo que um anúncio em vídeo ou áudio toca no player, formando uma dupla.

Ad Manager
na página, em espaços de display perto do player de vídeo ou de áudio

Aprender o formato Conferir no meu site

Desktop

Celular

Entenda em 1 minuto

O que é o anúncio complementar

Pense num show: enquanto a cantora está no palco, um telão ao lado mostra o nome da música. Os dois contam a mesma história ao mesmo tempo. O anúncio complementar é assim. Enquanto o anúncio em vídeo ou em áudio toca no player, um banner do mesmo anúncio aparece num espaço de anúncio da página, perto do player.

O Google explica que os anúncios complementares permitem mostrar anúncios em espaços de display ao mesmo tempo em que um anúncio é servido num player de vídeo ou de áudio. Eles sempre dependem do anúncio principal, chamado master: sem master, não existe complementar. É como o telão do show, que só faz sentido se tiver alguém cantando. Um anúncio VAST pode trazer até 6 anúncios de display complementares.

Como o site faz isso? Os espaços de display perto do player são criados com a GPT, a Google Publisher Tag, que é o código do Google para espaços de anúncio. A GPT tem três peças para isso. A primeira, companionAds, diz que aquele espaço pode receber um complementar quando houver um anúncio VAST tocando num player da mesma página. A segunda, setRefreshUnfilledSlots, pede para preencher depois os espaços que ficaram vazios. A terceira, enableVideoAds, faz a GPT e o IMA SDK usarem o mesmo correlator, um número que é igual em todos os pedidos de anúncio da mesma visualização da página. Do lado do player, o IMA manda os tamanhos dos complementares no parâmetro ciu_szs da tag.

Quando vale a pena? Quando você tem anúncios em vídeo ou áudio e quer que o anúncio também apareça na página. Para players de vídeo que podem receber anúncios de áudio, o Google recomenda muito usar banners complementares, para o player não ficar em branco enquanto o áudio toca. Alguns cuidados: o espaço precisa ter o mesmo tamanho do complementar, anúncios responsivos não são suportados como complementares de vídeo e, se o player estiver dentro de um iframe, é preciso um script de proxy da GPT.

Passo a passo

Como implementar

Informe os tamanhos no item de linhaAo criar o item de linha de vídeo e áudio, informe o tamanho esperado do criativo master e os tamanhos dos complementares.
Adicione os criativos complementaresUse um dos tipos aceitos: Imagem, Campaign Manager 360, Terceiros, Personalizado, Formato nativo (Beta) ou modelos de criativos padrão ou personalizados.
Carregue a GPT na página principalO IMA para HTML5 só reconhece os espaços da GPT quando ela carrega na página principal. Se o player estiver num iframe, inclua o script de proxy da GPT.
Crie o espaço complementarDefina o espaço com companionAds e pubads, ligue o preenchimento de espaços vazios, ative os anúncios de vídeo e mostre o espaço. Defina os espaços antes de o player mostrar os anúncios.
Mande os tamanhos na tag do playerNa tag do IMA, use o parâmetro ciu_szs com os tamanhos dos complementares separados por vírgula, como 728x90,300x250.
Evite piscar no autoplaySe o vídeo ou áudio toca sozinho, a GPT pode usar disableInitialLoad para não mostrar um banner comum por um instante antes do complementar chegar.

Exemplo implementado

O código e como fica na tela

A GPT vai no head da mesma página do player, e a caixa do complementar vai perto do player, com o tamanho igual ao do anúncio complementar.

<!-- No head: GPT com um espaço que aceita complementar -->
<script async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(function () {
    googletag
        .defineSlot('/1234567/exemplo', [728, 90], 'companionDiv')
        .addService(googletag.companionAds())
        .addService(googletag.pubads());
    googletag.companionAds().setRefreshUnfilledSlots(true);
    googletag.pubads().enableVideoAds();
    googletag.enableServices();
  });
</script>

<!-- No body: a caixa do complementar, do mesmo tamanho -->
<div id="companionDiv" style="width:728px; height:90px;">
  <script>
    googletag.cmd.push(function () { googletag.display('companionDiv'); });
  </script>
</div>

<!-- Na tag do IMA, os tamanhos dos complementares vão em ciu_szs:
     ...&ciu_szs=728x90&... -->

No desktopEnquanto o anúncio toca no player, um banner do mesmo anúncio aparece num espaço de display da página.

No celularO banner complementar aparece num espaço de display da página enquanto o anúncio toca no player. Com tamanho fluid, ele ocupa a mesma porcentagem de espaço em qualquer tela.

O que o Google orienta

Pode e não pode

Pode

Mostrar até 6 anúncios complementares para cada anúncio VAST.
Usar complementares do tipo Imagem, Campaign Manager 360, Terceiros, Personalizado, Formato nativo (Beta) ou modelos de criativos.
Pedir que espaços complementares vazios sejam preenchidos depois com outro anúncio da sua rede.
Usar complementares de tamanho fluid, que ocupam a mesma porcentagem de espaço em qualquer tela.
Usar banners complementares em players de vídeo que podem receber anúncios de áudio, o que o Google recomenda muito.

Não pode

Não existe complementar sozinho: ele sempre depende do anúncio master.
Anúncios responsivos não são suportados como complementares de vídeo.
O IMA não suporta a função de clicar para ligar em complementares de vídeo.
Formatos com vídeo nativo ativado não podem ser usados como complementares.
Com o player num iframe, a GPT não é reconhecida sem o script de proxy.

Dicas

Para fazer do jeito certo

Para espaços criados durante a página, defina-os antes de o player mostrar os anúncios.
Se o VAST trouxer menos complementares do que os espaços definidos, os espaços que sobram podem ser preenchidos pela sua rede.
No parâmetro ciu_szs, a barra vertical entre tamanhos indica um espaço com vários tamanhos.
Quem não usa GPT pode pegar o complementar pela API do IMA, escolhendo o tamanho e colocando o conteúdo na caixa quando o anúncio começa.

Cuidado

Erros comuns

GPT dentro de um iframe

O IMA para HTML5 só reconhece os espaços da GPT na página principal. Num iframe, sem o script de proxy, o complementar não aparece.

Tamanho que não combina

O complementar precisa ter o mesmo tamanho do espaço. Um espaço 728x90 não recebe um complementar 300x250.

Esquecer os tamanhos na tag

Um player com IMA deve mandar os tamanhos dos complementares no parâmetro ciu_szs. Sem isso, o servidor não sabe que tamanhos a página aceita.

Banner piscando antes do complementar

Em vídeo ou áudio que toca sozinho, um banner comum pode aparecer por um instante. O Google indica disableInitialLoad para evitar isso.

Perguntas frequentes

O complementar aparece sem o vídeo?

Não. Ele sempre depende do anúncio master que toca no player. Se não houver complementar, o espaço pode receber outro anúncio da sua rede.

Quantos complementares posso ter?

Um anúncio VAST pode trazer até 6 anúncios de display complementares.

Funciona com anúncio de áudio?

Sim. Em players de vídeo que podem receber anúncios de áudio, o Google recomenda muito usar banners complementares, para o player não ficar em branco enquanto o som toca.

Para que serve o enableVideoAds?

Ele faz a GPT e o IMA SDK usarem o mesmo correlator, um número que é igual em todos os pedidos de anúncio da mesma visualização da página.

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