Cómo detectar si AdBlock está instalado en el explorador del cliente con JavaScript

Los bloqueadores de anuncios (AdBlockers) son un tema frecuente de conversación, porque un monton de gente no soporta ver muchos anuncios en las páginas que visitan, pero sin embargo, si eres el administrador del sitio, te encantará obviamente el hecho de que hayan anuncios porque te generan dinero. De acuerdo a estimaciones de Google, el bloqueo de anuncios genera perdidas de hasta $887 millones cada año. A pesar de todo, la publicidad es un mal necesario. Muchas páginas, como Forbes, no te permitirán acceder al contenido si usas un bloqueador de anuncios a menos que desactives AdBlock (para un desarrollador la manera en la que lo bloquean es realmente simple, pues puedes remover la capa que cubre el contenido con el inspeccionador de elementos del explorador):

Esto, de una u otra manera tiene sentido porque la mayoría del contenido libre en Internet es gratis, solamente debido a los anuncios. La mayoría de los bloggers no tenemos millones en el banco y escribimos por diversion solamente sabes ? Si quieres implementar este tipo de característica en tu sitio web o solamente quieres mostrar un mensaje que conmueva el corazón del visitante para que visite tu sitio sin AdBlock, puedes hacerlo fácilmente con JavaScript.

Mensaje importante

Nosotros te recomendamos encarecidamente, por el bien del tráfico de tu sitio, que no bloquees el acceso a los usuarios que usan AdBlock. Simplemente coloca un mensaje de alerta e informa que los anuncios son la unica fuente de ingresos tuya.

Pero porqué? Forbes inicio con esta medida para bloquear el acceso a usuarios con adblock, luego la tasa de rebote incremento de 27% a 27.9 (nada mal eh?), sin embargo con una baja de visitas diarías de 9% e incluso la disminución del tiempo que pasa el usuario en el sitio a solo 3 minutos (en inglés lee más acerca de cómo sitios que bloquean AdBlock sufren en SEO).

Si despues de leer esto eres consciente de lo que significa la implementación de esta característica en tu sitio web y aun así quieres implementarla, en este artículo te enseñaremos como detectar si un usuario que visita tu página está usando AdBlock con JavaScript.

A. Usando un simple truco

La primera y más fácil manera de verificar esto, es creando en algun punto de entrada de tu script principal (preferiblemente antes de la ejecución de cualquier otro script) una variable bandera booleana identifica como adblockEnabled. El valor inicial será true:

window.adblockEnabled = true;

// resto de JavaScript

Una vez la variable bandera exista, crea un nuevo archivo de JavaScript llamado adframe.js. El código del script es el siguiente:

// adframe.js (un archivo extra con la siguiente linea de código)
window.adblockEnabled = false;

Es obviamente importante que este código sea cargado de un archivo nuevo. Como puedes ver, el script simplemente cambia el valor de la variable de true a false. Cuando el script (adframe.js) se carga en el documento con un tag de script o AJAX y AdBlock está instalado en el explorador, el archivo adframe.js nunca será cargado (haciendo que window.adblockEnabled siga siendo true) y por lo tanto, se puede suponer que AdBlock está instalado.

Mira la siguiente implementación en un documento HTML:

<!-- Colocar variable bandera como true por defecto -->
<script type="text/javascript">
    window.adblockEnabled = true;
</script>

<!-- 
    Cargar el archivo adframe.js para cambiar el valor de la variable bandera
    Obviamente si el script es bloqueado por AdBlock, entonces la variable adblockEnabled
    seguira siendo true, lo que significa que adblock está activo

    Código de adframe.js:

    window.adblockEnabled = false;
-->
<script type="text/javascript" src="adframe.js"></script>

<!-- Verificar en algun script si adblock está activado -->
<script type="text/javascript">
    if(window.adblockEnabled) {
         alert("Hey, estás usando adblock :(");
    }
</script>

Es fácil de implementar y funcional hasta la fecha.

B. Usando BlockAdBlock (FuckAdBlock)

Si eres el tipo de desarrollador que le encanta usar librerías, hay una bastante útil escrita en Vanilla JavaScript que te permitirá verificar si tu usario usa AdBlock. BlockAdBlock (originalmente llamado FuckAdBlock, sin embargo para un nombre más conveniente renombrado como BlockAdBlock en un nuevo repositorio) es un util script que te permite identificar a los usuarios que usan AdBlock y tomar medidas al respecto.

Para usar esta librería, puedes simplemente bajar una copia del script y agregarla a tu documento con un tag de script:

<script src="./blockadblock.js"></script>

Si usas un manager de paquetes, puedes instalarlo usado NPM:

npm install blockadblock

O con Bower:

bower install blockadblock

Si necesitas más información sobre este plugin, visita el repositorio oficial en Github aquí.

Para detectar si un usuario tiene AdBlock instalado en el computador con BlockAdBlock, solamente necesitas agregar el script al documento usando un tag script. Luego verifica si la variable blockAdBlock existe, en caso contrario, significa que blockadblock.js ha sido bloqueado (adblock está instalado). Finalmente agrega 2 detector de eventos que serán ejecutados cuando el estado de AdBlock en el explorador cambie:

<script src="./blockadblock.js"></script>

<script>
    /**
     * Callback ejecutado si adblock está instalado
     **/
    function adblockDetected(){
        alert("Estas usando adblock");
    }

    /**
     * Callback ejecutado si adblock está desactivado
     **/
    function adblockDisabled(){
        console.log("Todo en order, mostrar anuncios");
    }


    /**
     * Verificar adblock
     **/
    if(typeof blockAdBlock === "undefined"){
        adblockDetected();
    }else{

        blockAdBlock.onDetected(adblockDetected);

        blockAdBlock.onNotDetected(adblockDisabled);
    }
</script>

Ambos métodos funcionan de manera excelente, sin embargo depende de ti cual usar y que hacer cuando el usuario use AdBlock.

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable