Abrir espacio

Guía de implementación

Banner de Ad Manager

Display ad slots (Google Publisher Tag)

El espacio de anuncio clásico de Ad Manager, creado con la Google Publisher Tag, con tamaño fijo, varios tamaños o responsivo.

  • Ad Manager
  • celular y escritorio
Aprender el formatoRevisar en mi sitio
Escritorio
Celular

Entiéndelo en 1 minuto

Qué es el banner de Ad Manager

El banner de Ad Manager es ese rectángulo de anuncio que queda fijo dentro de la página: en medio del texto, arriba o al costado. Piensa en un cartel colgado en la pared de la escuela. Tiene un lugar exacto y un tamaño exacto, y todos los que pasan por ahí pueden verlo. En Ad Manager, ese lugar reservado se llama slot, que es la palabra en inglés para espacio de anuncio. Quien pide y muestra el anuncio en ese espacio es el GPT, sigla de Google Publisher Tag, una biblioteca de código de Google que colocas en el sitio.

Funciona así: primero le dices a GPT qué bloque de anuncios de Ad Manager va a usar, qué tamaños caben ahí y en qué cajita de la página debe aparecer. Esa cajita es un div, un pedazo de HTML con un nombre único. Después GPT pide el anuncio y lo dibuja dentro de la cajita. El nombre de la cajita debe ser igual en los dos lugares. Si no lo es, el anuncio no aparece. El propio Google manda revisar esto cuando el anuncio no aparece.

El tamaño se puede elegir de tres formas. En el tamaño fijo, solo entran anuncios de esa medida, como 300 por 250. En el de varios tamaños, enumeras varias medidas y Ad Manager puede elegir cualquiera de ellas. En el responsivo, armas una tabla llamada asignación de tamaños, que indica qué medidas valen para cada ancho de pantalla: una lista para pantallas grandes y otra para pantallas pequeñas. Existe además el tamaño fluido, que se estira al ancho de la página, pero Google explica que hoy se usa solo para anuncios nativos.

Google creó esta forma de trabajar para que el sitio tenga control: tú decides dónde vive cada anuncio, qué tamaños acepta y cuándo se carga. La documentación enseña a dejar los anuncios del final de la página para que se carguen solo cuando la persona se acerca a ellos, lo que se llama carga diferida. También explica cómo actualizar un anuncio sin recargar toda la página, siguiendo reglas de tiempo y de declaración. Vale la pena usar el banner cuando ya tienes una cuenta de Ad Manager y quieres elegir con cuidado el lugar y el tamaño de cada espacio.

Paso a paso

Cómo implementarlo

  1. Genera la etiqueta en Ad ManagerEn Ad Manager, haz clic en Inventario y luego en Bloques de anuncios. Abre el bloque, ve a la pestaña Etiquetas, elige Etiqueta de editor de Google (GPT) y haz clic en Continuar. Haz las otras elecciones y copia las etiquetas en Resultados de etiquetas.
  2. Carga el GPT en el headColoca el script del GPT dentro de la parte head de la página. Es el que trae las herramientas de anuncios de Google al sitio.
  3. Define el slotAún en el head, indica al GPT la ruta del bloque de anuncios, los tamaños aceptados y el nombre del div. Si quieres un slot responsivo, agrega una asignación de tamaños. Al final, activa el servicio de anuncios.
  4. Crea el div con espacio reservadoEn el body, crea el div con el mismo nombre usado en la definición. Dale alto y ancho en el CSS, pensando en el anuncio más grande, para que nada salte en la pantalla cuando llegue el anuncio.
  5. Pide el anuncioJusto después del div, llama a la visualización con el nombre del div. Para que aparezcan anuncios de tu propio inventario, necesitas un elemento de línea activo con estado Listo.
  6. Carga diferida y actualizaciónSi quieres, activa la carga diferida para los espacios del final de la página. Si vas a actualizar anuncios, decláralo en Ad Manager en Inventario, Reglas de inventario, Declaraciones del editor, y usa la misma regla en la página.

Ejemplo implementado

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

El GPT y la definición del slot van en el head; el div con la llamada de visualización va en el body, en el lugar donde debe aparecer el banner.
<!-- No <head> -->
<script async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(() => {
    // Tamanhos por largura de tela (slot responsivo).
    const mapping = googletag
      .sizeMapping()
      .addSize([1024, 768], [[728, 90], [300, 250]])
      .addSize([0, 0], [300, 250])
      .build();

    googletag
      .defineSlot(
        "/1234567/exemplo",
        [[728, 90], [300, 250]],
        "banner-exemplo",
      )
      .defineSizeMapping(mapping)
      .addService(googletag.pubads());

    // Carregamento lento para espaços longe da tela.
    googletag.setConfig({
      lazyLoad: {
        fetchMarginPercent: 500,
        renderMarginPercent: 200,
        mobileScaling: 2.0,
      },
    });

    googletag.enableServices();
  });
</script>

<!-- No <body>, onde o anúncio deve aparecer -->
<div id="banner-exemplo" style="min-height: 250px;"></div>
<script>
  googletag.cmd.push(() => {
    googletag.display("banner-exemplo");
  });
</script>
En el escritorioAparece como un rectángulo fijo en el lugar que elegiste, por ejemplo 728 por 90 o 300 por 250. Se desplaza junto con la página, como cualquier parte del texto.
En el celularAparece en medio del contenido, en medidas que caben en la pantalla, como 300 por 250. Con la asignación de tamaños, el celular recibe solo las medidas que liberaste para pantallas pequeñas.

Lo que recomienda Google

Qué se puede y qué no

Sí se puede

  • Definir un tamaño fijo, una lista de varios tamaños o una asignación de tamaños por ancho de pantalla.
  • Reservar en CSS el espacio del mayor tamaño que puede aparecer. Google dice que esta es la forma más eficaz de evitar que la página salte.
  • Definir en el head los espacios que aparecen de inmediato, para que tengan prioridad.
  • Usar carga diferida en los espacios debajo del pliegue, que solo aparecen cuando la persona se desplaza por la página.
  • Actualizar anuncios con la función de actualización del GPT, en lugar de recargar toda la página, siempre que la actualización esté declarada en Ad Manager.
  • Actualizar por acción de la persona sin tiempo mínimo, ya que Google solo exige un intervalo mínimo para la actualización por tiempo o por evento.

No se puede

  • Usar en el div un nombre diferente al que se pasó en la definición del slot.
  • Actualizar anuncios sin declararlo en Ad Manager, o declararlo de forma incorrecta. Google lo trata como una infracción.
  • Actualizar por tiempo o por evento con un intervalo menor de 30 segundos en la web.
  • Limpiar el espacio antes de actualizar. La actualización ya cambia el anuncio, y limpiar solo deja el espacio en blanco por más tiempo.
  • Actualizar espacios que la persona nunca ve. Google advierte que esto puede hacer caer mucho la tasa de visibilidad.
  • Dejar el div sin medidas reservadas, lo que hace que el contenido salte cuando llega el anuncio.

Consejos

Para hacerlo bien

Cuidado

Errores comunes

Nombre del div diferente

El nombre pasado en la definición del slot y en la visualización debe ser igual al del div. Cuando no lo es, el anuncio simplemente no aparece.

Div de tamaño diferente al del anuncio

Google pide que el ancho, el alto y el nombre del div coincidan con lo que está en la etiqueta. Si no coinciden, el anuncio puede no aparecer.

Sin elemento de pedido listo

Sin un elemento de pedido activo con estado Listo, tu propio inventario no muestra anuncios, aunque el código sea correcto.

Asignación que deja vacío el celular

En el ejemplo de Google, las pantallas menores de 640 por 480 reciben una lista vacía y se quedan sin anuncio. Si lo copias sin ajustar, los celulares en vertical pueden quedarse sin banner.

Preguntas frecuentes

¿Cuál es la diferencia entre varios tamaños y responsivo?

En el de varios tamaños, cualquier medida de la lista puede aparecer en cualquier pantalla. En el responsivo, la asignación de tamaños indica qué medidas valen para cada ancho de pantalla.

¿Puedo usar el tamaño fluido en un banner común?

Google explica que hoy el único tipo fluido que Ad Manager acepta es el anuncio nativo. Para un banner común, usa tamaño fijo, varios tamaños o asignación.

¿Cuál es el tiempo mínimo para actualizar un anuncio?

En la web, la actualización por tiempo o por evento necesita al menos 30 segundos. La actualización por acción de la persona no tiene mínimo. En todos los casos, debe estar declarada en las Reglas de inventario.

¿Vale la pena usar carga diferida?

Google recomienda dejar para después los espacios debajo del pliegue, lo que ayuda sobre todo en el celular, donde los recursos son menores. Los espacios de arriba deben tener prioridad.

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