Tamaños de anuncios

Cada espacio publicitario que definas debe especificar los tamaños de anuncios aptos para publicarse en dicho ranura. La forma en que se especifican los tamaños de anuncios varía según el tipo de anuncios que se que se muestran, así como el tamaño y la flexibilidad de los espacios publicitarios.

En algunos casos, el tamaño del anuncio puede anularse a nivel de la línea de pedido Google Ad Manager. Visita el Centro de ayuda para obtener más información más.

El código completo de los ejemplos incluidos en esta guía puede encontrarse en la página del de tallas.

Anuncios de tamaño fijo

Puedes definir un espacio publicitario con un tamaño fijo único.

googletag
  .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "fixed-size-ad")
  .addService(googletag.pubads());

En este ejemplo, solo se publicarán las creatividades con el tamaño 300x250.

Punto clave: Cuando trabaje con anuncios de tamaño fijo, le recomendamos que definen el tamaño del elemento <div> en el que se renderizará la creatividad. Desde las creatividades se renderizan de forma asíncrona, pueden provocar que otros elementos la página cambie si no tiene suficiente espacio.

Anuncios de varios tamaños

Si un anuncio admite varios tamaños, proporcione una lista de los tamaños compatibles cuando definir el espacio publicitario.

googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [[300, 250], [728, 90], [750, 200], "fluid"],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

En este ejemplo, las creatividades con tamaños 300x250, 728x90 y 750x200 se pueden publicado. Ad Manager solo considera las creatividades que coincidan con estos tamaños durante el proceso de selección de anuncios.

Si no se especifican las dimensiones para el espacio publicitario <div> en CSS, GPT establece automáticamente las dimensiones iguales a la más corta la altura declarada y el ancho declarado más ancho superior a 1 px cuando se llama a display() En este caso, sería 750x90. Sin embargo, este tamaño puede ocurrir después se cargó otro contenido en la página, lo que hace que ese contenido cambie. Para evitar cambios de diseño, reservar espacio usando CSS, como se muestra en el minimizar el cambio de diseño.

Cuando trabaje con anuncios de varios tamaños, asegúrese de que su diseño sea lo suficientemente flexible para admiten un anuncio con el tamaño más grande especificado. Esto evitará que las creatividades se recortadas inadvertidamente

Anuncios flexibles

Los anuncios flexibles no tienen un tamaño fijo, sino que se adaptan al contenido de la creatividad al que pantalla. Actualmente, los anuncios nativos son el único anuncio flexible compatible con Ad Manager.

Cuando se trabaja con anuncios flexibles, se puede especificar un tamaño de fluid personalizado.

googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

En este ejemplo, el espacio publicitario tendrá el ancho de su contenedor superior y y ajustar su altura para que se adapte al contenido de la creatividad. Pasos de GPT para cambiar el tamaño del espacio publicitario son los siguientes:

  1. Se recibe la respuesta del anuncio.
  2. El contenido de la creatividad se escribe en un iframe, con la altura inicial establecida en 0px y el ancho establecidos en 100%.
  3. Una vez que terminan de cargarse todos los recursos del iframe, se crea la creatividad. visible estableciendo la altura del iframe igual a la altura el elemento <body> del iframe.

Anuncios responsivos

Los anuncios responsivos amplían los anuncios de varios tamaños y le permiten especificar el tamaño creatividades para publicar en función del tamaño del viewport del navegador, lo que hace que para cada solicitud. Esta función puede usarse para controlar el tamaño de las creatividades publicadas a distintos tipos de dispositivos (computadoras de escritorio, tablets, dispositivos móviles, etc.).

Esto se logra definiendo una asignación entre el tamaño del viewport y el tamaño del anuncio, y, luego, asociar esa asignación a un espacio publicitario.

const responsiveAdSlot = googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "responsive-ad",
  )
  .addService(googletag.pubads());

const mapping = googletag
  .sizeMapping()
  .addSize(
    [1024, 768],
    [
      [750, 200],
      [728, 90],
    ],
  )
  .addSize([640, 480], [300, 250])
  .addSize([0, 0], [])
  .build();

responsiveAdSlot.defineSizeMapping(mapping);

En este ejemplo, la asignación especifica lo siguiente:

  • Si el viewport es >= 1024x768, se pueden publicar anuncios con un tamaño de 750x200 o 728x90.
  • Cuando 1024x768 > viewport >= 640x480, se pueden publicar anuncios con el tamaño 300x250.
  • Cuando la vista del puerto es < 640x480, no se pueden publicar anuncios.

GPT detectará el tamaño del viewport del navegador la solicitud y usar la asignación más grande que se ajuste. Para determinar La asignación de GPT considera primero el ancho y, luego, la altura (es decir, [100, 10] [10, 100]). Si se produce un error en la asignación o si el viewport no se puede determinar el tamaño, se utilizarán los tamaños especificados en defineSlot().

Luego, la asignación se asocia con un espacio publicitario llamando al Slot.defineSizeMapping(). Este método acepta un array de asignaciones en el siguiente formato:

[
  [
    [viewport-width-1, viewport-height-1],
    [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...]
  ],
  [
    [viewport-width-2, viewport-height-2],
    [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...]
  ],
  ...
]

El orden de los tamaños de viewport en este array define su prioridad. El SizeMappingBuilder en uso El ejemplo anterior es una forma conveniente de generar un array de este formato, con tamaños que se ordenan automáticamente de mayor a menor. En ese ejemplo, la salida de SizeMappingBuilder.build() es:

[
  [[1024, 768], [[750, 200], [728, 90]]],
  [[640, 480], [[300, 250]]],
  [[0, 0], []]
]