Ir al contenido principal

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

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?

Entradas populares de este blog

Optimiza las ganancias de acortadores al máximo fácil con Lanza.me

Seguro que ya conoces  Lanza.me ; el primer acortador y metaacortador que te permite cambiar todos tus enlaces en pocos segundos a los acortadores que quieras, evitando con ellos problemas con los principales acortadores que pagan . Estoy seguro de que también conoces Shorteners.net ; el primer comparador de tasas y otras características de acortadores de acortadores que pagan y que te ofrece las tasas de estos siempre actualizadas, valoraciones y más. Ha llegado el momento de unir ambos sitios para una obtención de datos práctica y automática. Lanza.me + Shorteners.net: La unión perfecta Así es. Lanza.me y Shorteners.net ya tienen una conexión conjunta. Con ella, Lanza.me puede conocer las tasas de los acortadores y con ello, decirte cuál es el acortador que más te conviene para las visitas que recibas. Y no me estoy refiriendo al recomendador de acortadores integrado en Lanza.me , que te anuncia cuales son los acortadores que no estás empleando y que tienen

Compatible con Youtube, Lanza.me trae otras muchas mejoras

Lanza.me es es un acortador y metaacortador con funcionalidades únicas. Una de ellas es la de mostrar páginas externas de nuestra preferencia, así como acortar nuestros enlaces con los principales acortadores de enlaces. Hubo novedades, y en esta entrada te las presento. Si quieres saber más acerca de Lanza.me visita esta sección del blog . Vídeos de Youtube como páginas intermedias Desde la madrugada del 24 de febrero Lanza.me es compatible con Youtube. Cuando inserten la URL de un vídeo de youtube como una página externa, el acortador lo detectará y lo mostrará ocupando todo el ancho de la pantalla cuando los usuarios visiten el enlace. Los usuarios VIP pueden configurar estas páginas para que reproduzcan el vídeo automáticamente, con lo que conseguirán más visitas. Más datos añadidos y un repaso a las estadísticas Hace tiempo comenté que otra vez había habido cambios en las estadísticas. Miraremos más por encima esas estadísticas porque tienen algunas opciones que sería inte

Multiplica tus ingresos con el encadenador de acortadores de Lanza.me

Lanza.me es el acortador y metaacortador que he estado desarrollando durante los últimos 4 años. Con él puedes usar otros acortadores para acortar tus enlaces y cambiarlos fácilmente y en muy pocos segundos. También permite usar páginas externas para mostrar en tus enlaces cortos o simplemente usar enlaces directos.  Ya es muy estable y está lleno de opciones, como estadísticas a nivel de usuario y enlace, optimización de acortadores, alertas dinámicas y reactivas de acortadores caídos o en problemas,  listas públicas de enlaces , programa de referidos, etc. Hoy te traigo una nueva característica. Encadenador: Multiplica tus ingresos sin esfuerzo ni riesgo Este lunes 5 de julio de 2021 se ha lanzado el encadenador de acortadores. Se trata de una nueva característica, única de Lanza.me, con la que podrás conseguir duplicar tus ingresos sin esfuerzo ni riesgo. Cómo funciona el encadenador El encadenador de acortadores usa varios acortadores a la vez sobre un mismo enlace; Los visitantes