Cómo configurar anuncios responsive en Ad Manager con Size Mapping

Ad Manager no ofrece anuncios responsive de forma nativa, ya que todos sus anuncios son de tamaño fijo.

Para crear anuncios que se adapten automáticamente al tamaño de pantalla hay que configurar el Size Mapping con código JavaScript.

Es un poco más engorroso, pero con esta clase verás que es realmente sencillo e intuitivo, y una vez configurado no tendrás que hacer nada más.

Crea un archivo JavaScript para gestionar los códigos de Ad Manager

A diferencia de Adsense, los códigos de Ad Manager son un poquito más largos y complicados de leer al principio.

Para organizarnos mejor, vamos a meterlo en un archivo propio de JavaScript, y enlazarlo desde el header de nuestra plantilla.

Es tan fácil como abrir el bloc de notas, copiar el siguiente código y guardarlo con extensión .js

window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {

var MIANUNCIO= googletag.defineSlot('/000000000/ADS1', [[320, 480], [200, 200], [250, 360], [300, 250], [300, 300], [200, 446], [480, 320], [250, 250], [336, 280], [300, 600]], 'ADS1').addService(googletag.pubads());
var mappinMIANUNCIO = googletag.sizeMapping().addSize([1024, 768], [[300, 250], [320, 480], [200, 200], [250, 360], [300, 300], [200, 446], [480, 320], [250, 250], [336, 280]]).addSize([640, 480], [[300, 250], [300, 600]]).addSize([0, 0], [[320, 480], [200, 200], [250, 360], [300, 250], [300, 300], [200, 446], [250, 250], [336, 280]]).build();
MIANUNCIO.defineSizeMapping(mappinMIANUNCIO);

googletag.pubads().enableSingleRequest();
googletag.pubads().collapseEmptyDivs();
googletag.pubads().enableLazyLoad({fetchMarginPercent: 100,renderMarginPercent: 50,mobileScaling: 2.0  });
googletag.enableServices();});

Luego vamos al archivo header.php de nuestra plantilla, y añadimos la siguiente línea lo más arriba posible (pero siempre después de los script que carguen el CMP):

<script async src="https://tudominio.com/TUARCHIVO.js"></script>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

Especificar tamaños de anuncio por ancho de pantalla

Bien, te voy a explicar el código anterior para que veas cómo funciona.

Vamos a fijarnos en la tercera línea:

MIANUNCIO corresponde al identificador al que luego haremos referencia más adelante en el size mappgin. Puedes poner el nombre que quieras.

/000000000/ corresponde al código de red de tu cuenta de Ad Manager.

ADS1 es el nombre del anuncio configurado en tu panel.

A continuación, entre corchetes, indicamos los distintos tamaños de anuncio que queremos que ese anuncio pueda mostrar:

[[320, 480], [200, 200], [250, 360], [300, 250], [300, 300], [200, 446], [480, 320], [250, 250], [336, 280], [300, 600]]

Luego volvemos a indicar el nombre de nuestro anuncio, en este caso ADS1, y especificamos los distintos tamaños habilitados por cada resolución de pantalla. Para ello solo debemos adaptar estas partes:

.addSize([1024, 768], [[300, 250], [320, 480], [200, 200], [250, 360], [300, 300], [200, 446], [480, 320], [250, 250], [336, 280]]).addSize([640, 480], [[300, 250], [300, 600]]).addSize([0, 0], [[320, 480], [200, 200], [250, 360], [300, 250], [300, 300], [200, 446], [250, 250], [336, 280]])

Como ves, cada negrita indica el inicio de la resolución de pantalla, y a continuación, los diferentes tamaños para la misma. El tamaño .addSize([0, 0] corresponde a los dispositivos móviles.

Lo único que tienes que hacer es añadir o quitar cada tamaño que te interese, manteniendo la estructura de comas y corchetes. Por ejemplo, si en la resolución de 1024×768 quisiera añadir el tamaño 50×50, quedaría así:

.addSize([1024, 768], [[300, 250], [320, 480], [200, 200], [250, 360], [300, 300], [200, 446], [480, 320], [250, 250], [336, 280], [50, 50]])

Por último, acabamos el código añadiendo el indicador MIANUNCIO (o el nombre que hayas puesto al principio) en la última línea, y mappinMIANUNCIO al final del todo.

Este proceso hay que repetirlo por cada bloque de anuncio de Ad Manager que vayas a mostrar en tu web (desde la línea 3 hasta el último mappinMIANUNCIO)

Las últimas 6 líneas se encargan de hacer la petición del anuncio, colapsar el espacio de los anuncios que no se rellenen, y activar la carga diferida para que no se muestren los anuncios hasta que sean visibles en pantalla. Con esto no hay que hacer nada más.

Y ya lo tendríamos.