Si estás monetizando tu blog con los anuncios de Google (Adsense) y trabajas con temas “Responsive“, seguramente habrás tenido este problema.https://i0.wp.com/carlosdaroca.com/wp-content/uploads/2015/02/anuncios_adaptables_adsense_que_no_se_adaptan.gif?resize=374%2C212

Los bloques de anuncios adaptablesde Adsense no se adaptan…

Valga la redundancia, es la frase que yo escribiría para buscar una solución a este problema en el buscador de google.

Una explicación escueta e incompleta pero suficiente para hacerse una idea del significado del termino “Responsive” sería que distintos elementos de una web se  colocan en diferentes posiciones, o incluso desaparecen, según el tamaño de la pantalla en el que son mostrados.

Esto facilita la visión en móviles y tablets con “displays” pequeños, en los que en las Webs que no usan este avance se visionan parcialmente, y hay que desplazarse para poder ver todo su contenido.

Aunque parezca mentira, muchos profesionales siguen creando los encargos de sus clientes sin aprovechar esta metodología de trabajo, con el consiguiente perjuicio en la usabilidad del producto y su posicionamiento SEO, ya que Google no ve con buenos ojos los sitios con estructuras no preparadas para dispositivos móviles.


Solución para que los bloques de anuncios adaptables de Adsense no se descuadren

seleccionar_anuncio_adaptable_adsense

Al usar temas “responsive” y siendo consecuente con su finalidad de facilitar la visión del usuario, me decanto por añadir bloques de anuncios adaptables de Adsense en mis publicaciones. De esta manera el tamaño de los anuncios se adapta al espacio disponible  y no estropea el diseño de la web.

No se si es por usar WordPress pero, al insertar el código que Adsense me proporciona, se funden con otros elementos de mis webs y me descuadra el contenido.
Aquí podéis ver una captura de pantalla de otro de mis artículos donde sucedía esto.


ejemplo_descuadre_anuncio_adaptable_adsense

Imagen de un anuncio de Adsense fusionado con el contenido


Pongamos el ejemplo de este código en teoría de un anuncio adaptable:

 

Este el el código que se obtiene al crear un anuncio adaptable, pero al insertarlo como texto en una entrada o página de WordPress se mezcla con las letras como se ha podido ver en la imagen anterior.

No puedo explicar el motivo de porque el siguiente código sí que funciona, pero lo hace. Si alguien puede aportar información la sumaré anexa a este artículo, como de costumbre.

Si se copia y pega el código de arriba en el lugar donde queréis que aparezca el anuncio y se sustituye el contenido de la etiqueta data-ad-client y de data-ad-slot por las proporcionadas en vuestros anuncios habréis solucionado el problema.

Aquí abajo está el resultado de un Copy/Paste del código de arriba

¡Espero que a alguien más que a mi le sea útil esta información!