Cada espacio publicitario que defina debe especificar los tamaños de anuncios aptos para publicarse en ese espacio. La forma en que se especifican los tamaños de anuncios varía según el tipo de anuncios que se mostrarán, 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 dentro de Google Ad Manager. Para obtener más información, visita el Centro de ayuda.
El código completo de los ejemplos incluidos en esta guía se encuentra en la página de muestra de tamaños de anuncios.
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 trabajes con anuncios de tamaño fijo, te recomendamos que definas el tamaño del elemento <div> en el que se renderizará la creatividad. Dado que las creatividades a menudo se renderizan de forma asíncrona, es posible que hagan que otros elementos de la página cambien si no hay suficiente espacio para ellos.
Anuncios de varios tamaños
Si un anuncio admite varios tamaños, proporciona una lista de los tamaños admitidos al definir el espacio publicitario.
googletag
.defineSlot(
"/6355419/Travel/Europe",
[
[300, 250],
[728, 90],
[750, 200],
],
"multi-size-ad",
)
.addService(googletag.pubads());
En este ejemplo, se pueden publicar creatividades con los tamaños 300x250, 728x90 y 750x200. Ad Manager solo considera las creatividades que coinciden con estos tamaños durante el proceso de selección de anuncios.
Si no se especifican las dimensiones del espacio publicitario <div> en CSS, GPT establecerá automáticamente las dimensiones iguales a la altura más corta declarada y el ancho más ancho declarados por más de 1 px cuando se llama a display().
En este caso, sería 750x90. Sin embargo, este tamaño puede ocurrir después de que se carga otro contenido en la página, lo que hace que ese contenido cambie. Para evitar cambios de diseño, reserva espacio con CSS como se muestra en la guía sobre cómo minimizar el cambio de diseño.
Cuando trabajes con anuncios de varios tamaños, asegúrate de que el diseño sea lo suficientemente flexible como para admitir un anuncio con el tamaño más grande especificado. Esto evitará que las creatividades se recorten accidentalmente.
Anuncios flexibles
Los anuncios flexibles no tienen un tamaño fijo, sino que se adaptan al contenido creativo que muestran. Actualmente, los anuncios nativos son el único tipo de anuncio flexible compatible con Ad Manager.
Cuando se trabaja con anuncios flexibles, se puede especificar un tamaño personalizado de fluid.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
En este ejemplo, el espacio publicitario tendrá el ancho de su contenedor superior y cambiará su tamaño para adaptarse al contenido de la creatividad. Los pasos que realiza GPT para cambiar el tamaño del espacio publicitario son los siguientes:
- Se recibió la respuesta del anuncio.
- El contenido de las creatividades se escribe en un iframe, con la altura inicial establecida en
0pxy el ancho en100%. - Una vez que terminan de cargarse todos los recursos del iframe, la creatividad se vuelve
visible estableciendo una altura del iframe igual a la altura del
elemento
<body>del iframe.
Anuncios responsivos
Los anuncios responsivos extienden los anuncios de varios tamaños y te permiten especificar el tamaño de las creatividades que se publicarán en función del tamaño del viewport del navegador que realiza la solicitud. Esta funcionalidad se puede usar para controlar el tamaño de las creatividades que se publican en diferentes tipos de dispositivos (computadoras de escritorio, tablets, dispositivos móviles, etcétera).
Para ello, se define una asignación entre el tamaño de viewport y el tamaño del anuncio y, luego, se asocia esa asignación con 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:
- Cuando viewport >=
1024x768, se pueden publicar anuncios con el tamaño750x200o728x90. - Cuando
1024x768> viewport >=640x480, se pueden publicar anuncios del tamaño300x250. - Cuando el viewport sea inferior a
640x480, no se podrán publicar anuncios.
GPT detectará el tamaño del viewport del navegador que realiza la solicitud y usará la asignación más grande que se ajuste. Para determinar la asignación de GPT más grande, primero considera el ancho y, luego, la altura (es decir, [100,
10] > [10, 100]). En caso de que se produzca un error en la asignación o no se pueda determinar el tamaño del viewport, se usarán los tamaños especificados en defineSlot().
Luego, la asignación se asocia con un espacio publicitario llamando al método Slot.defineSizeMapping(). Este método acepta un arreglo 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 dentro de este array define su prioridad. El elemento SizeMappingBuilder que se usó en el ejemplo anterior es una forma conveniente de generar un array de este formato, en el que los tamaños se ordenan automáticamente de mayor a menor. En ese ejemplo, el resultado de SizeMappingBuilder.build() es el siguiente:
[
[[1024, 768], [[750, 200], [728, 90]]],
[[640, 480], [[300, 250]]],
[[0, 0], []]
]