如何使用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('是否阻擋了廣告? ', adblockEnabled)
 }
}, 100)

請確保將它放在頁面底部以在DOM加載完成時運行,或者等待DOMContentLoaded事件

一旦獲取到adblockEnabled的值,您就可以將自己的自定義廣告添加到頁面。

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

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網站的鏈接,然後將其添加到頁面中。