Как определить, используется ли блокировщик рекламы с JavaScript

Пользователи и технические специалисты, такие как программисты, довольно часто используют блокировщик рекламы.

На моем сайте, по моим оценкам, от 20% до 25% посетителей используют какой-либо блокировщик рекламы.

У меня нет проблем с этим, хотя я поддерживаю блог с помощью рекламы, но одна вещь, которую я хотел сделать, это продвигать один из моих продуктов, только если у вас включен блокировщик рекламы, чтобы вы не видели рекламу от Carbon, сеть, которую я использую, но ссылку на то, что я хочу продвигать.

Мне бы не хотелось, чтобы эта техника использовалась для отображения надписи “отключить блокировщик рекламы! “своего рода сообщение, потому что меня раздражает, когда я вижу, как его используют. Если вы это сделаете, рассмотрите возможность продвижения своих собственных продуктов вместо рекламы продуктов других людей. Просто идея.

Если у вас сейчас включен блокировщик рекламы, вы можете увидеть “Спонсора” сразу после названия – ну, это продукт, который я хочу продвигать – вещь, которую я сейчас создаю, и я тестирую идею, видя, сколько людей подписываются на список ожидания.

Без блокировки рекламы это место занято рекламой, поэтому я не хочу показывать слишком много рекламы одновременно и портить впечатление от хороших людей, которые помогают поддерживать этот блог.

Этот фрагмент JavaScript помогает мне сделать это.

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)

Убедитесь, что вы разместили его внизу страницы, чтобы запустить его при загрузке DOM, или дождитесь события DOMContentLoaded.

Как только вы узнаете значение adblock включен , вы сможете добавить свое собственное объявление на страницу.

Вот сценарий, который я использую для этого:

if (adblockEnabled) {
  const link = document.createElement('a')
  link.setAttribute('href', 'https://flaviocopes.com')
  link.setAttribute('target', '_blank')
  const img = document.createElement('img')
  img.src = '/img/image.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('.promotion').classList.remove('hidden')
  document.querySelector('.promotion').appendChild(link)
}

Я загружаю изображение, инвертирую его, если оно в темном режиме, делаю его ссылкой на https://flaviocopes.com веб-сайт, и я добавляю его на страницу.

Оригинал: “https://flaviocopes.com/how-to-detect-adblocker/”