Cómo detectar si se está utilizando un bloqueador de anuncios con JavaScript

Una estrategia que utilizo para agregar mi propio anuncio al sitio si sé que se está usando un bloqueador de anuncios.

Es bastante común que los prosumidores y las personas técnicas como los programadores usen un bloqueador de anuncios.

En mi sitio web, calculo que entre el 20% y el 25% de los visitantes utilizan algún tipo de bloqueador de anuncios.

No tengo ningún problema en eso, a pesar de que apoyo el blog usando anuncios, pero una cosa que quería hacer era promocionar uno de mis productos solo si tenía un bloqueador de anuncios habilitado, para que no vea un anuncio de Carbon, el red que uso, pero un enlace a algo que quiero promover.

Odiaría ver que esta técnica se utiliza para mostrar un "deshabilitar el bloqueador de anuncios". tipo de mensaje, porque lo encuentro molesto cuando lo veo usado. Si lo hace, considere la opción de promocionar sus propios productos en lugar de publicitar los productos de otras personas. Solo una idea.

Si tiene un bloqueador de anuncios habilitado en este momento, puede ver un "Patrocinador" justo después del título, bueno, ese es el producto que quiero promocionar, algo que estoy construyendo actualmente y estoy probando la idea al ver cuántas personas firman hasta la lista de espera.

Sin un bloqueador de anuncios, ese lugar está lleno de anuncios, por lo que no quiero tener demasiados anuncios al mismo tiempo y paralizar la experiencia de las personas agradables que ayudan a mantener este blog en funcionamiento.

Este fragmento de JavaScript me ayuda a hacerlo.

let adBlockEnabled = false
const ad = document.createElement('div')
ad.innerHTML = ' '
ad.className = 'adsbox'
document.body.appendChild(ad)
window.setTimeout(function() {
  if (ad.offsetHeight === 0) {
    adblockEnabled = true
  }
  ad.remove()
  console.log('Blocking ads? ', adblockEnabled)
  }
}, 100)

Asegúrese de colocarlo en la parte inferior de la página para ejecutarlo cuando se cargue el DOM, o espere a queEvento DOMContentLoaded.

Una vez que sepas eladblockEnabledvalor, puede agregar su propio anuncio personalizado a la página.

Aquí está el script que utilizo para hacer eso:

if (adblockEnabled) {
  const link = document.createElement('a')
  link.setAttribute('href', 'https://prototyped.dev')
  link.setAttribute('target', '_blank')
  const img = document.createElement('img')
  img.src  = '/img/prototyped.png'
  img.style.paddingBottom = '30px'
  img.style.margin = '0 auto'
  img.style.maxWidth="65%";
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    img.style.filter="invert(100%)"
  }
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
      const newColorScheme = e.matches ? "dark" : "light"
      if (newColorScheme === 'light') {
        img.style.filter = ''
      } else {
        img.style.filter="invert(100%)"
      }
  })
  link.appendChild(img)
  document.querySelector('.prototyped').classList.remove('hidden')
  document.querySelector('.prototyped').appendChild(link)
}

Cargo una imagen, la invierto si está en modo oscuro, la convierto en un enlace alhttps://prototyped.devsitio web, la nueva idea que estoy probando y la agrego a la página.


Más tutoriales de js: