Clicky

Cómo utilizar anuncios de Google Adsense en un sitio web Responsive

Google Adsense Responsive

Google ha recomendado oficialmente utilizar el diseño sensible ya que mantiene una única URL

Responsive Web Design (o diseño web sensible o adaptativo) es una técnica sencilla que hace que un sitio web se vea bien en todos los tamaños de pantalla - ya sea el teléfono móvil, tabletas, ordenador de sobremesa o incluso el televisor de pantalla grande.

Google también ha recomendado oficialmente que los propietarios de sitios web utilicen el enfoque de diseño responsive en lugar de mantener los sitios web móvil y de escritorio separados, porque el diseño responsive "mantiene el contenido de escritorio y el contenido móvil en una única URL".

Anuncios de Google Adsense Responsives

Si estás utilizando anuncios de Google Adsense en tu sitio web responsive, te habrás dado cuenta de que, a diferencia del contenido, los anuncios de Google AdSense tienen un ancho fijo y no van a reducirse o aumentarse en función del tamaño de pantalla del visitante.

Por ejemplo, si estás utilizando en tu página web el banner estándar de 728x90, el bloque de anuncios se puede extender más allá de la pantalla si alguien está viendo tu sitio web en un teléfono móvil que sólo puede acomodar 320 píxeles.

anuncios responsive de Google Adsense

Los anuncios de Google Adsense no son responsive de forma predeterminada, pero hay una solución sencilla basada en JavaScript que hará que tus anuncios de Google respondan al tamaño de la pantalla. Lo mejor de todo, el equipo de Google AdSense ya ha aprobado oficialmente esta técnica de Anuncios Responsive.

Antes de profundizar en el código, por favor, echa un vistazo a esta página de demostración .

La demostración tiene un bloque de AdSense exactamente encima de la cabecera, pero el tamaño de la unidad variará dependiendo de la pantalla del visitante. Si estás viendo la demo en una pantalla ancha, verás un anuncio leaderboard, mientras que un usuario de móvil verá un rectángulo mediano o incluso enlace de 180×90 en función de la resolución de su pantalla.

Hacer anuncios de Google Adsense Responsive con JavaScript


[div id="google-ads-1"]
 [script type="text/javascript"]
	adUnit   = document.getElementById("google-ads-1");
	adWidth  = adUnit.offsetWidth;
	/* Replace this with your AdSense Publisher ID */
	google_ad_client = "ca-pub-1234567890";
	if ( adWidth >= 768 ) {
	  /* Leaderboard 728x90 */
	  google_ad_slot	= "AAA";
	  google_ad_width	= 768;
	  google_ad_height 	= 90;
	} else if ( adWidth >= 468 ) {
	  /* Banner (468 x 60) */
	  google_ad_slot	= "BBB";
	  google_ad_width 	= 468;
	  google_ad_height 	= 60;
	} else if ( adWidth >= 336 ) {
	  /* Large Rectangle (336 x 280) */
	  google_ad_slot 	= "CCC";
	  google_ad_width 	= 336;
	  google_ad_height 	= 280;
	} else if ( adWidth >= 300 ) {
	  /* Medium Rectangle (300 x 250) */
	  google_ad_slot 	= "DDD";
	  google_ad_width 	= 300;
	  google_ad_height 	= 250;
	} else if ( adWidth >= 250 ) {
	  /* Square (250 x 250) */
	  google_ad_slot	= "EEE";
	  google_ad_width 	= 250;
	  google_ad_height 	= 250;
	} else if ( adWidth >= 200 ) {
	  /* Ad Link Unit (200 x 90) */
	  google_ad_slot 	= "FFF";
	  google_ad_width 	= 200;
	  google_ad_height 	= 90;
	} else {
	  /* Do not display the Google Ad */
	  google_ad_slot		= "0";
	  adUnit.style.display	= "none";
	}
 [/script]
 [script type="text/javascript"    
   src="http://pagead2.googlesyndication.com/pagead/show_ads.js"]
 [/script]
[/div]
NOTA: Cambiar en los div y el javascript los corchetes [ ] por < >

Para empezar, crea varios bloques de anuncios (por ejemplo 768×90, 468×60 y 300×250). Desde tu panel de AdSense mira y reemplaza en el código de arriba google_ad_client (ca-pub-1234) y los identificadores google_ad_slot (AAA, BBB, etc.) con tus propios valores.

A continuación, copia y pega el código anterior en cualquier lugar de tu página web y, en función del tamaño (resolución) del dispositivo del usuario, nos aparecerá el formato de anuncio de AdSense más apropiado de forma automática. Si deseas incluir varios bloques de anuncios de AdSense en el mismo sitio web responsive, sólo tienes que utilizar el mismo fragmento de código, pero incrementando el ID (línea #4 y línea #8) de tal manera que se lea google-ads-1, google-ads-2 y así sucesivamente.

¿Qué hace este código?

•  Utiliza offsetWidth para calcular el ancho disponible para los anuncios.

•  Se puede configurar JavaScript para no mostrar anuncios de AdSense en pantallas muy pequeñas. Esto se hace al no especificar un google_ad_slot válido y estableciendo la propiedad display del bloque de anuncios en "none", por lo que no hay ningún espacio en blanco en cualquier lugar.

•  Es muy fácil incluir varios bloques de anuncios que respondan en la página web única.

Si bien siempre es una buena idea confirmarlo con vuestros gestores publicitarios, esta técnica no está en contra de las TOS de AdSense ya que no cambia el tamaño de los anuncios o se modifica el código JavaScript - sólo estamos sirviendo un bloque de anuncios diferentes en función del tamaño del navegador del visitante.

Los editores de AdSense realizan rutinariamente pruebas A/B para determinar qué esquemas de colores y tamaños de anuncios rinden mejor en su página web - esta es una técnica similar.

Ver también: Google AdSense Sandbox

Jesus_Caceres