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

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

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.

Capítulo anterior Próximo capítulo

{{#initial}}Componentes importantes{{/initial}}{{^initial}}Componentes{{/initial}}

{{#initial}}<{{title}}>{{/initial}}{{^initial}}{{title}}{{/initial}}

{{#initial}}Artigos populares{{/initial}}{{^initial}}Resultados{{/initial}}

{{title}}

;(

Algo deu errado…

¯\_(ツ)_/¯

Nenhum resultado encontrado.

Crie a estrutura do anúncio