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 Adblock Plus.
Instalar la librería just-detect-adblock en tu proyecto. Para ello sigue los siguientes pasos:
- Instalar la libreria just-detect-adblock
También es necesario añadir la librería JavaScript al proyecto modificando el fichero angular.json de la siguiente manera: - 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.
Importante, la localización. El .js en el head y la función en el body. - La redirección se basa en las siguientes normas:
- La idea es que, cuando tenga desactivado el adblocker, el usuario realiza click 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:
La url se obtiene de la siguiente forma:
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
- 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.
- La redirección se basa en las siguientes normas:
- 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:
La url se obtiene de la siguiente forma: