AMP

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:

Regra Justificativa
Deve ser contido dentro de tags <html ⚡4ads> ou <html amp4ads>. Permite que os validadores identifiquem um documento criativo ou como um documento AMP genérico ou um documento de anúncio AMPHTML restrito, para que seja despachado de forma apropriada.
Deve incluir <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script> como o script de execução em vez de https://cdn.ampproject.org/v0.js. Permite comportamentos personalizados em tempo de execução para anúncios AMPHTML servidos em iframes cross-origin.
Não deve incluir uma tag <link rel="canonical">. Criativos de anúncios não possuem uma "versão canônica não-AMP" e não serão independentemente indexados à pesquisas, portanto o auto-referenciamento seria inútil.
Pode incluir meta tags opcionais no head do HTML como identificadores, no formato <meta name="amp4ads-id" content="vendor=${vendor},type=${type},id=${id}">. Essas meta tags devem ser colocadas antes do script amp4ads-v0.js. O valor de
vendor e idsão strings que contêm apenas [0-9a-zA-Z_-]. O valor de type ou é creative-id ou impression-id.
Esses identificadores personalizados podem ser usados para identificar a impressão ou o criativo. Eles podem ser úteis para relatórios e depuração.

Exemplo:

 <meta name="amp4ads-id" content="vendor=adsense,type=creative-id,id=1283474"> <meta name="amp4ads-id" content="vendor=adsense,type=impression-id,id=xIsjdf921S">
Rastreamento de visibilidade <amp-analytics> só poderá ter como alvo o seletor full-ad, via "visibilitySpec": { "selector": "amp-ad" } como definido em Issue #4018 e PR #4368. Em particular, não pode conter nenhum seletor para elementos dentro do criativo de anúncio como alvo. Em alguns casos, anúncios AMPHTML poderão decidir renderizar um criativo de anúncio em um iframe. Nesses casos, as análises da página hospedeira só poderão ter como alvo o iframe inteiro, e não haverá acesso a quaisquer seletores de menor granularidade.

Example:

<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>

Esta configuração envia uma solicitação para a URL https://example.com/nestedAmpAnalytics URL, quando 50% do anúncio que o contém tem sido continuamente visível na tela por 1 segundo.

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

Regra Justificativa
position:fixed and position:sticky são proibidas no CSS de criativos. position:fixed é extraído do DOM sombra, do qual dependem os anúncios AMPHTML. Os anúncios em AMP já não têm permissão para usar a posição fixed.
touch-action é proibido. Um anúncio que pode manipular touch-action poderá interferir na capacidade do usuário de rolar o documento hospedeiro.
O CSS de criativos está limitado a 20.000 bytes. Grandes blocos CSS incham o criativo, aumentam a latência da rede e degradam o desempenho da página.
Transições e a animações estão sujeitas a restrições adicionais. O AMP deve ser capaz de controlar todas as animações pertencentes a um anúncio, para que ele possa interrompê-los quando o anúncio não estiver na tela ou se os recursos do sistema estiverem muito escassos.
Para fins de validação, prefixos proprietários de determinados fornecedores são considerados aliases para o mesmo símbolo sem o prefixo. Isto significa que, se um símbolo fooé proibido pelas regras de validação CSS, então o símbolo -fornecedor-foo também será proibido. Algumas propriedades prefixadas pelo fornecedor oferecem funcionalidades equivalentes a propriedades que são proibidas ou restringidas sob estas regras.

Exemplo: as propriedades -webkit-transition e -moz-transition são ambas consideradas aliases para transition. Elas só seriam permitidas em contextos onde transition fosse permitida (veja a seção Seletores abaixo).

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.

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.