¿Cómo detectar Adblock en mi sitio web?
Me gustaría poder detectar si el usuario está utilizando un software bloqueador de publicidad cuando visita mi sitio web. Si lo están usando, quiero mostrar un mensaje pidiéndoles que lo apaguen para apoyar el proyecto, como lo hace este sitio web .
Si ingresa a ese sitio y su navegador tiene algún tipo de software de bloqueo de anuncios habilitado, entonces el sitio, en lugar de mostrar los anuncios reales, muestra un pequeño banner que informa a los usuarios que los ingresos por publicidad se utilizan para alojar el proyecto y que deberían considerar desactivar Adblock. .
Quiero hacer eso en mi sitio web, estoy usando anuncios de AdSense, ¿cómo puedo hacerlo?
Mi solución no es específica de una determinada red publicitaria y es muy ligera. Lo he estado ejecutando en producción durante algunos años. AdBlock bloquea todas las URL que contienen la palabra "anuncios" o "preoferta". Entonces esto es lo que hice:
Agregué un pequeño archivo js a mi webroot con el nombreprebid-ads.js
Esta es la única línea de código en ese archivo. Actualización 2022-04-26 Llame a esta variable de otra manera, ¡ver más abajo!
var canRunAds = true;
Luego en algún lugar de tu página:
<html>
<head>
<script src="/js/prebid-ads.js"></script>
</head>
<body>
<script>
if( window.canRunAds === undefined ){
// adblocker detected, show fallback
showFallbackImage();
}
</script>
</body>
</html>
Actualización 2022-04-26 uBlock Origin carga su propio ads-prebid.js que revierte el truco descrito en esta respuesta (¡orgulloso!), su archivo contiene lo siguiente:
(function() {
'use strict';
window.canRunAds = true;
window.isAdBlockActive = false;
})();
Como solución, simplemente cambie el nombre de su canRunAdsvariable a algo divertido, como window.adsAreWithUso window.moneyAbovePrivacy.
Descubrimiento y solución por Ans de Nijs . ¡Gracias!
Extensiones de soporte
Archivos como ads.js están bloqueados por al menos estos bloqueadores de anuncios en Chrome:
- Bloqueo de anuncios
- Adblock Plus
- Adblock Pro
- fantasma
No funciona con:
Tejón de privacidad
No es una respuesta directa, pero pondría el mensaje detrás del anuncio para que se cargue... en lugar de intentar detectarlo, simplemente aparecería cuando el anuncio no lo haga.
async function detectAdBlock() {
let adBlockEnabled = false
const googleAdUrl = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
try {
await fetch(new Request(googleAdUrl)).catch(_ => adBlockEnabled = true)
} catch (e) {
adBlockEnabled = true
} finally {
console.log(`AdBlock Enabled: ${adBlockEnabled}`)
}
}
detectAdBlock()