Añadir Google Ads con Responsive Design

Actualmente muchas personas quieren adaptar sus sitios web a tabletas y móviles y otras tantas personas quieren, sobre manera, aumentar sus ingresos en Google Adsense. Hace no mucho Google expuso su preocupación en incluir su publicidad dentro de cualquier dispositivo y recientemente puso a disposición un nuevo snippet para añadir publicidad de manera asincrónica (aún en estado beta). ¿Qué es lo que nos permite esto? Bueno, una de las principales ventajas que puedo ver justo ahora es que podemos añadir nuestra publicidad dentro de sitios web con responsive design de manera más sencilla. Anteriormente, con el snippet tradicional debíamos definir, por supuesto, el spot y las medidas del anuncio: era bastante complicado volver a cargar el anuncio dependiendo de las medidas del browser, utilizando un largo condicional en Javascript para lograrlo (por anuncio). Por ejemplo:

<script type=”text/javascript”>
var resolution = document.documentElement.clientWidth;
google_ad_client = “ca-pub-1234567890”;

if( resolution < 767 ) {
google_ad_slot = “1234567890”;
google_ad_width = 300;
google_ad_height = 250;
}

if ( resolution > 767 ) {
google_ad_slot = “0987654321”;
google_ad_width = 336;
google_ad_height = 280;
}
</script>
<script type=”text/javascript” src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”/>
Con lo anterior obtenías un anuncio dependiendo del tamaño del browser y tenías que cargar por cada anuncio el archivo show_ads.js. Ahora es mucho más fácil, basta con cargar una sola vez adsbygoogle.js y después podemos definir el tamaño según los estilos de CSS de esta manera:

<script async src=”http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle ad_336x280″ data-ad-client=”ca-pub-1234567890″ data-ad-slot=”1234567890″></ins>
<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
Utilizando CSS y media queries, puedes lograr mostrar anuncios diferentes dependiendo del tamaño del browser:

.adsbygoogle {
display: inline-block;
}
.ad_336x280 {
width: 336px;
height: 280px;
}
@media (max-width: 767px) {
.ad_336x280 {
width: 300px;
width: 250px;
}
}
De tal manera que cuando el browser sea menor a los 767px, mostrará el anuncio en 300x250px. En resumen con el nuevo código para mostrar anuncios de Google Adsense, tenemos tres ventajas principales:

Mejorar la carga de nuestro sitio, al ser asíncrono
Permite cargar una sola vez un archivo en JavaScript
Permite mostrar anuncios con CSS, para poderlo integrar con metodologías como responsive design
Una de las desventajas que por ahora veo en esta nueva implementación de Google Adsense es que los anuncios no se actualizan cuando se cambia el tamaño de la ventana del navegador, sino que se muestran sólo en la carga. Pero, es algo que podría mejorar.

Leave a Comment

Your email address will not be published. Required fields are marked *