Como adaptar los anuncios de AdSense a la pantalla de los móviles

Si en nuestras páginas implementamos el diseño adaptable, para lograr que encajen y se vean correctamente en la pantalla de cualquier dispositivo o equipo, pero usamos anuncios anchos no ganaremos nada, ya que crearán la incómoda barra de desplazamiento horizontal.
Por otra parte si solo usamos bloques de anuncio pequeños, dejaremos de recibir ingresos al no mostrar en los monitores grandes de una PC los anuncios anchos que tradicionalmente son más generosos.
Google ahora permite usar en los bloques de publicidad de AdSense el diseño adaptable, para que se cargue el más adecuado de acuerdo al ancho de la pantalla del usuario.
No es nada difícil de implementar y los beneficios son considerables, al lograr que nuestros lectores queden complacidos con el diseño de nuestra página y no experimenten molestias con la publicidad, la que necesitamos para compensar los gastos de publicación y mantenimiento de cualquier sitio web.

¿Cómo lograr que los anuncios se adapten al tamaño de la pantalla?

Existen dos formas para conseguir que la publicidad de AdSense encaje en la pantalla de cualquier dispositivo o equipo ya sea este una computadora de escritorio, una tableta o un teléfono celular.
En el primer método se usa Javascript, en el otro se utiliza CSS3 para cargar el bloque de anuncio con el tamaño adecuado.
El primero de ellos es para los anuncios tradicionales.
El otro para los nuevos anuncios que cargan de forma asíncrona, que están disponible desde solo algún tiempo.
Este método permite que los anuncios carguen de forma más suave sin perjudicar la carga de otros elementos.
Es el método ideal pero en el momento de publicarse este artículo, aún se encuentra en fase beta.
Explicaremos la primera de ella que es la que se usa en más del 90% de los sitios web de internet.

Adaptar los bloques de anuncios tradicionales de AdSense

Los ejemplos prácticos del método usado lo puedes encontrar en los anuncios insertados en este artículo.
El primer bloque se muestra a un ancho de 728px de ancho por 90px de altura si se carga la página en una computadora de escritorio.
Si se carga usando un iPad, un Galaxy Tab u otra tableta, se muestra a 336px por 280px.
Por último se utiliza un iPhone, un GalaxySX o cualquier otro teléfono celular se muestra a: 300px por 250px.
Puedes comprobarlo fácilmente si lees este artículo desde una PC, solamente necesitas reducir el ancho de la pantalla del navegador y refrescar la página.
El código empleado es el siguiente:
<script type="text/javascript"><!-- google_ad_client = "ca-pub-XXXXXXXXXXXXXXXX"; width = document.documentElement.clientWidth; google_ad_slot = "8857602449"; google_ad_width = 300; google_ad_height = 250; if (width > 300) { google_ad_slot = "1525874496"; google_ad_width = 336; google_ad_height = 280; } if (width > 800) { google_ad_slot = "0504480285"; google_ad_width = 728; google_ad_height = 90; } //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
¿Cómo funciona?
Se usa la propiedad "documentElement.clientWidth" de Javascript, para condicionar el uso del código del anuncio de acuerdo al ancho de la pantalla.
O sea:
La siguiente imagen muestra todo lo anterior de forma visual:

Orden y tamaño de los bloques de anuncios

El primer anuncio siempre debe ser el más importante para nosotros o sea el predeterminado ya que navegadores antiguos u otros que no admitan CSS3, mostraran solo el primero de ellos.
Recuerda que no todos los formatos ni bloques generan la misma ganancia.
Lee: Los tamaños de anuncio de AdSense que proporcionan más ingresos.

---

¿Cómo usar el código adaptable en mi sitio?

Solo cópialo, sustituye tu código de usuario de AdSense y los códigos de cada tamaño de anuncio.
Pueden hacerse combinaciones diferentes, de acuerdo al interés de cada uno.

Usar y adaptar los nuevos anuncios asíncronos de AdSense

Los nuevos códigos de anuncios de AdSense que carga de forma asíncrona, son los ideales para cualquier sitio ya que funcionan correctamente en cualquier conexión de internet, sea rápida o lenta.
No retrasan en lo absoluto la carga de los restantes elementos de la página.
Se usa un solo script en cada página para cargar desde los servidores de Google el archivo "adsbygoogle.js".
Después de esa primera vez todas las páginas que se carguen de dicho sitio en el mismo navegador, mostrarán los anuncios casi de inmediato.
Otra de las ventajas es que el código es más sencillo y es el mismo para los tres bloques de anuncios.
No obstante de forma automática se muestra en cada uno de ellos un anuncio diferente.

¿Cómo obtener el código de los anuncios adaptables asíncronos?

El código obtenido es similar al siguiente que usamos nosotros en las páginas más recientes de nuestro sitio.