Abrir workspace

Guia de implementação

Banner do Ad Manager

Display ad slots (Google Publisher Tag)

O espaço de anúncio clássico do Ad Manager, criado com a Google Publisher Tag, com tamanho fixo, vários tamanhos ou responsivo.

  • Ad Manager
  • celular e desktop
Aprender o formatoConferir no meu site
Desktop
Celular

Entenda em 1 minuto

O que é o banner do ad manager

O banner do Ad Manager é aquele retângulo de anúncio que fica parado dentro da página: no meio do texto, no topo ou na lateral. Pense num cartaz pendurado na parede da escola. Ele tem um lugar certo e um tamanho certo, e todo mundo que passa por ali pode ver. No Ad Manager, esse lugar reservado se chama slot, que é só a palavra em inglês para espaço de anúncio. Quem pede e mostra o anúncio nesse espaço é a GPT, sigla de Google Publisher Tag, uma biblioteca de código do Google que você coloca no site.

Funciona assim: primeiro você conta para a GPT qual bloco de anúncio do Ad Manager vai usar, quais tamanhos cabem ali e em qual caixinha da página ele deve aparecer. Essa caixinha é uma div, um pedaço do HTML com um nome único. Depois a GPT pede o anúncio e desenha ele dentro da caixinha. O nome da caixinha precisa ser igual nos dois lugares. Se não for, o anúncio não aparece. O próprio Google manda conferir isso quando o anúncio não aparece.

O tamanho pode ser escolhido de três jeitos. No tamanho fixo, só entram anúncios daquela medida, como 300 por 250. No de vários tamanhos, você lista várias medidas e o Ad Manager pode escolher qualquer uma delas. No responsivo, você monta uma tabela chamada mapeamento de tamanhos, que diz quais medidas valem para cada largura de tela: uma lista para telas grandes e outra para telas pequenas. Existe ainda o tamanho fluido, que se estica na largura da página, mas o Google explica que hoje ele é usado só para anúncios nativos.

O Google criou esse jeito de trabalhar para que o site tenha controle: você decide onde cada anúncio mora, que tamanhos aceita e quando ele carrega. A documentação ensina a deixar os anúncios do fim da página para carregar só quando a pessoa chega perto deles, o que se chama carregamento lento. Também explica como atualizar um anúncio sem recarregar a página inteira, seguindo regras de tempo e de declaração. Vale a pena usar o banner quando você já tem uma conta no Ad Manager e quer escolher com cuidado o lugar e o tamanho de cada espaço.

Passo a passo

Como implementar

  1. Gere a tag no Ad ManagerNo Ad Manager, clique em Inventário e depois em Blocos de anúncios. Abra o bloco, vá na guia Tags, escolha Tag de publisher do Google (GPT) e clique em Continuar. Faça as outras escolhas e copie as tags em Resultados de tag.
  2. Carregue a GPT no headColoque o script da GPT dentro da parte head da página. É ele que traz as ferramentas de anúncio do Google para o site.
  3. Defina o slotAinda no head, informe à GPT o caminho do bloco de anúncio, os tamanhos aceitos e o nome da div. Se quiser um slot responsivo, junte um mapeamento de tamanhos. No fim, ative o serviço de anúncios.
  4. Crie a div com espaço reservadoNo body, crie a div com o mesmo nome usado na definição. Dê a ela altura e largura no CSS, pensando no maior anúncio, para nada pular na tela quando o anúncio chegar.
  5. Peça o anúncioLogo depois da div, chame a exibição com o nome da div. Para aparecerem anúncios do seu próprio inventário, é preciso um item de linha ativo com status Pronto.
  6. Carregamento lento e atualizaçãoSe quiser, ative o carregamento lento para os espaços do fim da página. Se for atualizar anúncios, declare isso no Ad Manager em Inventário, Regras de inventário, Declarações do editor, e use a mesma regra na página.

Exemplo implementado

O código e como fica na tela

A GPT e a definição do slot vão no head; a div com a chamada de exibição vai no body, no lugar onde o banner deve aparecer.
<!-- No <head> -->
<script async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(() => {
    // Tamanhos por largura de tela (slot responsivo).
    const mapping = googletag
      .sizeMapping()
      .addSize([1024, 768], [[728, 90], [300, 250]])
      .addSize([0, 0], [300, 250])
      .build();

    googletag
      .defineSlot(
        "/1234567/exemplo",
        [[728, 90], [300, 250]],
        "banner-exemplo",
      )
      .defineSizeMapping(mapping)
      .addService(googletag.pubads());

    // Carregamento lento para espaços longe da tela.
    googletag.setConfig({
      lazyLoad: {
        fetchMarginPercent: 500,
        renderMarginPercent: 200,
        mobileScaling: 2.0,
      },
    });

    googletag.enableServices();
  });
</script>

<!-- No <body>, onde o anúncio deve aparecer -->
<div id="banner-exemplo" style="min-height: 250px;"></div>
<script>
  googletag.cmd.push(() => {
    googletag.display("banner-exemplo");
  });
</script>
No desktopAparece como um retângulo parado no lugar que você escolheu, por exemplo 728 por 90 ou 300 por 250. Ele rola junto com a página, como qualquer parte do texto.
No celularAparece no meio do conteúdo, em medidas que cabem na tela, como 300 por 250. Com o mapeamento de tamanhos, o celular recebe só as medidas que você liberou para telas pequenas.

O que o Google orienta

Pode e não pode

Pode

  • Definir um tamanho fixo, uma lista de vários tamanhos ou um mapeamento de tamanhos por largura de tela.
  • Reservar no CSS o espaço do maior tamanho que pode aparecer. O Google diz que esse é o jeito mais eficaz de evitar que a página pule.
  • Definir no head os espaços que aparecem logo de cara, para que eles tenham prioridade.
  • Usar carregamento lento nos espaços abaixo da dobra, que só aparecem quando a pessoa rola a página.
  • Atualizar anúncios com a função de atualização da GPT, em vez de recarregar a página inteira, desde que a atualização esteja declarada no Ad Manager.
  • Atualizar por ação da pessoa sem tempo mínimo, já que o Google só exige intervalo mínimo para atualização por tempo ou por evento.

Não pode

  • Usar na div um nome diferente do que foi passado na definição do slot.
  • Atualizar anúncios sem declarar isso no Ad Manager, ou declarar de forma errada. O Google trata isso como violação.
  • Atualizar por tempo ou por evento com intervalo menor que 30 segundos na web.
  • Limpar o espaço antes de atualizar. A atualização já troca o anúncio, e limpar só deixa o espaço em branco por mais tempo.
  • Atualizar espaços que a pessoa nunca vê. O Google avisa que isso pode derrubar bastante a taxa de visibilidade.
  • Deixar a div sem medidas reservadas, o que faz o conteúdo pular quando o anúncio chega.

Dicas

Para fazer do jeito certo

Cuidado

Erros comuns

Nome da div diferente

O nome passado na definição do slot e na exibição precisa ser igual ao da div. Quando não é, o anúncio simplesmente não aparece.

Div de tamanho diferente do anúncio

O Google pede que a largura, a altura e o nome da div combinem com o que está na tag. Se não combinarem, o anúncio pode não aparecer.

Sem item de linha pronto

Sem um item de linha ativo com status Pronto, o seu próprio inventário não mostra anúncio, mesmo com o código certo.

Mapeamento que esvazia o celular

No exemplo do Google, telas menores que 640 por 480 recebem uma lista vazia e ficam sem anúncio. Se copiar sem ajustar, celulares em pé podem ficar sem banner.

Perguntas frequentes

Qual a diferença entre vários tamanhos e responsivo?

No de vários tamanhos, qualquer medida da lista pode aparecer em qualquer tela. No responsivo, o mapeamento de tamanhos diz quais medidas valem para cada largura de tela.

Posso usar o tamanho fluido num banner comum?

O Google explica que hoje o único tipo fluido que o Ad Manager aceita é o anúncio nativo. Para banner comum, use tamanho fixo, vários tamanhos ou mapeamento.

Qual o tempo mínimo para atualizar um anúncio?

Na web, atualização por tempo ou por evento precisa de pelo menos 30 segundos. Atualização por ação da pessoa não tem mínimo. Em todos os casos, ela precisa estar declarada nas Regras de inventário.

Vale a pena usar carregamento lento?

O Google recomenda deixar para depois os espaços abaixo da dobra, o que ajuda principalmente no celular, onde os recursos são menores. Os espaços do topo devem ter prioridade.

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