Muchas veces en nuestros proyectos web es necesario mostrar ventanas emergentes o publicidad que no queremos que sea bloqueada por programas como adblock, es por esto que hoy vamos a revisar cómo detectar adblock con Javascript para validar si nuestros usuarios tienen activa esta herramienta o no.

Hace poco en un proyecto web de un cliente se presento la situación de que esta persona quería mostrar publicidad a sus usuarios.

El problema era que la gran mayoría de sus usuarios tenian activa esta herramienta para bloquear publicidad llamada AdBlock.

Es por esto que surgio la necesidad de conocer cómo detectar AdBlock con Javascript para resolver el problema.

A continuación te muestro una función muy sencilla que nos permite conocer si nuestros usuarios tienen activa esta herramienta o no y actuar según nuestros intereses.

En mi caso planeo mostrar un aviso que les pide añadir el sitio a la lista de excepciones para ver el contenido y recargar la página.

Lo primero que hago es inmediatamente despues de cargar la página llamar a una función llamada detectarBloqueador.

$(document).ready(function(){

    detectarBloqueador();

});

Posteriormente en esta función lo único que hacemos es llamar a la función importante de detección y en esta sección de codigo actuar según lo que queramos hacer en cada caso.

async function detectarBloqueador(){
    const bloqueadorActivo = await checkAdBlocker();
    if( bloqueadorActivo ){
        alert("Adbloquer detectado..");
    }
}

La función importante aquí es la función checkAdBlocker, esta función lo que hace es tratar de conectarnos a un archivo muy conocido de publicidad de Google, mismo que debería de bloquear cualquier bloqueador de anuncios.

Si logramos conectarnos es que no hay ningun bloqueador de anuncios activos o AdBlock, de lo contrario muy posiblemente es por que nos encontramos antes este tipo de herramientas.

async function checkAdBlocker() {

    let bloqueador;

    async function tryRequest() {
        try {
           return fetch(
               new Request("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", {
                  method: 'HEAD',
                  mode: 'no-cors'
                }))
                .then(function(response) {
                  bloqueador = false;
                  return bloqueador;
                }).catch(function(e) {
                  bloqueador = true;
                  return bloqueador;
            });
        } catch (error) {
              console.log(error);
              bloqueador = true;
              return bloqueador;
        }
    }

    return bloqueador !== undefined ? bloqueador : await tryRequest();
}

Y ¡eso es todo! Ahora podremos revisar si nuestros usuarios usan algún tipo de bloqueador de anuncios en nuestros proyectos web.

Si esta información sobre cómo detectar Adblock con Javascript te fue de utilidad no olvides compartirla en tus redes sociales favoritas o dejarnos un comentario en la sección de abajo para poder aclararte cualquier duda al respecto de este tema.

¡Hasta luego!

Clic para valorar esta información

[Total: 1 Promedio: 5]

Cómo detectar AdBlock con JavaScript

jonathan__melgoza