Especificação AMP para anúncios

Se você gostaria de propor alterações ao padrão, por favor, por favor comente em Intenção de Implementar.

Anúncios AMPHTML são um mecanismo para renderizar anúncios rápidos e eficientes em páginas AMP. Para garantir que os documentos de anúncios AMPHTML ("criativos AMP") possam ser renderizados de forma rápida e suave no navegador e não causem degradação da experiência do usuário, os criativos AMP devem obedecer algumas regras de validação. De forma semelhante às regras do formato AMP, os anúncios AMPHTML têm acesso a um conjunto limitado de tags, capacidades e extensões permitidas.

Regras do formato de Anúncio AMPHTML

A menos que especificado abaixo de forma diversa, o criativo deve obedecer todas as regras dadas pelas regras do formato AMP, incluídas aqui por referência. Por exemplo, o código boilerplate de um anúncio AMPHTML difere do boilerplate padrão do AMP.

Além disso, os criativos devem obedecer às seguintes regras:

 <meta name="amp4ads-id" content="vendor=adsense,type=creative-id,id=1283474"> <meta name="amp4ads-id" content="vendor=adsense,type=impression-id,id=xIsjdf921S">

<amp-analytics id="nestedAnalytics">
  <script type="application/json">
  {
    "requests": {
      "visibility": "https://example.com/nestedAmpAnalytics"
    },
    "triggers": {
      "visibilitySpec": {
      "selector": "amp-ad",
      "visiblePercentageMin": 50,
      "continuousTimeMin": 1000
      }
    }
  }
  </script>
</amp-analytics>

Boilerplate

Os criativos de anúncios AMPHTML requerem um estilo de boilerplate diferente e consideravelmente mais simples do que os documentos gerais do AMP:

<style amp4ads-boilerplate>
  body {
    visibility: hidden;
  }
</style>

Justificativa: o estilo amp-boilerplate oculta o conteúdo do corpo até que o runtime AMP esteja pronto e possa exibi-lo. Se o Javascript estiver desativado ou o runtime AMP não for carregado, o boilerplate default garante que o conteúdo seja exibido de forma independente. Em anúncios AMPHTML, no entanto, se o JavaScript estiver totalmente desativado, os anúncios AMPHTML não serão executados e nenhum anúncio será mostrado. Portanto, não há necessidade de haver a seção <noscript>. Na ausência do runtime AMP, a maioria dos mecanismos dos quais dependem os anúncios AMPHTML (por exemplo, análises para rastreamento de visibilidade ou amp-img para exibição de conteúdo) não estará disponível, então é melhor não exibir nenhum anúncio do que um com defeito.

Por fim, o boilerplate do anúncio AMPHTML usa amp-a4a-boilerplate em vez de amp-boilerplate para que os validadores possam identificá-lo com facilidade e produzir mensagens de erro mais precisas para ajudar os desenvolvedores.

Observe que as mesmas regras sobre alterações para o texto boilerplate se aplicam ao boilerplate AMP geral.

CSS

Animações e transições CSS

Seletores

Finalmente, o boilerplate de um anúncio AMPHTML usa amp-a4a-boilerplate em vez de amp-boilerplate para que os validadores possam facilmente identificá-lo e produzir mensagens de erro mais precisas para ajudar os desenvolvedores.

• Contém apenas propriedades transition, animation, transform, visibility ou opacity.

Justificativa: isto permite que o runtime AMP remova esta classe do contexto para desativar animações, quando isto for necessário para o melhor desempenho da página.

Bom

.box {
transform: rotate(180deg);
transition: transform 2s;
}

Ruim

Propriedade não permitida na classe CSS.

.box {
color: red; // non-animation property not allowed in animation selector
transform: rotate(180deg);
transition: transform 2s;
}

Propriedades que podem ser usadas em animações e transições

As únicas propriedades que podem ser usadas em transições são opacity e transform. (Justificativa)

Bom

transition: transform 2s;

Ruim

transition: background-color 2s;

Bom

@keyframes turn {
from {
transform: rotate(180deg);
}

to {
transform: rotate(90deg);
}
}

Ruim

@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}

to {
margin-left: 0%;
width: 100%;
}
}

Extensões AMP e tags embutidas permitidas

Os módulos de extensão AMP e tags embutidos AMP a seguir são permitidos em anúncios AMPHTML criativos. As extensões ou tags embutidos não listados explicitamente são proibidos.

• amp-accordion
• amp-ad-exit
• amp-analytics
• amp-anim
• amp-animation
• amp-audio
• amp-bind
• amp-carousel
• amp-fit-text
• amp-font
• amp-form
• amp-img
• amp-layout
• amp-lightbox
• amp-mraid, de forma experimental. Se você considera usar essa tag, por favor abra um issue em wg-monetization.
• amp-mustache
• amp-pixel
• amp-position-observer
• amp-selector
• amp-social-share
• amp-video

A maior parte das omissões são ou para garantir o desempenho ou para deixar os anúncios AMPHTML mais fáceis de analisar.

Example: O <amp-ad> foi omitido desta lista. Foi explicitamente proibido porque permitir um <amp-ad> dentro de outro <amp-ad> poderia levar potencialmente a cascatas ilimitadas de carregamento de anúncios, o que não adere às metas de desempenho dos anúncios AMPHTML.

Exemplo: O <amp-iframe> foi omitido desta lista. Foi proibido porque os anúncios poderiam usá-lo para executar JavaScript arbitrário e carregar conteúdo arbitrário. Os anúncios que queiram usar tais capacidades devem retornar false de a4aRegistry e usar o mecanismo de renderização existente para anúncios '3p iframe'.

Exemplo: <amp-facebook>, <amp-instagram>, <amp-twitter> e <amp-youtube> são todos omitidos pelas mesmas razões que <amp-iframe>: Todos criam iframes e poderiam potencialmente consumir recursos ilimitados dentro deles.

Exemplo: O <amp-ad-network-*-impl> foi omitido desta lista. A tag <amp-ad> cuida da delegação para essas tags de implementação; os criativos não devem tentar incluí-las diretamente.

Exemplo: O <amp-lightbox> ainda não foi incluído porque mesmo alguns criativos de anúncios AMPHTML poderiam ser renderizados em um iframe e não há, atualmente, nenhum mecanismo para que um anúncio se expanda além de um iframe. Poderá haver suporte para esse recurso no futuro, se houver demanda.

Tags HTML

As tags a seguir são permitidas em criativos de anúncios AMPHTML. Tags que não foram explicitamente permitidas são proibidas. Esta lista é um subconjunto da lista geral de adendos permitidos a tags AMP. Assim como nessa lista, a ordenação é consistente com a especificação HTML5 na seção 4 The Elements of HTML (Os elementos do HTML).

A maior parte das omissões foram motivadas por desempenho ou porque as tags não fazem parte do padrão HTML5. Por exemplo, <noscript> é omitida porque os anúncios AMPHTML dependem de JavaScript serem ativados, portanto um bloco <noscript> jamais será executado e apenas inchará o criativo, aumentando a latência e o custo de transferência. Da mesma forma, <acronym>, <big>, etc. são proibidos porque não são compatíveis com HTML5.

4.1 o elemento raiz

4.1.1 <html>

• É preciso usar os tipos <html ⚡4ads> ou <html amp4ads>

4.2 Metadados do documento

4.2.1 <head>

4.2.2 <title>

4.2.4 <link>

• <link rel=...> são proibidas, com exceção de <link rel=stylesheet>.

• Observação: diferentemente do AMP em geral, tags <link rel="canonical"> são proibidas.

4.2.5 <style> 4.2.6 <meta>

4.3 Seções

4.3.1 <body> 4.3.2 <article> 4.3.3 <section> 4.3.4 <nav> 4.3.5 <aside> 4.3.6 <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> 4.3.7 <header> 4.3.8 <footer> 4.3.9 <address>

4.4 Agrupamento de Conteúdo

4.4.1 <p> 4.4.2 <hr> 4.4.3 <pre> 4.4.4 <blockquote> 4.4.5 <ol> 4.4.6 <ul> 4.4.7 <li> 4.4.8 <dl> 4.4.9 <dt> 4.4.10 <dd> 4.4.11 <figure> 4.4.12 <figcaption> 4.4.13 <div> 4.4.14 <main>

4.5 Semântica de nível de texto

4.5.1 <a> 4.5.2 <em> 4.5.3 <strong> 4.5.4 <small> 4.5.5 <s> 4.5.6 <cite> 4.5.7 <q> 4.5.8 <dfn> 4.5.9 <abbr> 4.5.10 <data> 4.5.11 <time> 4.5.12 <code> 4.5.13 <var> 4.5.14 <samp> 4.5.15 <kbd > 4.5.16 <sub> and <sup> 4.5.17 <i> 4.5.18 <b> 4.5.19 <u> 4.5.20 <mark> 4.5.21 <ruby> 4.5.22 <rb> 4.5.23 <rt> 4.5.24 <rtc> 4.5.25 <rp> 4.5.26 <bdi> 4.5.27 <bdo> 4.5.28 <span> 4.5.29 <br> 4.5.30 <wbr>

4.6 Edições

4.6.1 <ins> 4.6.2 <del>

4.7 Conteúdo Incorporado

• Conteúdo incorporado é suportado apenas via tags AMP, tais como <amp-img> ou <amp-video>.

4.7.4 <source>

4.7.18 SVG

As tags SVG não fazem parte do espaço de nomes HTML5. Elas estão listados abaixo sem id de seção.

<svg>``<g>``<path>``<glyph>``<glyphref>``<marker>``<view>``<circle>``<line>``<polygon>``<polyline>``<rect>``<text>``<textpath>``<tref>``<tspan>``<clippath>``<filter>``<lineargradient>``<radialgradient>``<mask>``<pattern>``<vkern>``<hkern>``<defs>``<use>``<symbol>``<desc>``<title>

4.9 Dados tabulares

4.9.1 <table> 4.9.2 <caption> 4.9.3 <colgroup> 4.9.4 <col> 4.9.5 <tbody> 4.9.6 <thead> 4.9.7 <tfoot> 4.9.8 <tr> 4.9.9 <td> 4.9.10 <th>

4.10 Formulários

4.10.8 <button>

4.11 Scripting

• Como um documento AMP geral, a tag <head> do criativo deve conter uma tag <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>.
• Diferentemente do AMP geral, <noscript> é proibido.
• Justificativa: Como anúncios AMPHTML requerem que o Javascript seja ativado para poder funcionar, blocos <noscript> não têm nenhuma finalidade em anúncios AMPHTML e apenas aumentam o custo da transferência de rede.
• Diferentemente do AMP geral, <script type="application/ld+json"> é proibido.
• Justificativa: O JSON LD é usado para markup de dados estruturados em páginas hospedeiras, mas os criativos de anúncios não são documentos standalone e não contêm dados estruturados. Blocos JSON LD dentro deles aumentariam o custo da transferência pela rede.
• Todas as outras regras de scripting e exclusões são as mesmas do AMP geral.