Cómo usar Google Adsense en diseños web sensibles

El diseño web sensible (responsive web design) es una técnica sencilla pero potente que hace que un sitio web se vea bien en todos los tamaños de pantalla, ya sea telefonos moviles, tablets, PC e incluso televisores. Google recomienda el enfoque del diseño sensible para la indexación mejorada ya que mantiene el contenido para PC y movil en una sola URL. Hace unas semanas atrás explicamos en un tutorial de Cómo Redimensionar contenido de página web independientemente del dispositivo que se usa para navegar por la web, probablemente les sirva.

Volviendo al tema del post, si usamos anuncios de Google en nuestra web quizas nos daremos cuenta que aunque nuestro contenido podemos redimensionarlo, el de los anuncios de Google no, pues tiene un ancho fijo y no vamos a poder redimensionarlo en función del tamaño del dispositivo.

Si, por ejemplo estamos usando en nuestra web un anuncio de 728x90px, que muy bien se ve en nuestra computadora personal, pero que en un dispositivo movil con 320px de ancho el anuncio se extienda más allá de la pantalla, definitivamente descuadra nuestro diseño.

Para ello se puede usar código de JavaScript para que los anuncios respondan al tamaño de la pantalla. Puedes crear varios bloques de anuncios y en base al tamaño de pantalla del dispositivo del usuario, mostrar el formato más apropiado. 

<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="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Obviamente tienen que cambiar los valores de google_ad_client y google_ad_slot, valores que aparecen en sus anuncios.

Cómo se aprecia en el código es la propiedad innerWidth, que obtiene el ancho en píxeles de la ventana del navegador, la que realiza el proceso principal. Una vez se sabe su valor sirve el anuncio respectivo.

Vía Digital Inspiration