Script para cargar AdSense en sitios con responsive design

Nuevo AdSense con código asíncrono: (actualizado agosto 2013)

Con el nuevo tipo de código asíncrono que optimiza la carga de las páginas, la forma de adaptar los anuncios al tamaño de la pantalla es ligeramente diferente a la que se utiliza con el código normal o síncrono.

Lo bueno es que para los anuncios asíncronos el propio panel de AdSense ofrece el código CSS que permite adaptarlos. Para utilizar los anuncios adaptables simplemente debes crear un nuevo bloque y en el tamaño del anuncio seleccionar «Bloque de anuncios adaptable (BETA)«.

El código que se genera tiene el siguiente estilo:

<style>
.xxxxxxxxx { width: 320px; height: 50px; }
@media(min-width: 500px) { .probando { width: 468px; height: 60px; } }
@media(min-width: 800px) { .probando { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- xxxxxxxxxx -->
<ins class="adsbygoogle xxxxxxxx"
style="display:inline-block"
data-ad-client="ca-pub-123456789"
data-ad-slot="123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Las líneas con el @media son las que permiten mostrar los anuncios según el tamaño de la pantalla, también es posible establecer un tamaño predeterminado indicando la altura y el ancho de los anuncios (siempre que coincidan con los tamaños predeterminados).

Puedes encontrar más detalles sobre la implementación de estos anuncios en esta página de ayuda, es importante tener en cuenta que este código sólo debe ser utilizado en sitios con diseños adaptables o responsive design.

AdSense con código normal o síncrono:

Para muchos sitios ofrecer una alternativa móvil de sus servicios o contenidos dejó de ser una opción secundaria o que «por ahora no es necesaria». Los dispositivos móviles cada vez son más utilizados para navegar, no hay dudas de ello, incluso hoy en día muchas personas están teniendo sus primeros contactos con internet a través de tabletas y smartphones.

Google está alentando a los webmasters a crear versiones móviles de sus sitios. Para aclarar el panorama en julio de este año publicaron un artículo en el blog oficial en el cual mencionan las opciones disponibles, recomendando especialmente el responsive design o diseño adaptable.

Se trata básicamente de una técnica que por medio de los estilos (CSS) permite adaptar el diseño de la web a distintos tamaños de pantalla, sin modificar el código HTML y las URLs. Pueden verlo en funcionamiento en este mismo blog si reducen el tamaño de la ventana o acceden desde un teléfono móvil, verán por ejemplo que la barra lateral se mueve hacia abajo para no quitarle espacio a los artículos.

La alternativa al diseño adaptable es mostrar una versión móvil especialmente creada y optimizada para ello, en WordPress por ejemplo un plugin muy fácil de usar es WPtouch. Dispone de una versión gratuita, es compatible con diversos plugins SEO y la publicidad de AdSense, permitiendo agregar fácilmente el banner de 320 x 50 que Google ofrece para los móviles.

Y al tema de la publicidad es al que quería llegar… en un sitio con diseño adaptable los banners de AdSense pueden ser un problema. Pues en una pantalla pequeña un anuncio de 336 x 280 o 728 x 90 aparecería cortado porque el espacio simplemente no es suficiente.

Esto no es algo penalizable por AdSense, pero no queda bien a la vista de los usuarios y además tal vez no se esté aprovechando al máximo el espacio publicitario. Ocultarlos con CSS no es una solución, pues eso sí va en contra de las políticas y además perjudicaría el rendimiento al generar impresiones de banners que no se están mostrando.

¿Y entonces qué se puede hacer? Hace unos días publicaron en el blog oficial la forma correcta de mostrar los anuncios de AdSense en los diseños adaptables. Simplemente hay que crear distintos tamaños de anuncios y agregarlos con un script especial que según el tamaño de la ventana cargará uno u otro. Es muy parecido al script que se utiliza en los A/B test.

El código que yo utilizo es el siguiente, también pueden encontrarlo en el post oficial, aunque el que publicaron tiene un par de errores que ya les notifiqué por Twitter para que lo arreglen:

<script type="text/javascript">
google_ad_client = "ca-pub-123456789";
if (window.innerWidth >= 400) {
google_ad_slot = "123456789";
google_ad_width = 336;
google_ad_height = 280;
} else {
google_ad_slot = "123456789";
google_ad_width = 300;
google_ad_height = 250;
}
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Obviamente deben cambiar el google_ad_client (identificador de la cuenta), los google_ad_slot (identificadores de los banners) y los tamaños que vayan a utilizar, datos que deben copiar directamente de los banners creados. El truco del script se encuentra en la propiedad window.innerWidth, en este caso si la ventana tiene 400 o más píxeles de ancho carga el banner de 336 y si es más chica como la de un iPhone se carga el de 300.

¿En un blog vale la pena crear una versión móvil?

Esta es una pregunta que cada uno sabrá responder, yo diría que sí porque está bueno que un blog se cargue más rápido en los teléfonos o que no haya que estar haciendo zoom en la pantalla para leer los post.

Si se desea analizar el tráfico para ver si vale la pena, en Google Analytics desde hace tiempo se muestran estadísticas móviles con lujo de detalles. Además en el mismo panel de AdSense es posible acceder a esa información desde la sección Informes de rendimiento / Plataformas:

Espero que la información resulte útil, por último les dejo algunos recursos para aprender más sobre el responsive design:

– Layout Sensible en HTML5 con Media Queries y JS (español).
– Building Smartphone-Optimized Websites (inglés).
– Building a Responsive, Future-Friendly Web for Everyone (inglés).
– Five responsive web design pitfalls to avoid (inglés).
– Tutorial desde cero de Responsive Design (video).