Dependiendo del país hasta un 30% de los usuarios usan AdBlocker. Esto significa que casi uno de cada tres usuarios usa algún tipo de extensión o manera de bloquear los anuncios de tu sitio. Y la cifra sube año a año.
Lo cierto es que puedes intentar sortear esto pero es una decisión del usuario que, la verdad, es difícil de saltársela. Se pueden intentar cosas pero, con el tiempo, siempre aparece alguna manera de bloquear los anuncios y los trackers.
Igualmente es bastante útil a veces tener una forma de detectar si el usuario está usando algún bloqueador de publicidad para enseñarle algún tipo de mensaje que le invite a reconsiderar su decisión o, simplemente, para aprovechar y mostrar otro tipo de contenido para llenar el hueco.
Código JavaScript para saber usuario usa un AdBlocker
La técnica consiste en crear un elemento que simule ser un anuncio de forma que el AdBlocker lo detecte y lo elimine. De esta forma, si se elimina, sabremos que tenemos una extensión que bloque este tipo de contenido y, si se mantiene, entonces el usuario no tiene ningún AdBlocker 💡.
¡Vamos a verlo con código!
// creamos un flag para saber si tenemos adblocker
let isAdBlockEnabled = false
// creamos un elemento div y lo iniciamos con una clase
// que sabemos que el adblocker eliminaría
const ad = document.createElement('div')
ad.innerHTML = ' '
ad.className = 'adsbox'
// añadimos nuestra simulación de anuncio en el body
document.body.appendChild(ad)
// ahora dejamos 100ms para que el adblocker haga su trabajo
// y entonces veremos si el elemento sigue visible
window.setTimeout(() => {
// si el elemento no tiene altura, es que
// el AdBlocker se lo ha cargado
isAdBlockEnabled = ad.offsetHeight === 0
// eliminamos el "falso" anuncio
ad.remove()
if (isAdBlockEnabled) {
// codigo a ejecutar si el adblocker está activado
}
}, 100)
