Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/10/2015, 09:55
Avatar de popobcn
popobcn
Moderador
 
Fecha de Ingreso: noviembre-2006
Ubicación: Cerdanyola del Vallès
Mensajes: 3.892
Antigüedad: 17 años, 4 meses
Puntos: 1142
[TUT] Personalización de anuncios responsivos según nos convenga

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
__________________
Consultor SEO / WPO
[EXP] Fuego de Vida ->sitio web