如何检测请求是否被 AdBlocker 阻止？

Question

我们在 Vue Js 中有一个页面，我们注意到一些请求被 Adblocker 阻止了，我想检测这种情况何时发生（仅当请求被阻止时）

Answer 1

创建一个看起来像广告的端点来欺骗 adblock 阻止它，并将其加载到脚本标签中，即：

<script src="/adverts.js" type="text/javascript"></script>

端点然后 returns 一些基本的 js 在页面上创建一个虚拟元素：

app.get('/adverts.js', function (req, res, next) {
    const response = `var a=document.createElement('div');a.id='advert-test';a.style.display='none';document.body.appendChild(a)`

    res.setHeader('content-type', 'text/javascript')
    res.setHeader('content-length', response.length)
    res.send(response)
})

然后在页面上或您的应用程序中，您可以简单地查找应该加载的元素，如果没有则它被阻止，这将表明用户已启用 adBlock：

let adBlocked = document.getElementById('advert-test') ? false : true

如果您尝试解决广告块阻止图片的问题，请不要使用广告特征（例如广告的常见图片尺寸）来命名您的资产。 IE。 /ads/ad375x50.jpg 而不是使用 /a/708e8144b8c034c8bde17391ef1bf9c1.jpg 和 match/map 之类的哈希值与实际文件。这包括 DOM 个 ID 和类，例如 class="share" 将被隐藏（heres 被阻止的列表类）。

如果您试图解决加载 AdSense 或第 3 方域等问题，那您就走运了，因为没有解决方法。

如何检测请求是否被 AdBlocker 阻止？

How can I detect if a request is blocked by an AdBlocker?

request

adblock

vue.js