Cómo crear la estructura para un anuncio

El HTML que necesite para un anuncio es una variante del AMP HTML que necesita para crear una página de AMP. Debemos acostumbrarnos a utilizar el código que sea necesario para generar la estructura de nuestro anuncio AMP HTML.

Con ayuda de su editor de texto favorito, genere un archivo HTML llamado my-amphtml-ad.html. Posteriormente, copie los siguientes marcadores HTML en ese archivo:

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

Estos marcadores se utilizan en los archivos HTML básicos que son válidos. Tenga en cuenta que incluimos la meta etiqueta de la ventana de visualización para que tengamos una ventana de visualización adaptable.

Ahora, modifiquemos el archivo HTML para convertirlo en un anuncio AMP HTML.

En la etiqueta <html>, agregue el atributo ⚡4ads, que identifica el documento como un anuncio AMP HTML. De forma alternativa, puede especificar el atributo amp4ads, lo cual también es válido.

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

NOTA – A diferencia de las páginas AMP, los anuncios AMP HTML no necesitan una etiqueta <link rel="canonical">.

Los anuncios AMP HTML necesitan su propia versión del tiempo de ejecución en AMP, por lo que debe agregar la siguiente etiqueta <script> en la sección <head> de su documento:

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

Los creativos de los anuncios AMP HTML requieren de un código reutilizable diferente y con un estilo considerablemente más simple en comparación con las páginas de AMP. Para conseguir esto, agregue el siguiente código a su sección <head>:

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

Si desea establecer el estilo de su anuncio AMP HTML, su CSS debe estar integrado en el documento AMP HTML mediante las etiquetas <style amp-custom> en la sección <head>. Como estamos renderizando un anuncio con una imagen básica, no se necesita ninguna CSS así que no agregaremos estas etiquetas.

NOTA – Para los anuncios AMP HTML, el tamaño máximo para una hoja de estilos integrados en el código es de 20 kilobytes. Puede obtener más información sobre los requisitos de las CSS en las especificaciones para los anuncios AMP HTML.

Este es el código completo de su archivo 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>

Ahora ya tiene un anuncio AMP HTML válido, aunque está bastante vacío. Por lo tanto, vayamos a crear la imagen del anuncio.

Comenzar