Tutorial Optimización formatos de anuncios responsive de AdSense según nos convenga

Mensajes
106
Puntuación de reacción
0
Buenas a todos,

A raíz de un artículo de labnol me plantee efectuar ciertas modificaciones para mejorar el CTR de los bloques de anuncios responsive de AdSense, dado que por norma general y salvo que se exprese lo contrario por medio de CSS, la presentación de los bloques de anuncios en los dispositivos móviles no terminaba de cuajarme a título personal.

Principalmente lo que vamos a conseguir con esta personalización totalmente avalada por los señores de Google y mediante la cual no vamos a sufrir ningún tipo de problema o posible baneo, es forzar la aparición de un determinado anuncio y su formato dependiendo de la resolución detectada en la pantalla, formato que obviamente alcanzará - si hemos hecho pruebas anteriormente - una mayor efectividad que cualquier otro formato presentado de forma automática por los anuncios responsive de AdSense.

HTML:
<!-- Definimos DIV que presentará el anuncio -->

<div id="adsense"></div>

<!-- Incluir en cualquier parte del BODY -->

<script type="text/javascript"> 
 
	/* Calculamos el espacio existente y disponible */

	ad = document.getElementById('adsense');
 
	if (ad.getBoundingClientRect().width) {
		adWidth = ad.getBoundingClientRect().width; // for modern browsers 
	} else {
		adWidth = ad.offsetWidth; // for old IE 
	}
	/* Replace ca-pub-XXX with your AdSense Publisher ID */ 
	google_ad_client = "ca-pub-XXX";
 
	/* Replace 1234567890 with the AdSense Ad Slot ID */ 
	google_ad_slot = "1234567890";
  
	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 = "rectangle, 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 = "rectangle"; /* Small Rectangle (180 x 150) */ 
		google_ad_size = ["180", "180"];
	}else{
		google_ad_format = "rectangle"; /* Button (125 x 125) */
		google_ad_size = ["125", "125"];
	}
	document.getElementById('adsense').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>

Lo que hacemos es muy sencillo, respetando siempre el código original de Google Adsense y jugando siempre en los parámetros establecidos por el programa a nivel de personalización de los bloques de anuncios (podéis consultar el documento aquí); detectamos vía JS la dimensión actual del contenedor por ID, que en su defecto al no indicarle en ningún estilo CSS será el 100%.

Una vez recogida la dimensión del contenedor del anuncio, podemos definir no solo el formato del anuncio sino que además podemos forzar que el mismo tenga unas dimensiones personalizadas. Esta es sin lugar a dudas una de las características que han dado la campanada bajo mi punto de vista en Google Adsense, ya que hasta la fecha la personalización y modificación de los tamaños de los bloques de anuncios estaba completamente restringida. Aunque en la actualidad se pueden llegar incluso ha aplicar estilos CSS personalizados e incluso definir media queries para personalizar el tamaño del bloque de los anuncios, aunque en mis pruebas no he tenido experiencias tan satisfactorias por medio de CSS que de esta forma.

Requisitos

1.- Crear un bloque de anuncios responsive dentro de AdSense
2.- Tener a mano el bloc de notas para editar e incluir el DIV con el nombre de ID que deseemos
3.- Pegar dentro del BODY el código de ejemplo
4.- Modificar google_ad_client = "ca-pub-XXX"; y google_ad_slot = "1234567890"; con nuestros datos.
5.- Modificar formatos y/o forzar dimensiones deseadas para las diferentes resoluciones gráficas
6.- Enjoy! xD

¿Qué aportamos al ejemplo original de labnol?

Hemos definido el "formato" del anuncio a mostrar por medio de la inclusión de la variable google_ad_format, la cual define la forma del bloque del anuncio ya sea este: rectangular, horizontal o vertical, pero lo mejor del caso es que las opciones existentes en el nuevo formato de anuncios resposive de AdSense nos permite incluso determinar varios formatos para un bloque determinado (siempre separados por comas) como puede ser el caso del ejemplo establecido en el código "google_ad_format = "rectangle, horizontal"; /* Banner (468 x 60) */" en el que definimos que se pueden mostrar tanto anuncios rectangulares como horizontales.

Fuentes consultadas

Labnol: How to use Google AdSense Ads with Responsive Web Design
Más que recomendarlo, os digo que es de lectura obligatoria cualquier aportación que haga este señor.

Google https://support.google.com/adsense/answer/3543893?hl=en&ref_topic=1307438
Sin lugar a dudas el mejor cambio efectuado hasta la fecha a nivel de personalización y adaptación de los anuncios del programa de AdSense.
 
Arriba