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