Hace poco más de dos años era impensable adaptar toda la interfaz de una web al tamaño de la ventana o dispositivo, lo que hoy conocemos como media queries. Sin embargo, los formatos de Google Adsense siguen tan cutres y antediluvianos como el primer día: siguen usando formatos de ancho fijo y esto es un problema en un mundo de diseños líquidos. Y estos días me tienen en jaque, ya que Google Adsense es la única herramienta que tengo pensada para rentabilizar mis proyectos y, mientras no pasa un sólo día sin que algún tuit me venda las bondades del responsive design, veo que rentabilizar esta novedad tecnológica es un futuro que nunca llega.

Buscando en Google

De nuevo, esto me lleva a mis búsquedas en Google y encuentro la pregunta de un muchacho que lanza la misma pregunta en los foros de Google Adsense. El chico acaba diciendo:

So basically what you’re saying is that I just literally can’t do what I need to do using Adsense?
Man, Google needs to keep up with the times.

Pues sí. Unos le dicen que recurra a un Javascript que cambie dinámicamente el formato de anuncio dependiendo del tamaño de la ventana y otros lo resuelven rápido: usa un display none. Pero damos por hecho que el cerebro del que hizo la pregunta barajó esa misma posibilidad antes de preguntar y seguro que su propio razonamiento encontró que no mostrar anuncios equivale a no ganar dinero. Y aquí queremos pasta, no responsives designs.

Google AdSense logo

¿Adsense? Responsive design? ¡Una solución quiero!

Google nos ofrece dos soluciones fuera de los anuncios estándar de Adsense, pero ninguna nos ayuda:

  1. Anuncios Adsense especiales para móviles. Una buena idea si no fuese porque nos obligan a dividir el sitio en 3 diseños: versión para escritorio, dispositivos de alta gama y versiones WAP.
  2. AdMob, la plataforma de publicidad para aplicaciones móviles. No nos interesa.

Nuestro salvavidas llega en este artículo de Digital Inspiration donde nos ofrece esta maravillosa solución:

<script type="text/javascript">
google_ad_client = "ca-publisher-id";
if (window.innerWidth >= 800) {
google_ad_slot = "ad-unit-1";
google_ad_width = 728;
google_ad_height = 60;
} else if (window.innerWidth < 400) {
google_ad_slot = "ad-unit-2";
google_ad_width = 300;
google_ad_height = 250;
} else {
google_ad_slot = "ad-unit-3";
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type="text/javascript" src="https://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

De esta forma, podemos sincronizar las condicionales de los media queries CSS con estas simples condicionales Javascript. Traduzco y añado la nota más importante del código:

Recuerda reemplazar los identificadores “google_ad_client” y “google_ad_slot” por tus propios valores (identificador de cliente de Adsense y slot de los anuncios que deseamos).

Y así termina “este terror tecnológico que ha construido”, parafraseando a Darth Vader.

Posted by Hans Christian

Freelance , & en Barcelona, especializado en proyectos de contenidos. Imparto cursos de WordPress. Currículum.