Implementación del código del anuncio

Crear bloques de anuncios compatibles con AMP

En esta guía se explica cómo crear bloques de anuncios compatibles con AMP para mostrar anuncios de AdSense en este tipo de páginas.

Los bloques de anuncios AMP pueden ser adaptables o tener un tamaño fijo. Le recomendamos que use los primeros por estos motivos:

  • Los bloques de anuncios AMP adaptables cambian de tamaño automáticamente según el dispositivo de los usuarios y ocupan todo el ancho de sus pantallas.
  • Google optimiza las dimensiones de los anuncios para que ofrezcan un rendimiento óptimo en sus páginas.
Todas las funciones de AdSense (como Permitir y bloquear anuncios, Balance de anuncios, Informes de rendimiento, etc.) están disponibles con los anuncios AMP.

Antes de empezar

Compruebe que ha añadido la secuencia de comandos AMP necesaria en las páginas en las que quiera que se muestren anuncios de este tipo.

  • Para ello, copie y pegue el siguiente código entre las etiquetas <head></head> del código HTML de AMP.

    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Esta secuencia de comandos sirve para cargar las bibliotecas amp-ad necesarias, pero no hace que los anuncios aparezcan en las páginas AMP por sí sola. Para que aparezcan, también debe añadir código de anuncio compatible con AMP. Puede obtener más información sobre el componente amp-ad en https://www.ampproject.org/docs/reference/components/amp-ad.

Crear bloques de anuncios adaptables compatibles con AMP

Hoy por hoy, los bloques de anuncios AMP adaptables se tienen que crear manualmente siguiendo estos pasos:

  1. Cree un bloque de anuncios adaptable en su cuenta de AdSense.
  2. Busque los siguientes datos en el código de anuncio del bloque adaptable que ha creado en el paso 1 y anótelos:
    • El ID del editor (data-ad-client), por ejemplo, ca-pub-1234567891234567
    • El ID del bloque de anuncios (data-ad-slot), por ejemplo, 1234567890

    Ver ejemplo

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:inline-block;width:120px;height:600px"
         data-ad-client="ca-pub-1234567891234567"
         data-ad-slot="1234567890"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  3. Cree el código de anuncio AMP
    Copie el siguiente código de anuncio y reemplace los valores data-ad-client y data-ad-slot con los valores que apuntó en el paso 2 .
    <amp-ad width="100vw" height=320
      type="adsense"
      data-ad-client="ca-pub-1234567891234567"
      data-ad-slot="1234567890"
      data-auto-format="rspv"
      data-full-width>
        <div overflow></div>
    </amp-ad>
    Le recomendamos encarecidamente que no modifique ninguna otra parte de este código de anuncio, ya que puede dejar de funcionar.
  4. Pegue el código de anuncio AMP en el código fuente HTML de la página para móviles en la que quiere que aparezcan los anuncios. Tanto la mitad superior como la mitad inferior de la página son emplazamientos de anuncios válidos. No olvide que las políticas del programa de AdSense siguen aplicándose a las páginas que contienen bloques de anuncios AMP. 
    No coloque el código de anuncio dentro de un contenedor principal (como <div> o <iframe>) con una altura fija o limitada. De lo contrario, el anuncio puede cambiar de tamaño y alterar el diseño de la página.
  5. (Opcional) Después de colocar el código de anuncio AMP, le recomendamos que pruebe los anuncios en varios dispositivos para comprobar que se adaptan correctamente.
    Puede que los anuncios aparezcan con retraso cuando los vea en una página AMP. Esto se debe a que AMP da prioridad al contenido. Más información sobre cómo se almacenan en caché las páginas AMP

Casos prácticos avanzados: anuncios AMP con un tamaño fijo, estilos, etc.

Si quiere que un bloque de anuncios AMP tenga una altura o una anchura determinadas, siga las instrucciones sobre cómo modificar el código de anuncio AMP adaptable.

Si le interesa ir un paso más allá, puede añadir estilos a los elementos de los anuncios AMP igual que se aplican al resto de elementos de estas páginas. Obtenga más información sobre las diferentes formas de modificar los diseños.

Consultar el rendimiento de los bloques de anuncios AMP

Consulte el informe "Plataforma de contenido" para ver el rendimiento de sus bloques de anuncios AMP.

¿Te ha sido útil este artículo?
¿Cómo podemos mejorar esta página?