AMP

amp-ad

Description

É um contêiner para a exibição de um anúncio.

 

Required Scripts

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

É um contêiner para a exibição de um anúncio. O amp-embed é um alias da tag amp-ad, tendo toda a funcionalidade dela, com um nome de tag diferente. Use amp-embed quando for mais preciso semanticamente. Os documentos de AMP são compatíveis somente com anúncios/incorporações veiculados via HTTPS.

amp-ad / amp-embed

as especificações do amp-ad / amp-embed provavelmente evoluirão significativamente com o passar do tempo. A abordagem atual foi desenvolvida para inicializar o formato, para poder exibir anúncios.

Descrição É um contêiner para a exibição de um anúncio. O amp-embed é um alias da tag amp-ad, tendo toda a funcionalidade dela, com um nome de tag diferente. Use amp-embed quando for mais preciso semanticamente. Os documentos de AMP são compatíveis somente com anúncios/incorporações veiculados via HTTPS.
Script obrigatório <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
Observação: o amp-ad ainda pode funcionar sem esse script, mas ele é altamente recomendável para compatibilidade futura.
Layouts compatíveis fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive
Exemplos Consulte um exemplo de amp-ad no site AMP By Example.

Comportamento

Os anúncios são carregados da mesma forma que todos os outros recursos em documentos AMP, com um elemento personalizado especial chamado <amp-ad>. Não é permitido exibir JavaScript fornecido pela rede de publicidade no documento AMP. Em vez disso, o ambiente de tempo de execução de AMP carrega como o documento AMP um iframe de uma origem diferente (por meio de um sandbox de iframe) e executa o JS da rede de publicidade dentro do sandbox desse iframe.

O <amp-ad> exige que os valores de largura e altura sejam especificados de acordo com a regra do tipo de layout dele. Ele precisa de um argumento type que selecione qual rede de publicidade será exibida. Todos os atributos data-* da tag serão passados automaticamente como argumentos para o código que renderizará o anúncio. A rede de publicidade define quais atributos data- são necessários para determinado tipo de rede, e os atributos precisam ser documentados com essa rede.

Exemplo: exibição de alguns anúncios

<amp-ad type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"
    width="300"
    height="250"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
  </amp-ad>
  <amp-ad width="300"
    height="250"
    type="industrybrains"
    data-width="300"
    data-height="250"
    data-cid="19626-3798936394">
  </amp-ad>
  <amp-embed type="taboola"
    width="400"
    height="300"
    layout="responsive"
    data-publisher="amp-demo"
    data-mode="thumbnails-a"
    data-placement="Ads Example"
    data-article="auto">
  </amp-embed>
Abrir este trecho no playground

Atributos

type (obrigatório) Especifica um identificador para a rede de publicidade. O atributo type seleciona o modelo a ser usado na tag de anúncio.
src (opcional) Use este atributo para carregar uma tag de script para a rede de publicidade especificada. Ele pode ser usado para redes de publicidade que precisam que exatamente uma tag de script seja inserida na página. O valor src precisa ter um prefixo na lista de permissões da rede de publicidade especificada, e o valor precisa usar o protocolo https.
data-foo-bar A maioria das redes de publicidade exige mais configurações, que podem ser passadas para a rede usando atributos HTML data-. Os nomes de parâmetros estão sujeitos à conversão de traço para CamelCase do atributo de dados padrão. Por exemplo, "data-foo-bar" é enviado ao anúncio para configuração como "fooBar". Consulte a documentação da rede de publicidade em que os atributos podem ser usados.
data-vars-foo-bar Atributos que começam com data-vars- são reservados para as variáveis do amp-analytics (link em inglês).
json (opcional) Use o atributo para passar uma configuração ao anúncio como um objeto JSON arbitrariamente complexo. O objeto é transmitido para o anúncio no estado em que se encontra, sem nenhuma configuração feita nos nomes.
data-consent-notification-id (opcional) Se fornecido, precisa da confirmação do amp-user-notification com o código HTML fornecido até que o "ID do cliente AMP" do usuário (semelhante a um cookie) seja passado ao anúncio. Isso significa que a renderização do anúncio é adiada até o usuário confirmar a notificação.
data-loading-strategy (opcional) Instrui o anúncio a começar o carregamento quando ele estiver a um determinado número de janelas de visualização em relação à janela de visualização atual. Sem o atributo data-loading-strategy, o número é 3 por padrão. Você pode especificar um valor flutuante no intervalo de [0, 3]. Se o valor não for especificado, será definido como 1,25. Use um valor menor para ter um grau maior de visibilidade (isto é, para aumentar a chance de um anúncio ser visto depois de carregado), mas com o risco de gerar menos impressões, ou seja, menos anúncios carregados. Se o atributo for especificado, mas o valor for deixado em branco, o sistema atribuirá um valor flutuante, que otimiza a visibilidade sem afetar drasticamente as impressões. A especificação de prefer-viewability-over-views como o valor também otimiza automaticamente a visibilidade.
data-ad-container-id (opcional) Informa o anúncio realcionado ao código do componente do contêiner no caso de tentativa de recolhimento. O componente do contêiner precisa ser um componente <amp-layout> que seja pai do anúncio. Quando o data-ad-container-id é especificado e um componente de contêiner <amp-layout> é encontrado, o ambiente de tempo de execução de AMP tenta recolher o componente de contêiner em vez do componente do anúncio em branco. Esse recurso pode ser útil quando um indicador de anúncio está presente.
common attributes Este elemento inclui atributos comuns estendidos a componentes de AMP.

Marcador

O amp-ad também pode ser compatível com um elemento filho com o atributo placeholder. Se for compatível com a rede de publicidade, esse elemento será exibido até que o anúncio esteja disponível para visualização. Saiba mais sobre marcadores e substitutos.

<amp-ad width=300 height=250
    type="foo">
    <div placeholder>Loading ...</div>
</amp-ad>

Nenhum anúncio disponível

Se nenhum anúncio estiver disponível para o slot, a AMP tentará recolher o elemento amp-ad (ou seja, configurar para display: none). A AMP determina que essa operação possa ser realizada sem afetar a posição de rolagem do usuário. Se o anúncio estiver na janela de visualização atual, ele não será recolhido, porque isso afeta a posição de rolagem do usuário. No entanto, se o anúncio estiver fora da janela de visualização atual, ele será recolhido.

Caso a tentativa de recolhimento falhe, o componente amp-ad é compatível com um elemento filho que tenha o atributo fallback. Se houver um elemento substituto, o elemento substituto personalizado será mostrado. Caso contrário, a AMP aplicará um substituto padrão.

Exemplo com substituto:

<amp-ad width=300 height=250 type="foo">
  <div fallback>No ad for you</div>
</amp-ad>

Exibição de anúncios em vídeo

Há três formas de gerar receita para vídeos em AMP por meio de anúncios em vídeo:

  1. As AMP são compatíveis com vários players de vídeo, como BrightCove, DailyMotion etc., que podem gerar receita com anúncios. Para ver uma lista completa, consulte os componentes de mídia.

  2. Use o componente amp-ima-video, que vem com um SDK do IMA e um player de vídeo HTML5 integrados.

  3. Caso seu player de vídeo não seja compatível com AMP, você pode exibir seu player personalizado usando amp-iframe. Ao usar a abordagem do amp-iframe:

    • verifique se há um pôster caso o player seja carregado na primeira janela de visualização (mais detalhes);
    • o vídeo e o pôster precisam ser exibidos por HTTPS.

Exibição de anúncios a partir de um domínio personalizado

A AMP é compatível com o carregamento do iframe de inicialização usado para carregar anúncios de um domínio personalizado, como o seu.

Para ativar isso, copie o arquivo remote.html para seu servidor da Web. Em seguida, adicione a seguinte metatag aos seus arquivos de AMP:

<meta name="amp-3p-iframe-src" content="https://assets.your-domain.com/path/to/remote.html">

O atributo content da metatag é o URL absoluto para sua cópia do arquivo remote.html no seu servidor da Web. Esse URL precisa usar um esquema HTTPS. Ele não pode residir na mesma origem dos seus arquivos de AMP. Por exemplo, se você hospedar arquivos de AMP em www.example.com, esse URL não poderá estar em www.example.com, mas poderá estar em something-else.example.com. Consulte Política de origem do Iframe (link em inglês) para ver mais detalhes sobre as origens permitidas para iframes.

Segurança

Valide os dados de entrada antes de passá-los para a função draw3p a fim de garantir que o iframe faça apenas o que é esperado. Isso é válido, em especial, para redes de publicidade que permitem a injeção de JavaScript personalizado.

Os iframes também precisam exigir que sejam colocados apenas nas origens em que esperam ser colocados. As origens seriam:

  • suas próprias origens;
  • https://cdn.ampproject.org para o cache de AMP.

No caso do cache de AMP, você também precisa verificar se a "origem da fonte" (origem do documento exibido por cdn.ampproject.org) é uma de suas origens.

A aplicação das origens pode ser feita com o terceiro argumento de draw3p e também precisa ser feita usando a diretiva allow-from (link em inglês) para compatibilidade completa com o navegador.

Melhorar a configuração de anúncios recebidos

Isto é completamente opcional: às vezes, é recomendável aprimorar a solicitação de anúncios antes de fazê-la ao servidor de anúncios.

Se sua rede de publicidade for compatível com o Fast Fetch, use o recurso de configuração em tempo real (RTC, na sigla em inglês). Por exemplo, as integrações do DoubleClick e do Google AdSense são compatíveis com o Fast Fetch e o RTC.

Se a rede de publicidade usar o Delayed Fetch, você poderá passar um callback para a chamada de função draw3p no arquivo remote.html. O callback recebe a configuração de entrada como primeiro argumento e depois recebe outro callback como segundo argumento (chamado done no exemplo abaixo). Esse callback precisa ser chamado com a configuração atualizada para que a renderização do anúncio aconteça.

Exemplo:

draw3p(function(config, done) {
  config.targeting = Math.random() > 0.5 ? 'sport' : 'fashion';
  // Don't actually call setTimeout here. This should only serve as an
  // example that is OK to call the done callback asynchronously.
  setTimeout(function() {
    done(config);
  }, 100)
}, ['allowed-ad-type'], ['your-domain.com']);

Estilo

Elementos <amp-ad> não podem ter contêineres ou ser colocados em contêineres que tenham o CSS position: fixed configurado (com exceção de amp-lightbox). Isso ocorre devido às implicações de UX dos anúncios de sobreposição de página inteira. Pode-se considerar a possibilidade de permitir formatos de anúncios semelhantes no futuro dentro de contêineres controlados por AMP que mantenham determinadas invariantes de UX.

Validação

Consulte as regras de amp-ad (link em inglês) nas especificações do validador de AMP.

Redes de publicidade compatíveis

Tipos de incorporação compatíveis

Precisa de mais ajuda?

Você já leu este documento várias vezes, mas ainda ficou com dúvidas sem respostas? Talvez outras pessoas pensem da mesma forma. Procure entrar em contato com elas no Stack Overflow.

Ir para o Stack Overflow
Encontrou um bug ou sente falta de um recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Ir para o GitHub