Lopezito
Zeta
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
Muuuuy buenas a todos.
En este caso les enseñare a detectar el uso de AdBlock y unos tips que tal vez les guste para su implementación, prosigamos.
Tutorial: Detectar el uso de AdBlock con AdBlock Detector[+ideas]
AdBlock Detector es un script realizado por TechBase Republic, y nos proporcionan una manera de poder detectar el uso de AdBlock(y también AdBlockPlus).
Al final de éste mensaje, dejaré demos, cualquier comentario para mejorar el tutorial será tomado en cuenta y se agradece desde ya.
Sirve para cualquier plataforma que soporte Javascript.
En este caso les enseñare a detectar el uso de AdBlock y unos tips que tal vez les guste para su implementación, prosigamos.
Tutorial: Detectar el uso de AdBlock con AdBlock Detector[+ideas]
AdBlock Detector es un script realizado por TechBase Republic, y nos proporcionan una manera de poder detectar el uso de AdBlock(y también AdBlockPlus).
Al final de éste mensaje, dejaré demos, cualquier comentario para mejorar el tutorial será tomado en cuenta y se agradece desde ya.
Sirve para cualquier plataforma que soporte Javascript.
Insertar CODE, HTML o PHP:
<script type="text/javascript">
function _enabled(){
//Esperate! Está usando AdBlock
alert("Oh! Estás usando AdBlock! Desgraciado!");
}
function _disabled() {
//No hemos detectado el uso de AdBlock!
alert("Así nos gusta! Sin AdBlock!");
}
function _status(isDetected) {
//False = No detectado, True = Detectado
alert('Estado: '+isDetected);
}
var _abdStatusFnc = '_status';
var _abdDetectedFnc = '_enabled';
var _abdNotDetectedFnc = '_disabled';
</script>
<script async type="text/javascript" src="detector.js"></script>Espectadores: ¿Fin del tutorial?
Lopezito: No!, no se vayan! prosigamos!
Bueno, algunos por ahí ya conocian este script, pero ahora les mostraré algunas maneras de "joder" al visitante para que lo desactive en nuestro sitio.
Precisarán tener el siguiente archivo js: http://www.lopezito.com/adblockdetector/detector.js
1- Con un anuncio: Este anuncio podrá ser solo texto, imágenes, o como quieran maquetearlo.
1.a - En alguna parte de nuestra web colocaremos un div con clase "adbdet", y lo diseñan como quieran(Al final del tuto les dejare algunos estilos a descargar):
Insertar CODE, HTML o PHP:
<div class="adbdet">...Anuncio...</div>1.b - Luego antes de finalizar el </body>, colocaremos el siguiente código:
Insertar CODE, HTML o PHP:
<script type="text/javascript">
function _enabled(){
var elems = document.getElementsByClassName("adbdet");
for(var i=0;i!=elems.length;++i){
elems[i].style.visibility = "visible";
}
}
var _abdDetectedFnc = '_enabled';
</script>
<script async type="text/javascript" src="detector.js"></script>1.c - Y en nuestro archivo de estilos(O sea, donde está los códigos de CSS), colocan en alguna parte:
Insertar CODE, HTML o PHP:
.adbdet{visibility:hidden}1.d - Y listo, lo que hemos hecho con esto es que al agregar el código CSS que le da al atributo "visibility" el valor "hidden", cuando inicie nuestra web estará "oculto" el anuncio de detección, pero con el código de Javascript, se le dará el valor "visible" a dicho atributo, que permitirá la visibilidad a nuestro anuncio, si es que detecta AdBlock en el transcurso de la carga de nuestra web.
2- Ocultar cierto contenido: Pongamos el ejemplo que poseemos una página de descargas, y nosotros queremos evitar que visualicen los links de descargas o cierta información de la descarga en nuestros posts.
2.a - Al contenido que queremos ocultar lo "encerraremos" en un <div> o cualquier otra etiqueta pero con la clase "adbcon", quedando de la siguiente manera:
Insertar CODE, HTML o PHP:
Requisitos del soft/juego/etc:
<div class="adbcon">...</div>
Los links de descarga son:
<div class="adbcon">...</div>2.b - Antes de </body> agregaremos el siguiente código:
Insertar CODE, HTML o PHP:
<script type="text/javascript">
function _enabled(){
var elems = document.getElementsByClassName("adbcon");
for(var i=0;i!=elems.length;++i){
elems[i].style.visibility = "hidden";
}
}
var _abdDetectedFnc = '_enabled';
</script>
<script async type="text/javascript" src="detector.js"></script>2.c - Y listo, por lo tanto, lo que haremos es que, cuando cargue nuestro código de Javascript, le dará el valor "hidden" al atributo "visibility", al contenido que este "encerrado" en alguna etiqueta(ej: div) con clase "adbcon", y oculte automáticamente el contenido dentro del mismo.
2.2- Ésta manera vendría a ser una modificación de la anterior, ya que tal vez el contenido sea visto al principio de la carga, por lo tanto vamos a modificar lo puesto anteriormente.
2.2.a - Ocultamos el contenido como lo explique en el punto 2.a.
2.2.b - Modificaremos el código del punto 2.b:
Insertar CODE, HTML o PHP:
<script type="text/javascript">
function _disabled(){
var elems = document.getElementsByClassName("adbcon");
for(var i=0;i!=elems.length;++i){
elems[i].style.visibility = "visible";
}
}
var _abdNotDetectedFnc = '_disabled';
</script>
<script async type="text/javascript" src="detector.js"></script>2.2.c - En nuestro fichero de estilos agregaremos:
Insertar CODE, HTML o PHP:
.adbcon{visibility:hidden}2.2.d - Así, cuando cargue nuestra web el contenido esté oculto y si no es detectado el uso de dicha extensión, el código Javascript modificará al atributo "visibility" dándole el valor de "visible", y por consiguiente, mostrará el contenido que hemos ocultado.
3- Redireccionar al usuario si se le detecta AdBlock:
Insertar CODE, HTML o PHP:
<script type="text/javascript">
function _enabled(){
window.location = 'URL';
}
var _abdDetectedFnc = '_enabled';
</script>
<script async type="text/javascript" src="detector.js"></script>3.a - Reemplazar "URL" por la url a redireccionar..
Espectadores: Genial! ¿Algo más?
Lopezito: Por el momento, eso es todo!
Eso es todo, gracias por leer el tutorial, si les gusto compartanlo, comenten, denle a click a -> {"Me Agrada","Me Gusta","Google+","Twittear"}.
Demo:
Indice - Detectar el uso de AdBlock - AdBlock Detector
Fuentes:
Adblock Detector (v. 1.0) - A JavaScript way of doing ad block detection
Lo prometido, es deuda y por lo cual no quiero endeudarme, por lo cual dejo algunos ejemplos de "anuncios":
Index of /adblockdetector/extras
Alternativas para detectar el uso de AdBlock(Y el plus):
1- http://forobeta.com/tutoriales/197763-alertar-de-adblock.html de [MENTION=9679]cicklow[/MENTION]
2- http://forobeta.com/tutoriales/332428-detectar-de-adb-plus-y-avisar-al-usuario.html de [MENTION=109146]batcher[/MENTION]
Última edición: