Crie a estrutura do anúncio

O HTML necessário para um anúncio AMPHTML is é uma variante do AMPHTML necessário para uma página AMP. Vamos nos familiarizar com o código necessário criando a estrutura de nosso anúncio HTML para AMP.

Usando seu editor de texto favorito, crie um arquivo HTML chamado my-amphtml-ad.html. Copie a seguinte marcação HTML para esse arquivo: ...

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My amphtml ad</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body></body>
</html>

Esta marcação é para um arquivo HTML básico e válido. Observe que incluímos a tag meta de viewport para termos um viewport responsivo.

Agora, vamos modificar o HTML para torná-lo um anúncio AMPHTML.

Na tag <html>, acrescente o atributo ⚡4ads, que identifica o documento como um anúncio AMPHTML. Alternativamente, você pode especificar o atributo amp4ads, que também é válido.

<!DOCTYPE html>
<html ⚡4ads>
  <head>
    ...
  </head>
</html>

OBSERVAÇÃO – Diferentemente das páginas AMP, os anúncios AMPHTML não requerem uma tag <link rel="canonical">.

Anúncios AMPHTML requerem sua própria versão do runtime AMP, portanto, adicione a seguinte tag <script> à seção <head> do seu documento:

<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>

Os criativos de anúncios AMPHTML requerem um estilo de boilerplate diferente e consideravelmente mais simples do que as páginas AMP. Acrescente o código a seguir à sua seção <head>:

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

Para aplicar um estilo no seu anúncio AMPHTML, seu CSS deve estar incorporado inline no documento AMPHTML usando tags <style amp-custom> na seção <head>. Como estamos renderizando um anúncio gráfico básico, não precisamos de nenhum CSS, portanto, não adicionaremos essas tags.

OBSERVAÇÃO – Para anúncios AMPHTML, o tamanho máximo para uma folha de estilo inline é 20 kilobytes. Saiba mais sobre requisitos de CSS na especificação de anúncios AMPHTML.

Este é o código completo para seu arquivo HTML:

<!DOCTYPE html>
<html ⚡4ads>
  <head>
    <meta charset="utf-8" />
    <title>My amphtml ad</title>
    <meta name="viewport" content="width=device-width" />
    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
    <style amp4ads-boilerplate>
      body {
        visibility: hidden;
      }
    </style>
  </head>
  <body></body>
</html>

Agora você tem um anúncio AMPHTML válido, embora um pouco vazio. Vamos criar o anúncio gráfico.

Começar