Cómo hacer bloques de anuncios de Adsense adaptables a diseños responsive

votar
Cuando Google lanzó  hace ya una década su programa AdSense, la gente accedía a la web a través sus ordenadores de escritorio y portátiles. Actualmente Internet está presente en todo tipo de dispositivos; teléfonos móviles, videoconsolas, lectores de libros electrónicos, e incluso televisores.


Los diseñadores web y bloggers dependemos cada vez más de la técnica del diseño web sensible, también llamado receptivo, adaptable e incluso responsivo. Sus ventajas son importantes y su fundamentoes el uso de un sólo diseño que se adapta mostrándose bien en todos los dispositivos independientemente del tamaño y resolución de la pantalla.

Modificaciones permitidas del código de bloques anuncio de AdSense

Hasta ahora Google no permitía modificar el código de los anuncios de Adsense. Con la tendencia del diseño sensible Google ha decidido abrir las puertas a la modificación del código de los bloques de anuncios, mientras no afecte al funcionamiento normal de los mismos.

De paso, entre las modificaciones permitidas estan:
  • Adaptarlo a diseños responsive.
  • Hacer pruebas A/B para comprobar que diseño o anuncio funciona mejor.
  • Reducción de las etiquetas de anuncio para que el código cargue más rápido.
  • Configurar criterios de seguimiento de forma dinámica.

Tenéis mucha más información sobre la modificación del código de Adsense aquí. En cuanto adaptar el código a un diseño sensible hay que profundizar un poco más en el tema.


Cómo adaptar un bloque de anuncios de Adsense a un diseño sensible

Se trata de generar 2 códigos. El primero es el del bloque de anuncios de Adsense propiamente dicho (todavía en fase beta) y el segundo es el de un CSS que modifica ciertos parámetros del primero dinámicamente, según el ancho detectado en la pantalla del usuario.

Para generar este código debes ir a tu cuenta de Adsense y seguir atentamente las instrucciones para generar un código de bloques de anuncios de Adsense. Usa el botón Nuevo Bloque de Anuncios y en Tamaño del anuncio escoge Bloque de Anuncios Adaptable.

Sin PHP

Cópialo y añádelo en donde quieras que se muestre el anuncio. Puedes hacer una mejora si quieres, agregando un formato más: Hace poco más de 3 meses Adsense presentó su último tamaño de banner disponible, el 970 x 90 píxeles. Google no incluye este último banner por defecto en su código pero nosotros lo usaremos en el siguiente ejemplo:

<style>
.adaptable { width: 320px; height: 50px; }
@media(min-width: 500px){ .adaptable { width: 468px; height: 60px; }}
@media(min-width: 800px){ .adaptable { width: 728px; height: 90px; }}
@media(min-width: 1000px){ .adaptable { width: 970px; height: 90px; }} 
</style>
 
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Adaptable -->
<ins class="adsbygoogle adaptable"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxx"
     data-ad-slot="xxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

La parte que está entre las etiquetas <style> y </style> tiene una línea en negrita más para incluir los nuevos banners de 970x90 píxeles. El resto del código debes conseguirlo desde tu cuenta por los caracteres en verde son únicos, o al menos el primero.

Cuando necesites insertar el código CSS (el que sigue te puede servir) dirígete a Plantilla -> Personalizar -> Añadir CSS en el menú de tu blog para insertarlo.

<style type="text/css">
.adslot_1 {
  width: 320px; height: 50px;
}
@media (min-width:500px) { .adslot_1 {
  width: 468px; height: 60px;
}}
@media (min-width:800px) { .adslot_1 {
  width: 728px; height: 90px;
}}
@media (min-width:1000px) { .adslot_1 {
  width: 970px; height: 90px;
}}
</style>

Cómo veis, lo que se hace es asignar el tamaño del anuncio dinámicamente. Tenéis otro ejemplo de código válido aquí. Finalmente para comprobar el correcto funcionamiento podéis recurrir al bookmarklet de Viewport Resizer.


Y esta es una de las formas de hacer que los anuncios de Adsense se adapten al ancho de la pantalla, ya que ahora es una de las modificaciones permitidas después de muchos años. Hacedlo con calma no vaya a ser el demonio! Si lo has probado deja un comentario para conocer tu opinión.

Más consejos y noticias en las entradas de la categoría de Adsense en el Exprimiblog.
El anuncio oficial en el blog de Adsense: adsense-es.blogspot.com.es
¿Sabes que puedes combinar el marketplace Adpv con Adsense?

12 comentarios:

  1. Hola Jorge, Ojalá pudieras ayudarme. Llegué a tu blog buscando una solución.
    Tengo un blog hace años (www.patchworkmipasion.blogspot.com) y hace una semana que puedo acceder para publicar entradas pero no aparecen. Es decir, si vas a la dirección de mi blog, aparece por unos segundos y luego se cambia por otra URL y otra página que no tiene nada que ver conmigo. Qué fue lo qué pasó?
    Estoy deseperada, tengo mucho tiempo invertido en esto y necesito si puedieras, que me ayudes o respondas lo antes posible.
    Mchas gracias de antemano,
    Yasmin
    manosdechicureo@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola, si no me equivoco has puesto un script para que apareciese una animación de copos de nieve cayendo por el fondo del blog, o cualquier otro. La página que los ofrecía debe haber cambiado el javascript original para que ocurra esto porque lo que está haciendo es redirigir a las visitas de tu blog a otro con un nombre similar al del sitio de donde sacaste ese código.

      Entra en el modo edición para eliminar ese script y seguro que todo vuelve a la normalidad. Si no me equivoco debería ser una línea similar a esta: < script type="text/javascript" src="http://contes-de-web.fr/js/tombelaneige.js">< /script>

      Espero que te funciona. Te añado a la lista de suscripción por el correo, acéptala cuando te llegue. Un saludo.

      Eliminar
  2. Hola Jorge, he tenido un problema cuando pongo un anuncio arriba de las entradas.
    Es decir, yo quiero poner dos y para eso ponia una tabla de dos columnas y en cada una el codigo adsense tamaño rectangulo pequeño.

    Pero si es que quiero poner adsense adaptable no sirve dentro de una tabla y si los pongo juntos me sale uno arriba del otro, nose como hacer. Lo malo de ser adaptable es que no puedo decirle lo que quiero

    ResponderEliminar
    Respuestas
    1. Hola, sí que puedes decirles lo que quieras pero las tablas no están hechas para ordenar elementos. Deberías convertirlos en float y alinear cada uno a un lado (float:right; uno y float:left; el otro). Un saludo.

      Eliminar
  3. Hola. ¿Sabes si con bloques de enlaces se puede hacer también que sea adaptable?

    ResponderEliminar
    Respuestas
    1. Hola Joaquín.

      De momento el código generado para los bloques de enlaces en el sitio de Adsense no es compatible. Pero eso no significa que esté prohibido ni que no se pueda hacer.

      Seguro que hay algún método diferente para hacerlo y no debería pasar nada, pues ahora está permitido modificar todos los anuncios para que se ajusten a diferentes tamaños.

      Seguro que cuando estos bloques adaptables dejen de estar en fase beta terminan por lanzarlo también compatible con los bloques de enlaces.

      Si encuentro algo te aviso. Muchas gracias por preguntar.

      Eliminar
  4. Muy bueno sabes si esto mejora el CPC o CTR

    ResponderEliminar
    Respuestas
    1. Buena pregunta. En principio el CPC no va a variar porque aunque siempre se muestran primero los anuncios mejor pagados estos pueden remunerarnos también por CPM, esta retribución es un factor que no podemos conocer ni controlar con el código. Pero aunque en un principio se pudiese pensar que no, sí aumentará el eCPM o coste efectivo por cada 1000 veces que un anuncio aparece.

      Por ejemplo, si hemos creado un bloque de anuncios es de 500×300 píxels, AdSense puede mostrar anuncios de 300 × 250 o 336 × 280 si los eCPMs son más altos (supongo que nunca sabremos cuanto). En este caso el anuncio se muestra centrado y el resto del bloque estará relleno de espacio en blanco.

      El CTR debería aumentar aunque no te lo puedo asegurar, aunque los anuncios de adaptan perfectamente al ancho lo que hace que se integren mejor y en todos los dispositivos, la diferencia con un sitio que no sea responsivo puede no existir, aunque sí que en pantallas muy pequeñas o muy grandes los anuncios se verán mejor con los diseños sensibles. Otro caso son los sitios cuyo diseño permite girar la pantalla, ahí Google avisa de que se puede reducir levemente el precio del CPM (difícil de intuir sí tenemos en cuenta que lo que estamos haciendo es mostrar más anuncios. Supongo que la explicación a esto es que Adsense sólo cuenta una de las impresiones basándose en que el usuario no ha abandonado el sitio) y el CTR. Pero esto es sólo si el diseño permite el giro de pantalla.

      Así que sí. Los anuncios responsivos, en un sitio también responsivo hace que ganes más dinero. Tardé en responder porque quería estar seguro. Muchas gracias por preguntar!

      Eliminar
  5. lo agrego a una ebtrada y no aparece ningun anuncio http://www.supertutoriales.uni.me/
    no se q pasa?

    ResponderEliminar
    Respuestas
    1. Debes copiar ambos código, y además este recurso es para sitios responsivos. No tiene sentido alguno usarlo en un sitio que no tenga diseño sensible.

      Eliminar
  6. aquí hay un método que funciona bastante bien http://www.apoyoti.com/publicidad-responsive-adsense/

    ResponderEliminar
    Respuestas
    1. Menudo lío, se puede hacer mucho más sencillo y sin necesidad de cargar las bibliotecas jQuery.

      Un saludo.

      Eliminar

Tu comentario tiene valor, dedícale unos minutos y repásalo. Si tiene faltas de gramaticales o de ortografía lo borraré. Respondo a todos así que si tienes dudas no repares en preguntar.

Si esperas respuesta acuérdate de marcar el botón de 'Avisarme'.

Y RECUERDA: Para mantener las conversaciones legibles usa correctamente el botón COMENTAR o RESPONDER cuando proceda. Muchas gracias.

Más de 2000 suscriptores reciben las entradas en su correo

Vía FeedBurner. Introduce tu dirección de correo electrónico y confirma el mensaje que te llegue.