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> ...
<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 na seção
. Como estamos renderizando um anúncio gráfico básico, não precisamos de nenhum CSS, portanto, não adicionaremos essas tags.
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.