Detectar un Ad-blocker (bloqueador de publicidad) usando jQuery
Logo de Ghostery | Logo pertenece a sus desarrolladores, aunque fue tomado desde TecnoFlash
Que tal:
Recientemente me vi en la necesidad de mostrar un script publicitario en una web de un cliente, todo bien, pero me di cuenta de un "pequeño" detalle. Si el bloqueador de publicidad estaba activo el script obviamente no iniciaba y el tamaño de la web en ciertas partes de descuadraba, así que era necesario detectar si el usuario tiene algún tipo de bloqueador de publicidad activo o no.
Este script está probado usando el bloqueador Ghostery, ignoro si funciona con otros sistemas de bloqueo como por ejemplo Adblock entre otros. En un principio pensé en poner ese script dentro de una tabla, y a su lado colocar una imagen transparente que ocupara el 100% del alto de la celda, si el tamaño de la celda cambiaba entonces sería señal de que el script fue cargado exitosamente, si por el contrario su tamaño era cero entonces el script fue bloqueado.
Ahora solo restaba realizar esa comprobación en el evento Load del documento (al terminar la carga de la página web), para mi sorpresa esto no funcionó, en ocasiones se detectaba el tamaño 17 (el alto del banner publicitario), en ocasiones cero, teniendo activo o no el bloqueador, así que definitivamente descartado ese método.
Encontré la solución poco después y es "increiblemente simple", pueden ver el link original de la solución en https://html-online.com/articles/detect-adblock-javascript/. Lo unico que hay que hacer es colocar nuestro script publicitario dentro de una capa de la siguiente manera:
<center>
<div id="wrapfabtest">
<script type="text/javascript" src="https://adhitzads.com/1068008"></script>
</div>
</center>
Crear una función JavaScript de la siguiente manera:
function adjustindex()
{
var sp, enabledsponsors;
if($("#wrapfabtest").height() > 0)
enabledsponsors = 1;
else
enabledsponsors = 0;
try
{
sp = parseInt(enabledsponsors);
}
catch(e)
{
sp = 0;
}
try
{
if(sp > 0)
alert("Adblock detected");
else
alert("Adblock no detected");
}
catch(e)
{
}
}
Y nuestro BODY del documento debe quedar de la siguiente manera:
<body onLoad='javascript:adjustindex();'>
Hay que aclarar que debemos tener previamente JQuery cargado en nuestro documento, puede ser de manera local o desde algún medio externo, para ello bastaría colocar la siguiente línea de código antes de ejecutar nuestro script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Y es todo, ya tenemos una manera muy simple de detectar si nuestro script fue bloqueado o no por la acción de algún Adblocker, veamos ahora el código fuente completo:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
function adjustindex()
{
var sp, enabledsponsors;
if($("#wrapfabtest").height() > 0)
enabledsponsors = 1;
else
enabledsponsors = 0;
try
{
sp = parseInt(enabledsponsors);
}
catch(e)
{
sp = 0;
}
try
{
if(sp > 0)
alert("Adblock detected");
else
alert("Adblock no detected");
}
catch(e)
{
}
}
</SCRIPT>
</head>
<body onLoad='javascript:adjustindex();'>
<center>
<div id="wrapfabtest">
<script type="text/javascript" src="https://adhitzads.com/1068008"></script>
</div>
</center>
</body>
</html>
Espero les sea de utilidad, los espero en el siguiente artículo y gracias por su visita.