La solución más efectiva para solucionar este problema es utilizar la API del observador de mutaciones. MutationObserver es una API DOM que le permite observar los cambios en los elementos DOM y recibir una notificación cuando se produce un cambio. Este código resolverá el problema y debe cambiarse el «elemento» con el nombre de clase del elemento con el que se tiene el problema.
Es importante solucionar este problema lo antes posible para garantizar que el rendimiento del anuncio y la experiencia del usuario no se vean afectados negativamente. Aunque es molesto que Google cambie explícitamente el contenido de la página, al menos hay una solución alternativa para esto. Aunque sospecho que esto no hace muy feliz a Google, ya que ciertamente se puede abusar de esto para ocultar anuncios después de cargarlos, lo que sospecho que es la razón principal de este comportamiento.
La inyección de AdSense «height: auto !important» es un problema conocido que puede causar problemas de visualización con los anuncios de AdSense en algunos sitios web. Este artículo trata sobre cómo solucionar el problema de AdSense.
Este problema se produce con mayor frecuencia cuando tiene contenedores desplazables en su página web como un barra lateral. La inyección de «altura: ¡importante automático» por parte de los anuncios de Google AdSense puede hacer que su sitio web enfrente muchos problemas.
Problemas que pueden ocurrir:
Los problemas que enfrenté al tener este problema se enumeran a continuación:
Contenido superpuesto
Si la altura del contenedor de anuncios de AdSense se establece en «automático», puede hacer que el anuncio se superponga con otro contenido de la página, lo que dificulta la lectura o la interacción con el sitio web.
Tamaños de anuncios inconsistentes
De forma predeterminada, los anuncios de AdSense están diseñados para adaptarse a tamaños específicos. Si se inyecta «height: auto !important», puede hacer que los anuncios se muestren en diferentes tamaños, lo que hace que el sitio web se vea poco profesional y desorganizado.
Diseño que no responde
«Height: auto !important» también puede hacer que el contenedor de anuncios de AdSense se expanda y se contraiga según el tamaño del anuncio, lo que puede afectar el diseño del sitio web y hacer que parezca que no responde en diferentes dispositivos y tamaños de pantalla.
Dificultad en el seguimiento del rendimiento de los anuncios.
AdSense se basa en el seguimiento de los clics y las impresiones para optimizar el rendimiento de los anuncios. Si los anuncios no se muestran de manera consistente, puede dificultar el seguimiento del rendimiento y la toma de decisiones informadas sobre la optimización de las campañas publicitarias.
Mala experiencia de usuario
En última instancia, la inyección de «alto: ¡importante automático» puede conducir a una experiencia de usuario deficiente en un sitio web. Los visitantes pueden tener dificultades para navegar o leer el contenido, lo que puede aumentar las tasas de rebote y dañar la reputación del sitio web.
Como causa muchos problemas, es importante solucionar este problema lo antes posible para garantizar que el sitio web rendimiento del anuncio y la experiencia del usuario no se ven afectados negativamente.
Solución: reparación de la inyección de Adsense «altura: ¡auto! Importante»
Hay muchas soluciones disponibles para este problema, pero la solución más efectiva que encontré es usar API del observador de mutaciones
MutationObserver es una API DOM que le permite observar los cambios en los elementos DOM y recibir una notificación cuando se produce un cambio.
Es muy poderoso y, aunque no lo necesita a menudo en el desarrollo normal a nivel de página, puede ser muy útil si necesita capturar contenido cambiado de forma genérica, que es exactamente el escenario que estoy viendo aquí.
Este código resolverá su problema.
var element = document.getElementsByClassName("element")[0];
const observer = new MutationObserver(function (mutations, observer) {
element.style.height = "";
});
observer.observe(element, {
attributes: true,
attributeFilter: ["style"],
});En el código anterior, cambie el «elemento» con el nombre de clase del elemento con el que tiene el problema.
Resumen:
Apesta que Google sea tan autoritario al cambiar explícitamente el contenido de mi página. Es parte de las pautas de contenido, pero en estos días, especialmente con el código cargado del lado del cliente, no es raro tener contenido que vive en contenedores que administran su propio desplazamiento de página para una experiencia más limpia «similar a una aplicación».
Pero, por desgracia, aquí estamos … Google hace lo que sea que hace Google y podemos tomarlo o dejarlo.
Al menos hay una solución alternativa para esto, aunque sospecho que esto no hace muy feliz a Google, ya que ciertamente se puede abusar de esto para ocultar anuncios después de cargarlos, lo que sospecho que es la razón principal de este comportamiento.