Abrir espacio

Guía de implementación

Anuncios en páginas AMP

AMP ads (amp-ad, amp-auto-ads, amp-sticky-ad)

Cómo mostrar anuncios en páginas AMP con amp-ad, anuncios automáticos y franja fija, en AdSense y en Ad Manager.

  • AdSense
  • Ad Manager
  • celular y escritorio (en páginas AMP)
Aprender el formatoRevisar en mi sitio
Escritorio
Celular

Entiéndelo en 1 minuto

Qué son los anuncios en páginas AMP

AMP es una forma de armar páginas muy livianas y rápidas, creada como un proyecto abierto. Imagina una lonchera con divisiones: cada cosa tiene su lugar y no puedes meter cualquier cosa ahí dentro. En una página AMP es igual. No puedes pegar cualquier código de anuncio. En su lugar, usas piezas listas, llamadas componentes, que ya saben pedir y mostrar anuncios sin hacer pesada la página.

Son tres piezas principales. El amp-ad es el espacio de anuncio común, como un banner: indicas el tipo de red, adsense para AdSense o doubleclick para Ad Manager, e informas el ancho y el alto. El amp-auto-ads es el modo automático: recibe una configuración de la red y elige solo dónde colocar anuncios, respetando un número máximo y una distancia mínima entre ellos. El amp-sticky-ad es la franja que queda fija en la parte inferior de la pantalla, como un ancla, y tiene botón de cerrar.

El código de la red de anuncios no se ejecuta directamente en la página. Se ejecuta en un recuadro separado, llamado iframe, que controla el propio AMP. Si no llega un anuncio, AMP intenta ocultar el espacio vacío, pero no oculta un espacio que está en la pantalla, para que la página no salte. Los anuncios AMP tampoco pueden estar dentro de cajas con posición fija, salvo los anuncios fijos propios de AMP y el amp-lightbox.

Google explica que AMP es un proyecto abierto que busca páginas rápidas y con buen rendimiento en cualquier dispositivo. En AdSense, creas un bloque de anuncios y eliges el código AMP, o activas los Anuncios automáticos para AMP. En Ad Manager, generas etiquetas AMP directo en el panel, y Google recomienda usar anuncios HTML para AMP. Vale la pena usarlo si tu sitio ya tiene versiones AMP de las páginas y quieres que también muestren anuncios.

Paso a paso

Cómo implementarlo

  1. Carga los componentes en el headColoca en el head de la página AMP el script del amp-ad. Si usas anuncios automáticos o franja fija, coloca también los scripts del amp-auto-ads y del amp-sticky-ad.
  2. AdSense: crea un bloque AMPEn AdSense, haz clic en Anuncios, Por bloque de anuncios y Anuncios de display. Ponle un nombre, deja Responsivo, haz clic en Guardar y obtener código y haz clic en AMP. El script va en el head y el código del anuncio va en el body.
  3. AdSense: activa los automáticos para AMPEn Anuncios, haz clic en ¿Tienes un sitio AMP?, activa Anuncios automáticos para AMP y haz clic en Obtener el código AMP. Pega el script en el head y el código justo después de la apertura del body de cada página. Después haz clic en Listo y Aplicar.
  4. Ad Manager: genera la etiqueta AMPHaz clic en Inventario y en Bloques de anuncios, abre el bloque y ve a la pestaña Etiquetas. Elige Etiqueta AMP y haz clic en Continuar. Marca Marcadores de AMP para incluir el espacio reservado y los sustitutos, y elige los tamaños del bloque.
  5. Conecta la página AMP con la normalEn la página normal, apunta a la versión AMP con la marca amphtml. En la página AMP, apunta de vuelta a la normal con la marca canonical.
  6. Espera y verificaLos anuncios pueden tardar unos minutos y, a veces, hasta una hora en aparecer.

Ejemplo implementado

El código y cómo se ve en pantalla

Los scripts de los componentes van en el head; el amp-auto-ads va justo después de abrir el body, y los demás anuncios van en el body, donde deben aparecer.
<!-- No <head> da página AMP -->
<script async custom-element="amp-ad"
  src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-auto-ads"
  src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
<script async custom-element="amp-sticky-ad"
  src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

<body>
  <!-- AdSense: anúncios automáticos, logo depois de abrir o body -->
  <amp-auto-ads type="adsense"
    data-ad-client="ca-pub-0000000000000000">
  </amp-auto-ads>

  <!-- AdSense: bloco responsivo, onde o anúncio deve aparecer -->
  <amp-ad width="100vw" height="320"
    type="adsense"
    data-ad-client="ca-pub-0000000000000000"
    data-ad-slot="1234567890"
    data-auto-format="rspv"
    data-full-width>
    <div overflow></div>
  </amp-ad>

  <!-- Ad Manager: faixa fixa embaixo (só uma por página) -->
  <amp-sticky-ad layout="nodisplay">
    <amp-ad width="320" height="50"
      type="doubleclick"
      data-slot="/1234567/exemplo">
    </amp-ad>
  </amp-sticky-ad>
</body>
En el escritorioEl amp-ad ocupa el espacio con el ancho y el alto definidos, como un banner común. La franja fija del amp-sticky-ad queda pegada abajo, con ancho completo y un máximo de 100 píxeles de alto.
En el celularEl bloque responsivo de AdSense ocupa el ancho de la pantalla. La franja fija queda abajo, se puede cerrar, y al llegar al final de la página AMP da un espacio extra para que no cubra el contenido.

Lo que recomienda Google

Qué se puede y qué no

Sí se puede

  • Usar el amp-ad con el tipo adsense o doubleclick, indicando ancho y alto.
  • Usar bloques responsivos de AdSense, que Google recomienda dejar seleccionados.
  • Usar el amp-auto-ads con AdSense y desactivar, en el panel, los formatos que no quieras en las páginas AMP.
  • Tener una franja fija amp-sticky-ad por página, con un único amp-ad dentro.
  • Mostrar un espacio reservado mientras el anuncio se carga y un sustituto cuando no llega.
  • En Ad Manager, actualizar anuncios AMP que usan Fast Fetch, con un intervalo mínimo de 30 segundos.

No se puede

  • Colocar el amp-ad dentro de cajas con posición fija, excepto los anuncios fijos y el amp-lightbox.
  • Tener más de un amp-sticky-ad en la misma página.
  • Usar fondo transparente o semitransparente en la franja fija. AMP lo cambia por un color sólido.
  • Servir anuncios o embeds sin HTTPS.
  • En Ad Manager, activar la actualización junto con la solicitud única (SRA). La actualización se desactiva y aparece un error.
  • Usar el amp-ad directamente en una Web Story. Las Web Stories usan el amp-story-auto-ads.

Consejos

Para hacerlo bien

Cuidado

Errores comunes

Script fuera del head

El script de cada componente va en el head, y el anuncio va en el body. Sin el script correcto, el componente no funciona.

Copiar código de ejemplo

AdSense entrega el código AMP listo cuando eliges la opción AMP. Copia el código de tu cuenta, con tu ID de editor.

Franja fija mal armada

El amp-sticky-ad necesita el diseño nodisplay y un único amp-ad dentro de él.

Página AMP suelta

AdSense pide que la página normal y la página AMP se apunten entre sí, con las marcas amphtml y canonical.

Preguntas frecuentes

¿Puedo usar el código normal de AdSense en una página AMP?

Usa el código AMP. En páginas AMP, el JavaScript de la red de anuncios no se ejecuta directamente en la página, sino en un iframe controlado por AMP.

¿Qué pasa si no llega un anuncio?

AMP intenta ocultar el espacio. Si no lo logra, muestra el sustituto. La franja fija sin anuncio no aparece.

¿Ad Manager actualiza anuncios en AMP?

Sí, en anuncios con Fast Fetch. Pones una marca en el head con el intervalo, de mínimo 30 segundos, por página o por slot. No funciona junto con SRA.

¿Cuánto tardan en aparecer los anuncios?

En general unos minutos, y a veces hasta una hora.

Biblioteca

Fuente oficial de Google

Todo en esta página sigue la documentación oficial de Google. Léela directo en la fuente:

¿Tu sitio usa este formato de la manera correcta?

La auditoría lee el sitio como un visitante, sin hacer clic en nada, y muestra qué corregir.

Hacer una auditoría