Guia de implementação

Anúncios em páginas AMP

AMP ads (amp-ad, amp-auto-ads, amp-sticky-ad)

Como mostrar anúncios em páginas AMP com amp-ad, anúncios automáticos e faixa fixa, no AdSense e no Ad Manager.

AdSense
Ad Manager
celular e desktop (em páginas AMP)

Aprender o formato Conferir no meu site

Desktop

Celular

Entenda em 1 minuto

O que é o anúncios em páginas amp

AMP é um jeito de montar páginas bem leves e rápidas, criado como um projeto aberto. Imagine uma lancheira com divisórias: cada coisa tem o seu cantinho e não dá para jogar qualquer coisa lá dentro. Numa página AMP é igual. Você não pode colar qualquer código de anúncio. Em vez disso, usa peças prontas, chamadas componentes, que já sabem pedir e mostrar anúncios sem deixar a página pesada.

São três peças principais. O amp-ad é o espaço de anúncio comum, como um banner: você diz o tipo da rede, adsense para o AdSense ou doubleclick para o Ad Manager, e informa a largura e a altura. O amp-auto-ads é o modo automático: ele recebe uma configuração da rede e escolhe sozinho onde colocar anúncios, respeitando um número máximo e uma distância mínima entre eles. O amp-sticky-ad é a faixa que fica presa na parte de baixo da tela, como uma âncora, e tem botão de fechar.

O código da rede de anúncios não roda direto na página. Ele roda numa caixinha separada, chamada iframe, que o próprio AMP controla. Se não chegar anúncio, o AMP tenta esconder o espaço vazio, mas não esconde um espaço que está na tela, para a página não pular. Os anúncios AMP também não podem ficar dentro de caixas com posição fixa, a não ser os anúncios fixos próprios do AMP e o amp-lightbox.

O Google explica que o AMP é um projeto aberto que busca páginas rápidas e com bom desempenho em qualquer aparelho. No AdSense, você cria um bloco de anúncio e escolhe o código AMP, ou liga os Anúncios automáticos para AMP. No Ad Manager, você gera tags AMP direto no painel, e o Google recomenda usar anúncios HTML para AMP. Vale a pena usar se o seu site já tem versões AMP das páginas e você quer que elas também mostrem anúncios.

Passo a passo

Como implementar

Carregue os componentes no headColoque no head da página AMP o script do amp-ad. Se usar anúncios automáticos ou faixa fixa, coloque também os scripts do amp-auto-ads e do amp-sticky-ad.
AdSense: crie um bloco AMPNo AdSense, clique em Anúncios, Por bloco de anúncios e Anúncios gráficos. Dê um nome, deixe Responsivo, clique em Salvar e obter código e clique em AMP. O script vai no head e o código do anúncio vai no body.
AdSense: ligue os automáticos para AMPEm Anúncios, clique em Você tem um site AMP?, ative Anúncios automáticos para AMP e clique em Receba o código AMP. Cole o script no head e o código logo depois da abertura do body de cada página. Depois clique em Concluído e Aplicar.
Ad Manager: gere a tag AMPClique em Inventário e em Blocos de anúncios, abra o bloco e vá na guia Tags. Escolha Tag AMP e clique em Continuar. Marque Marcadores de AMP para incluir espaço reservado e substitutos, e escolha os tamanhos do bloco.
Ligue a página AMP à normalNa página normal, aponte para a versão AMP com a marcação amphtml. Na página AMP, aponte de volta para a normal com a marcação canonical.
Espere e confiraOs anúncios podem levar alguns minutos e, às vezes, até uma hora para aparecer.

Exemplo implementado

O código e como fica na tela

Os scripts dos componentes vão no head; o amp-auto-ads vai logo depois de abrir o body, e os demais anúncios vão no body, onde devem aparecer.

<!-- No <head> da página AMP -->
<script async custom-element="amp-ad"
  src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-auto-ads"
  src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
<script async custom-element="amp-sticky-ad"
  src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

<body>
  <!-- AdSense: anúncios automáticos, logo depois de abrir o body -->
  <amp-auto-ads type="adsense"
    data-ad-client="ca-pub-0000000000000000">
  </amp-auto-ads>

  <!-- AdSense: bloco responsivo, onde o anúncio deve aparecer -->
  <amp-ad width="100vw" height="320"
    type="adsense"
    data-ad-client="ca-pub-0000000000000000"
    data-ad-slot="1234567890"
    data-auto-format="rspv"
    data-full-width>
    <div overflow></div>
  </amp-ad>

  <!-- Ad Manager: faixa fixa embaixo (só uma por página) -->
  <amp-sticky-ad layout="nodisplay">
    <amp-ad width="320" height="50"
      type="doubleclick"
      data-slot="/1234567/exemplo">
    </amp-ad>
  </amp-sticky-ad>
</body>

No desktopO amp-ad ocupa o espaço com a largura e a altura definidas, como um banner comum. A faixa fixa do amp-sticky-ad fica presa embaixo, com largura total e no máximo 100 pixels de altura.

No celularO bloco responsivo do AdSense ocupa a largura da tela. A faixa fixa fica embaixo, pode ser fechada, e ao chegar no fim da página o AMP dá um espaço extra para ela não cobrir o conteúdo.

O que o Google orienta

Pode e não pode

Pode

Usar o amp-ad com o tipo adsense ou doubleclick, informando largura e altura.
Usar blocos responsivos do AdSense, que o Google recomenda deixar selecionados.
Usar o amp-auto-ads com o AdSense e desligar, no painel, os formatos que não quiser nas páginas AMP.
Ter uma faixa fixa amp-sticky-ad por página, com um único amp-ad dentro.
Mostrar um espaço reservado enquanto o anúncio carrega e um substituto quando ele não vem.
No Ad Manager, atualizar anúncios AMP que usam Fast Fetch, com intervalo mínimo de 30 segundos.

Não pode

Colocar o amp-ad dentro de caixas com posição fixa, exceto os anúncios fixos e o amp-lightbox.
Ter mais de um amp-sticky-ad na mesma página.
Usar fundo transparente ou semitransparente na faixa fixa. O AMP troca por uma cor sólida.
Servir anúncios ou embeds sem HTTPS.
No Ad Manager, ligar a atualização junto com a requisição única (SRA). A atualização é desligada e aparece um erro.
Usar o amp-ad direto numa Web Story. As Web Stories usam o amp-story-auto-ads.

Dicas

Para fazer do jeito certo

Coloque o amp-auto-ads como o primeiro item dentro do body.
A altura máxima da faixa fixa é 100 pixels, e a largura é sempre 100 por cento.
Em blocos de vários tamanhos que se atualizam, o Ad Manager só pede tamanhos iguais ou menores que o atual, então o anúncio pode encolher com o tempo.
Para acompanhar os resultados no AdSense, use o detalhamento Plataforma de conteúdo nos relatórios.

Cuidado

Erros comuns

Script fora do head

O script de cada componente vai no head, e o anúncio vai no body. Sem o script certo, o componente não funciona.

Copiar código de exemplo

O AdSense entrega o código AMP pronto quando você escolhe a opção AMP. Copie o código da sua conta, com o seu ID de editor.

Faixa fixa montada errado

O amp-sticky-ad precisa do layout nodisplay e de um único amp-ad dentro dele.

Página AMP solta

O AdSense pede que a página normal e a página AMP apontem uma para a outra, com as marcações amphtml e canonical.

Perguntas frequentes

Posso usar o código normal do AdSense numa página AMP?

Use o código AMP. Em páginas AMP, o JavaScript da rede de anúncios não roda direto na página, e sim num iframe controlado pelo AMP.

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

O AMP tenta esconder o espaço. Se não conseguir, mostra o substituto. A faixa fixa sem anúncio não aparece.

O Ad Manager atualiza anúncios em AMP?

Sim, em anúncios com Fast Fetch. Você coloca uma marcação no head com o intervalo, de no mínimo 30 segundos, por página ou por slot. Não funciona junto com SRA.

Quanto tempo leva para os anúncios aparecerem?

Em geral alguns minutos, e às vezes até uma hora.

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