Instalar fuckadblock o just-detect-adblock, bloqueadores de adblock en Angular.

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:

Introducción

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.

Solución para Brave en Angular Universal.

Instalar la librería fuckadblock en tu proyecto. Para ello sigue los siguientes pasos

• Instalar la libreria fuckadblock

   npm install fuckadblock
  

• Actualizar el fichero index.html. El comportamiento de esta modificación es, en caso de tener activo el adblock, mostrar una alerta al usuario y redireccionarlo a una página explicativa.

    <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>
  

• La redirección se basa en las siguientes normas:

   const routes: Routes = [
    { path: 'adblock_/:route', pathMatch: 'prefix', component: AdblockActivoComponentComponent },
    { path: 'adblock_', component: AdblockActivoComponentComponent },
    { path: '**', component: AppComponent },
   ];
    

• La idea es que, cuando tenga desactivado el adblocker, el usuario realiza clic en nuestra página explicativa y se redireccione a la web que en un principio quería acceder. Para ello primero introducimos el siguiente código en un componente creado para esta finalidad:

    <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');
    }