amp-ad

<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

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>

Atributos

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

• A8
• A9
• AccessTrade
• Adblade
• AdButler
• Adform
• Adfox
• Ad Generation
• Adhese
• Adincube
• ADITION
• Adman
• AdmanMedia
• Admixer
• AdOcean
• AdPicker
• AdPlugg
• Adpon
• AdReactor
• AdSense
• AdSensor
• AdsNative
• AdSpeed
• AdSpirit
• AdStir
• AdTech
• AdThrive
• AdUnity
• Ad Up Technology
• Adventive
• Adverline
• Adverticum
• AdvertServe
• Adyoulike
• Affiliate-B
• AJA
• AMoAd
• AppNexus
• AppVador
• Atomx
• Baidu
• BeOpinion
• Bidtellect
• brainy
• Broadstreet Ads
• CA A.J.A. Infeed
• CA-ProFit-X
• Cedato
• Chargeads
• Colombia
• Connatix
• Content.ad
• Criteo
• CSA
• CxenseDisplay
• Dianomi
• Directadvert
• DistroScale
• Dot and Media
• DoubleClick
• eADV
• Epeex
• E-Planning
• Ezoic
• Felmat
• FlexOneELEPHANT
• FlexOneHARRIER
• Flite
• fluct
• FreeWheel
• Fusion
• GenieeSSP
• Giraff
• GMOSSP
• GumGum
• Holder
• I-Mobile
• Imonomy
• iBillboard
• Imedia
• Improve Digital
• Index Exchange
• Industrybrains
• InMobi
• Innity
• Kargo
• Kiosked
• Kixer
• Kuadio
• Ligatus
• LockerDome
• LOKA
• MADS
• MANTIS
• Media.net
• MediaImpact
• Mediavine
• Medyanet
• Meg
• MicroAd
• MixiMedia
• Mixpo
• Monetizer101
• mox
• myTarget
• myWidget
• Nativo
• Navegg
• Nend
• NETLETIX
• Noddus
• Nokta
• OneAD
• OnNetwork
• Open AdStream (OAS)
• OpenX
• Pixels
• plista
• polymorphicAds
• popin
• Pressboard
• PromoteIQ
• PubGuru
• PubMatic
• Pubmine
• PulsePoint
• Purch
• Rambler&Co
• RbInfoxSg
• Realclick
• recomAD
• Red for Publishers
• Relap
• Revcontent
• RevJet
• Rubicon Project
• RUNative
• SAS CI 360 Match
• Sekindo
• Sharethrough
• Sklik
• SlimCut Media
• Smart AdServer
• smartclip
• sogou Ad
• Sortable
• SOVRN
• Speakol
• SpotX
• SunMedia
• Swoop
• TcsEmotion
• Teads
• torimochi
• TripleLift
• Trugaze
• UZOU
• ValueCommerce
• video intelligence
• Videonow
• Viralize
• UAS
• ucfunnel
• Unruly
• VMFive
• Webediads
• Weborama
• Widespace
• Wisteria
• WPMedia
• Xlift
• Yahoo
• YahooJP
• Yandex
• Yengo
• Yieldbot
• Yieldmo
• Yieldone
• Yieldpro
• Zedo
• Zucks

Tipos de incorporação compatíveis

• 24smi
• Bringhub
• Dable
• Engageya
• Epeex
• Insticator
• Jubna
• Outbrain
• Postquare
• PubExchange
• Smi2
• Taboola
• Zen
• ZergNet