En este ejemplo instalaremos en Angular un bloqueador de Adblockers. Os dejo el siguiente repositorio https://github.com/al118345/ProyectoTestBlockAdblock con una implementación de ejemplo y el siguiente video https://www.youtube.com/watch?v=lnTpHgYtLRs:
Seguramente, si has encontrado esta web, serás un propietario de un sitio web y esperabas que la publicidad pagará tus facturas del hosting. Y, si tienes éxito, incluso podrías ser capaz de pagar un suplemento a tu salario como compensación por el trabajo duro.
En la otra parte están los usuarios de tu web. Tus queridos visitantes están cansados de ser bombardeados con publicidad intrusiva, banners llamativos y anuncios que arruinan la experiencia de navegación. Ellos no tienen que por qué ser felicitados por ser el visitante un millón de tu sitio web, no quieren entrar en el sorteo de cinco iPhone, lo único que quieren es acceder a tu contenido.
Como es mucho más fácil para los usuarios quitar los anuncios, que desarrollar un ética publicitaria en todo Internet, surgió rápidamente una solución AdBlockers
Los AdBlockers son extensiones para navegador que bloquean o eliminan la publicidad de una web. Estas extensiones elimina todo excepto el contenido principal de la página, con lo que, cómo propietario de una web es un problema muy serio.
Al principio no era un gran problema ya que pocos los utilizaban y sabían de su existencia. Pero eso ha cambiado, si te das una vuelta rápida por los principales repositorios de extensiones para navegador verás que los AdBlockers son la categoría más popular. Claro está, los sitios pequeños están en mayor riesgo, ya que no pueden atraer el mismo interés de los anunciantes y no pueden experimentar con diferentes formatos.
Por suerte, el AdBlocker más popular, AdBlock Plus, permite la publicidad aceptable por defecto. A juzgar por el revuelo que suscitó esta decisión, mucha gente restringió aún más los parámetros de Adblock Plus, mientras que otros cambiaron de extensión. Esto significa que nosotros, como autores, tenemos que gestionar este problema. Una solución sencilla es detectar la presencia de un bloqueador de anuncios, y este es el propósito de este artículo.
Instalar la librería just-detect-adblock en tu proyecto. Para ello sigue los siguientes pasos:
npm install just-detect-adblock --save
También es necesario añadir la librería JavaScript al proyecto modificando el fichero angular.json de la siguiente manera: "scripts": [
"node_modules/just-detect-adblock/dist/bundle.umd.js"
]
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<script type="text/javascript">
var detectadblock_msg =
'1938.com.es 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 1938.com.es ' +
'';
justDetectAdblock.detectAnyAdblocker().then(function(detected) {
if(detected){
if (window.location.toString().includes('adblock_') == false ) {
alert(detectadblock_msg);
if (window.location.toString().includes('adblock_') == false ) {
if (window.location.toString().split('/').length>2) {
aux = window.location.toString().split('/')[3].toString()
window.location = 'adblock_/' + aux
} else
{
window.location = 'adblock_'
}
}
}
}
});
</script>
Importante, la localización. El .js en el head y la función en el body. const routes: Routes = [
{ path: 'adblock_/:route', pathMatch: 'prefix', component: AdblockActivoComponentComponent },
{ path: 'adblock_', component: AdblockActivoComponentComponent },
{ path: '**', component: AppComponent },
];
<p id="errorText">1938.com.es es un sitio sin fines de lucro y se basa en la publicidad para costear hosting y dominio.</p>
<p id="errorText">Por favor considera deshabilitar el bloqueador de publicidad en 1938.com.es. </p>
<a id="errorLink" href="{{currentURL}}">Cuando lo desactives haz click aqui para volver a la página</a>
La url se obtiene de la siguiente forma:
public currentURL: string;
constructor(
private _Activatedroute : ActivatedRoute ) {
}
ngOnInit(): void {
this.currentURL = this._Activatedroute.snapshot.paramMap.get('route');
}
Instalar la librería fuckadblock en tu proyecto. Para ello sigue los siguientes pasos
npm install fuckadblock
<script>var fuckAdBlock = undefined;</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js"></script>
<script>
var detectadblock_msg =
'1938.com.es 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 1938.com.es ' +
'';
// We create the function that will be executed if AdBlock is detected
var adBlockDetected = function () {
if (window.location.toString().includes('adblock_') == false ) {
alert(detectadblock_msg);
if (window.location.toString().includes('adblock_') == false ) {
if (window.location.toString().split('/').length>2) {
aux = window.location.toString().split('/')[3].toString()
window.location = 'adblock_/' + aux
} else
{
window.location = 'adblock_'
}
}
}
}
// We create the function that will be executed if AdBlock is NOT detected
var adBlockUndetected = function () {
}
// We observe if the variable "fuckAdBlock" exists
if (typeof FuckAdBlock === 'undefined') {
// If it does not exist, it means that AdBlock blocking the script FuckAdBlock
// Therefore the function "adBlockDetected" is executed
// PS: The function is executed on the "document ready" in order to select the HTML with jQuery
$(document).ready(adBlockDetected);
} else {
// Otherwise, our functions we add to FuckAdBlock for a classic detection
fuckAdBlock.on(true, adBlockDetected).on(false, adBlockUndetected);
}
</script>
const routes: Routes = [
{ path: 'adblock_/:route', pathMatch: 'prefix', component: AdblockActivoComponentComponent },
{ path: 'adblock_', component: AdblockActivoComponentComponent },
{ path: '**', component: AppComponent },
];
<p id="errorText">1938.com.es es un sitio sin fines de lucro y se basa en la publicidad para costear hosting y dominio.</p>
<p id="errorText">Por favor considera deshabilitar el bloqueador de publicidad en 1938.com.es. </p>
<a id="errorLink" href="{{currentURL}}">Cuando lo desactives haz click aqui para volver a la página</a>
La url se obtiene de la siguiente forma:
public currentURL: string;
constructor(
private _Activatedroute : ActivatedRoute ) {
}
ngOnInit(): void {
this.currentURL = this._Activatedroute.snapshot.paramMap.get('route');
}