Como habrán notado quienes visiten este sitio utilizando bloqueadores de publicidad, desde hoy se muestra un cartel solicitando el favor de desactivarlo (o al menos agregar al dominio "linuxito.com" en la lista blanca). En este artículo quisiera demostrar cómo implementar este simple (pero muy efectivo) mecanismo de detección, y cómo mostrar un mensaje amigable al usuario en la parte superior de la página.



Los bloqueadores de publicidad utilizan listas negras para impedir la descarga de scripts que utilizan nombres de archivo/recurso relacionados con publicidad. Típicamente se bloquea a descarga de archivos con nombres "ads.js" y similares. La técnica de detección de bloqueadores se basa entonces en intentar descargar un archivo de nombre "/ads.js" (ubicado en la raíz del sitio Web) y luego verificar si efectivamente se logró descargar (sino, significa que fue bloqueado por AdBlock u otro).

Hay otras técnicas que se basan en verificar directamente si las publicidades han sido cargadas. Aunque este método es menos efectivo, ya que a veces la descarga de publicidad es lenta y se detectan muchos falsos positivos. Con lo cual depende de un temporizado antes de poder verificar, lo que resulta menos efectivo y lento. Sin contar con que depende de mantener actualizado el código respecto a los cambios en el servidor de publicidad. Esta técnica en cambio es rápida y efectiva.

El primer paso consiste en crear el archivo /ads.js en la raíz del sitio Web. Dentro del mismo insertar el siguiente contenido:

var e=document.createElement('div');
e.id='detectadblockscript-linuxito.com';
e.style.display='none';
document.body.appendChild(e);

Luego se debe agregar el siguiente contenido al final del tag <body> de nuestro /index.php (o cualquiera sea el índice o recurso inicial del sitio).

Reemplazar:

</body>
</html>

Por:

<div id="detectadblock" style="color: #fff; background-color: #adadad; z-index: 2000; width: 100%; top: 0; left: 0; position: fixed; font-size: 0.9em;"></div>
<script src="/ads.js" type="text/javascript"></script>
<script type="text/javascript">
var detectadblock_msg = '<center><p>Linuxito es un sitio sin fines de lucro y se basa en la publicidad para costear hosting y dominio. Por favor considera deshabilitar el bloqueador de publicidad en linuxito.com <img src="/images/emoji/blush.png" style="vertical-align: sub;" width="20px"></p></center>';
if(!document.getElementById('detectadblockscript-linuxito.com')){
    document.getElementById('detectadblock').innerHTML = detectadblock_msg;
}
</script>

</body>
</html>

Ajustar la variable detectadblock_msg con el mensaje que se desee mostrar.

El estilo del DIV con ID igual a "detectadblock" se puede aplicar a través de una hoja de estilo CSS. Sin embargo en este ejemplo está seteado inline para demostrar cómo es posible crear una barra superior fija en la ventana de la página.

Espero que les sirva y visiten el enlace a continuación para saber cómo es posible hacer un seguimiento al bloqueo de publicidad con Google Analytics.

Referencias


Tal vez pueda interesarte


Compartí este artículo