[TUT] Personalización de anuncios responsivos según nos convenga

[popobcn]

Buenas,

Hace poco Google ha abierto la veda a la personalización de algunos aspectos de sus bloques de anuncios incluso permitiendo agregarles estilos CSS y que los mismos contengan media-queries para optimizar al máximo la presentación o no de determinados bloques de anuncio e incluso establecer dimensiones personalizadas a los mismos.

Consultar documento: https://support.google.com/adsense/a..._topic=1307438

He encontrado varios ejemplos de personalización de los ADS de Google y alguno de ellos sumamente interesantes, aquí os dejo un ejemplo de labnol (http://www.labnol.org/internet/googl...-design/25252/) el cual he personalizado para que se pueda llegar a determinar - incluso - el formato del anuncio que deseamos mostrar, por ejemplo: rectangle, horinzontal o vertical.

En este ejemplo, aplicados una medida determinada en cada dimensión del espacio destinado para el anuncio:

Código HTML:

<div id="google-ads-1"></div>
<script type="text/javascript"> 
 
	/* Calculate the width of available ad space */
	ad = document.getElementById('google-ads-1');
 
	if (ad.getBoundingClientRect().width) {
		adWidth = ad.getBoundingClientRect().width; // for modern browsers 
	} else {
		adWidth = ad.offsetWidth; // for old IE 
	}
	console.log(adWidth);
	/* Replace ca-pub-XXX with your AdSense Publisher ID */ 
	google_ad_client = "ca-pub-tu-id-personal";
 
	/* Replace 1234567890 with the AdSense Ad Slot ID */ 
	google_ad_slot = "id-anuncio-responsive";
  
	/* Do not change anything after this line */
	if ( adWidth >= 728 ){
		google_ad_size = ["728", "90"]; 
		google_ad_format = "horizontal";  /* Leaderboard 728x90 */
	}else if ( adWidth >= 468 ){
		google_ad_size = ["468", "60"];  
		google_ad_format = "horizontal";  /* Banner (468 x 60) */
	}else if ( adWidth >= 336 ){
		google_ad_size = ["336", "280"];  
		google_ad_format = "rectangle"; /* Large Rectangle (336 x 280) */
	}else if ( adWidth >= 300 ){
		google_ad_format = "rectangle"; /* Medium Rectangle (300 x 250) */ 
		google_ad_size = ["300", "250"];
	}else if ( adWidth >= 250 ){
		google_ad_format = "rectangle"; /* Square (250 x 250) */ 
		google_ad_size = ["250", "250"];
	}else if ( adWidth >= 200 ){
		google_ad_format = "rectangle"; /* Small Square (200 x 200) */ 
		google_ad_size = ["200", "200"];
	}else if ( adWidth >= 180 ){
		google_ad_format = "auto"; /* Small Rectangle (180 x 150) */ 
		google_ad_size = ["180", "180"];
	}else{
		google_ad_format = "auto"; /* Button (125 x 125) */
		google_ad_size = ["125", "125"];
	}
	document.getElementById('google-ads-1').innerHTML += (
	'<ins class="adsbygoogle" style="display:block;width:' 
	+ google_ad_size[0] + 'px;height:' 
	+ google_ad_size[1] + 'px" data-ad-client="' 
	+ google_ad_client + '" data-ad-slot="' 
	+ google_ad_slot + '" data-ad-format="'+google_ad_format+'"></ins>'
	);
	(adsbygoogle = window.adsbygoogle || []).push({});
</script>								
 
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script> 

Sobre le ejemplo original de labnol hemos incorporado la definición del formato del anuncio, o sea; si es horizontal, vertical o un rectángulo.

¿Por qué todo esto? Sencillo, en muchas ocasiones nos puede llegar a interesar forzar la aparición de un bloque determinado de anuncios en vez de cualquier otro responsive, ya que la conversión de los mismos puede variar enormemente.

PASOS A SEGUIR

1.- Crear un bloque de adsense tipo responsive
2.- Agregar el contenedor DIV con el ID indicado en el ejemplo
3.- Establecer / modificar el formato o las dimensiones del banner que deseemos mostrar en esa ubicación según el tamaño
4.- Listos!

Espero que os sea de utilidad.

Saludos

[popobcn]

Ya puestos y por la curiosidad de aquellos nos desvivimos por la conversión, acabo de echarle un ojo a las estadísticas del código responsive generado desde "Informes avanzados" de mi cuenta de AdSense detectando un incremento del 250% en el CTR, que para no haber acabado el día y llevar tan solo la mitad del mismo puesto en marcha no esta nada mal.

¿Por qué ese incremento?

Por defecto, el bloque de anuncios responsive que se muestra si no existe una dimensión predeterminada para el mismo por CSS / estilos, el bloque de anuncios mostrado es horizontal (plan tipo anuncio del tipo 468px o 728px para que nos entendamos) y obviamente en resoluciones móviles, terminaba mostrando un bloque de texto que no superaba los 60px o 90px de alto, o sea ... lo peor de lo peor.

Al forzar mediante al código la carga de un bloque de anuncios del tipo rectangular no solo cargamos uno de los formatos de anuncio con mayor inventario de AdSense sino que además cubrimos una cuota de pantalla en determinadas resoluciones móviles muy interesantes si nuestra máxima esta centrada en la conversión por medios publicitarios.

PD.: He de comentar que también he efectuado una prueba en el cambio de ubicación de los banner's afectados por este ejemplo.

Saludos