如何檢測Adblocker是否與JavaScript一起使用

如果我知道正在使用adblocker,則可以使用該策略將自己的廣告添加到網站中

對於生產者和程序員這樣的技術人員來說,使用adblocker是很常見的。

在我的網站上,我估計大約20%到25%的訪問者使用某種形式的adblocker。

即使我使用廣告來支持博客,我也沒有任何問題,但是我要做的一件事就是僅在啟用了廣告攔截器的情況下促銷我的一種產品,這樣您就看不到Carbon的廣告了,我使用的是網絡,但指向我要推廣的東西的鏈接。

我不希望看到這種技術用於顯示“禁用adblocker!”。這類消息,因為當我看到它使用時,我會覺得很煩。如果這樣做,可以考慮推廣自己的產品,而不是廣告其他人的產品。只是一個主意。

如果您現在啟用了廣告攔截器,則標題後會顯示一個“贊助商”-嗯,這就是我要推廣的產品-我正在構建的產品,正在通過查看有多少人簽名來測試該想法直到候補名單。

沒有廣告攔截器,那個地方忙著一個廣告,所以我不想同時擁有太多廣告,而不會給那些幫助保持此博客正常運轉的好人破壞經驗。

這個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事件

一旦你知道了adblockEnabled值,您可以將自己的自定義廣告添加到頁面。

這是我用來執行此操作的腳本:

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

我加載圖片,如果它是黑暗模式則將其反轉,使其鏈接到https://prototyped.dev網站,我正在測試的新想法,然後將其添加到頁面中。

免費下載我的JavaScript初學者手冊


更多js教程: