Por Javier Nones , el martes, 25 de febrero de 2014 | Etiquetas: adsense , blog , responsive
Google ya anunció hace tiempo sus bloques de anuncio adaptables (hasta ahora todavía están en fase beta) justamente para cubrir la necesidad de esos administradores de blogs con diseño responsive. En nuestra cuenta de Adsense podemos elegir este tipo de bloques al crear un nuevo anuncio y optar por uno de dos tipos de códigos para usar en el blog o sitio web: el uno recomendado que, sólo requiere copiar y pegar en la zona donde se quiere el anuncio, y el otro avanzado dónde se puede modificar el código según las necesidades del administrador.
Mi intención era instalar estos bloques de anuncios en una plantilla adaptable de un blog con WordPress. Al investigar un poco sobre cuál convenía usar, encontré dos sitios en inglés (Labnol y HeatMapTheme), en los cuales (en primera instancia) NO se recomendaba usar ninguno de los dos códigos proporcionados por Google para los bloques de anuncio adaptables porque, básicamente, llenaban de forma "desatinada" el espacio en el que se los ubicaba. En vez de eso proporcionaban un script personalizado, que mostraban de forma eficiente los anuncios responsive de adsense, según el tamaño de pantalla del usuario.
Desafortunadamente, he podido comprobar que el código de Labnol ("Another Approach") para los bloques de adsense responsive no funciona. Si se pega en un widget el código ofrecido allí, el mismo no se puede guardar: es como si el código estuviera mal en alguna parte. Esto es así, tanto para la versión síncrona como asíncrona del script ofrecido allí. Por otro lado, el script ofrecido en HeatMapTheme sólo esta en versión síncrona. No hay una versión asíncrona del mismo. Si se quiere que la carga de la página NO sea más lenta, es aconsejable usar esta última versión. Además, el problema de este script es que, al menos personalmente, con él no he podido hacer flotantes los bloques de adsense, por ejemplo, para ponerlos en línea con el texto del post (tal y como está ubicado en este artículo, al principio, bajo el título).
Resulta gracioso que, no había necesidad de buscar en otro lado la mejor solución para instalar bloques de anuncios adaptables de adsense: en mi caso la mejor solución la provee Google con los códigos que ofrece. A continuación explicó lo que hice.
Todo es cuestión de ir a nuestra cuenta de Adsense y pulsar sobre el botón Nuevo bloque de anuncios. A continuación se elige en la sección Tamaño del anuncio Otro - Adaptable (Bloque de anuncio adaptable BETA).
Finalmente se pulsa abajo sobre el botón Guardar y Obtener código. En la ventana siguiente tendremos, en la parte superior, una pestaña "Modo" en la cual se puede elegir entre Tamaño automático (recomendado) y Avanzado (Modificación de código obligatoria). Elegimos la opción Avanzado.
El formato del código es más o menos similar a lo siguiente:
<style>
.nombre-de-bloque { width: 320px; height: 50px; }
@media(min-width: 500px) { .nombre-de-bloque { width: 468px; height: 60px; } }
@media(min-width: 800px) { .nombre-de-bloque { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- nombre-de-bloque -->
<ins class="adsbygoogle nombre-de-bloque"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXXXXX"
data-ad-slot="XXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Todo es cuestión de copiar y pegar ese código en un widget de WordPress, y porque no, también de Blogger y, antes de guardar el widget, hacer algunas variaciones en el código, que propongo a continuación.
Dentro de las etiquetas <style></style> está el código que debemos modificar. En las líneas que empiezan con el indicador @media se puede poner un tamaño de bloque de anuncio según el tamaño mínimo de pantalla que tenga el visitante. Por ejemplo, en mi caso considero que (en la zona bajo el título del post, en línea con el texto del post) si el tamaño de pantalla del visitante es de al menos 450px se le muestre el anuncio de 300x250. Si el tamaño de pantalla es de por lo menos 700px, se muestre el anuncio de 336x280. Si el visitante no tiene un tamaño de pantalla de por lo menos 450px (y por ende tampoco de 700px) se muestre el tamaño de anuncio 250x250 indicado en la primera línea. En código seria así:
<style>
.nombre-de-bloque { width: 250px; height: 250px;}
@media(min-width: 450px) { .nombre-de-bloque { width: 300px; height: 250px;} }
@media(min-width: 700px) { .nombre-de-bloque { width: 336px; height: 280px;} }
</style>
Ojo, no es cuestión de poner cualquier tamaño de anuncio. Se deben usar únicamente los tamaños de anuncio proporcionados por Google. Estos se pueden hallar en la lista desplegable de anuncios disponibles, al crear un nuevo bloque.
Una vez entendido como funciona este código, es fácil adecuarlo a nuestras necesidades. Ahora, si se usa ésta parte del código (recuérdese que no es el código completo sino sólo la "sección STYLE" del mismo) se verá que, para el caso indicado, el bloque de anuncio no quedará flotante, es decir, en línea con el texto del post. Además, es posible que quede demasiado pegado al texto del post. Para hacer eso, sólo es cuestión de agregar un poco se estilo (float y margin) dentro de cada uno de los tamaños de anuncio, según lo que se necesite para la presentación del anuncio en cada tamaño de pantalla del visitante, así por ejemplo:
<style>
.nombre-de-bloque { width: 250px; height: 250px; margin: 10px 0 10px 0px;}
@media(min-width: 450px) { .nombre-de-bloque { width: 300px; height: 250px; float: left; margin: 15px 0 10px 10px;} }
@media(min-width: 700px) { .nombre-de-bloque { width: 336px; height: 280px; float: left; margin: 15px 0 10px 10px;} }
</style>
Aunque es posible añadir un poco de CSS para ajustar la posición del bloque de anuncio de ésta manera, téngase mucho cuidado de no añadir estilo que incumpla con las políticas de adsense, como por ejemplo añadir marcos al bloque del anuncio.
