Cómo hacer bloques de anuncios de Adsense adaptables a diseños responsive

Cuando Google lanzó  hace ya una década su programa AdSense, la gente accedía a la web a través sus ordenadores de escritorio y portátiles. Actualmente Internet está presente en todo tipo de dispositivos; teléfonos móviles, videoconsolas, lectores de libros electrónicos, e incluso televisores.

Los diseñadores web y bloggers dependemos cada vez más de la técnica del diseño web sensible, también llamado receptivo, adaptable e incluso responsivo. Sus ventajas son importantes y su fundamentoes el uso de un sólo diseño que se adapta mostrándose bien en todos los dispositivos independientemente del tamaño y resolución de la pantalla.

Modificaciones permitidas del código de bloques anuncio de AdSense

Hasta ahora Google no permitía modificar el código de los anuncios de Adsense. Con la tendencia del diseño sensible Google ha decidido abrir las puertas a la modificación del código de los bloques de anuncios, mientras no afecte al funcionamiento normal de los mismos.

De paso, entre las modificaciones permitidas estan:

• Adaptarlo a diseños responsive.
• Hacer pruebas A/B para comprobar que diseño o anuncio funciona mejor.
• Reducción de las etiquetas de anuncio para que el código cargue más rápido.
• Configurar criterios de seguimiento de forma dinámica.

Tenéis mucha más información sobre la modificación del código de Adsense aquí. En cuanto adaptar el código a un diseño sensible hay que profundizar un poco más en el tema.

Cómo adaptar un bloque de anuncios de Adsense a un diseño sensible

Se trata de generar 2 códigos. El primero es el del bloque de anuncios de Adsense propiamente dicho (todavía en fase beta) y el segundo es el de un CSS que modifica ciertos parámetros del primero dinámicamente, según el ancho detectado en la pantalla del usuario.

Para generar este código debes ir a tu cuenta de Adsense y seguir atentamente las instrucciones para generar un código de bloques de anuncios de Adsense. Usa el botón Nuevo Bloque de Anuncios y en Tamaño del anuncio escoge Bloque de Anuncios Adaptable.

Sin PHP

Cópialo y añádelo en donde quieras que se muestre el anuncio. Puedes hacer una mejora si quieres, agregando un formato más: Hace poco más de 3 meses Adsense presentó su último tamaño de banner disponible, el 970 x 90 píxeles. Google no incluye este último banner por defecto en su código pero nosotros lo usaremos en el siguiente ejemplo:

<style>
.adaptable { width: 320px; height: 50px; }
@media(min-width: 500px){ .adaptable { width: 468px; height: 60px; }}
@media(min-width: 800px){ .adaptable { width: 728px; height: 90px; }}
@media(min-width: 1000px){ .adaptable { width: 970px; height: 90px; }} 
</style> 

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Adaptable -->
<ins class="adsbygoogle adaptable"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxx"
     data-ad-slot="xxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

La parte que está entre las etiquetas <style> y </style> tiene una línea en negrita más para incluir los nuevos banners de 970x90 píxeles. El resto del código debes conseguirlo desde tu cuenta por los caracteres en verde son únicos, o al menos el primero.

Cuando necesites insertar el código CSS (el que sigue te puede servir) dirígete a Plantilla -> Personalizar -> Añadir CSS en el menú de tu blog para insertarlo.

<style type="text/css">
.adslot_1 {
  width: 320px; height: 50px;
}
@media (min-width:500px) { .adslot_1 {
  width: 468px; height: 60px;
}}
@media (min-width:800px) { .adslot_1 {
  width: 728px; height: 90px;
}}
@media (min-width:1000px) { .adslot_1 {
  width: 970px; height: 90px;
}}
</style>

Cómo veis, lo que se hace es asignar el tamaño del anuncio dinámicamente. Tenéis otro ejemplo de código válido aquí. Finalmente para comprobar el correcto funcionamiento podéis recurrir al bookmarklet de Viewport Resizer.


Y esta es una de las formas de hacer que los anuncios de Adsense se adapten al ancho de la pantalla, ya que ahora es una de las modificaciones permitidas después de muchos años. Hacedlo con calma no vaya a ser el demonio! Si lo has probado deja un comentario para conocer tu opinión.

Más consejos y noticias en las entradas de la categoría de Adsense en el Exprimiblog.
El anuncio oficial en el blog de Adsense: adsense-es.blogspot.com.es
¿Sabes que puedes combinar el marketplace Adpv con Adsense?