隆Estamos en directo en Twitch!

隆Entra y participa!

Imagen de la etiqueta javascript

C贸mo detectar ad blockers con JavaScript

4 minutos de lectura驴Una errata? Edita el art铆culo

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)

Una cosa importante es que este snippet tiene que ejecutarse una vez el DOM haya sido cargado totalmente. Para ello puedes a帽adir el script al final del documento o simplemente esperar al evento DOMContentLoaded.

Tambi茅n, puedes probar el snippet en cualquier p谩gina abriendo las herramientas de desarrollo. Lo pegas en la consola y lo ejecutas. Luego podr谩s ver si el valor de isAdBlockEnabled es true o false dependiendo si usas extensiones como uBlock o Ghostery.

He activado el uBlock y he utilizado el snippet anterior en la consola para ver si lo detecta correctamente
He activado el uBlock y he utilizado el snippet anterior en la consola para ver si lo detecta correctamente

Usando Promesas para integrarlo mejor en tu c贸digo

En el caso que quieras envolver esta utilidad en una promesa, lo puedes hacer de forma muy sencilla. Lo ideal ser铆a extraerlo a un m贸dulo, para que el estado del isAdBlockEnabled se guarde en el m贸dulo y s贸lo exportes el m茅todo checkIsAdBlockEnabled.

// ahora usamo como estado inicial `undefined`
// que nos servir谩 para saber si ya hemos calculado
// si el usuario tiene adBlocker
let isAdBlockEnabled = undefined

const checkIsAdBlockEnabled = () => {
  // con esto evitamos que se vuelva a manipular el DOM
  // si ya sabemos si el resultado de la ejecuci贸n anterior
  if (typeof isAdBlockEnabled !== 'undefined')
    return Promise.resolve(isAdBlockEnabled)

  const ad = document.createElement('div')
  ad.innerHTML = ' '
  ad.className = 'adsbox'
  document.body.appendChild(ad)

  return new Promise(resolve => {
    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()
      resolve(isAdBlockEnabled)
    }, 100)
  })
}

// ya lo podr铆as usar en cualquier parte de tu c贸digo as铆
checkIsAdBlockEnabled().then(isAdBlockEnabled => {
  console.log(isAdBlockEnabled)
})

Conclusiones sobre detectar el AdBlocker con JavaScript

Ahora que tienes este poder, 煤salo con responsabilidad. Creo que no es buena idea molestar al usuario y evitar que pueda usar tu sitio web. Podr铆as, por ejemplo, borrar contenido de la web al detectar que tiene el AdBlocker, o mostrar una modal que no se pueda quitar… pero, como te digo, creo que no es buena idea.

S铆 puedes invitarle, amablemente, que tus anuncios en el sitio ayudan a tu p谩gina a sobrevivir. O llenar los huecos con otro tipo de publicidad que no detecten los AdBlockers…

En mi caso este problema lo he encontrado en mi trabajo pero como te habr谩s dado cuenta mi blog no tiene anuncios de ning煤n tipo. :) Espero que a ti te sirva.

Si quieres continuar la conversaci贸n, te invito que me menciones en Twitter para seguir debatiendo sobre c贸mo detectar los AdBlockers con JavaScript y si tienes un m茅todo mejor. 馃憢

Contenido del art铆culo

Comparte el art铆culo