如何处理 AdBlock 阻塞非广告元素 [英] How to deal with AdBlock blocking non-ad elements

问题描述

我最近遇到一个问题，用户抱怨他们无法访问某个页面，因为链接不在它应该在的位置.

I recently had an issue whereby a user was complaining that they couldn't access a certain page because the link wasn't where it was supposed to be.

经过一番折腾之后，我让他们禁用了所有浏览器扩展，果然问题就解决了.一一重新启用扩展...

After some head-scratching, I had them disable all browser extensions and sure enough the problem went away. Re-enable extensions one by one...

AdBlock.

出于某种原因，它阻止了指向用户想要访问的页面的链接.

For some reason, it was blocking the links to the pages the user wanted to access.

现在，我不投放广告，也从未打算投放，所以通常我只是告诉有此问题的人将网站列入白名单，一切都很好.但是，如果有人从不知道一开始就有问题，我实际上会因此而失去流量.那么我怎样才能避免这种情况呢?

Now, I don't run ads and never plan to, so usually I just tell people with this problem to whitelist the site and all is well. But if someone never knew there was a problem to begin with, I would actually lose traffic because of this. So how can I avoid this?

我真正能想到的唯一一件事就是检测 AdBlock 并弹出一个小通知，说明 AdBlock 已知会破坏网站，而且由于我们不投放广告，他们可能希望为该网站禁用它.我的意思是，该网站是一个游戏，这不是浏览器扩展程序第一次破坏它，但我认为首次访问者不会很高兴看到弹出窗口要求禁用他们的拦截器，你知道?

The only thing I can really think of is to detect AdBlock and pop up a small notice explaining that AdBlock is known to corrupt the website and that, since we don't run ads, they may want to disable it for the site. I mean, the site is a game, and this isn't the first time a browser extension has broken it, but I don't think first-time visitors would be too happy to see a popup asking to disable their blocker, you know?

因此，任何能够从一开始就真正防止 AdBlock 破坏网站的解决方案都会很棒.

So any solution that would actually prevent AdBlock from corrupting the site in the first place would be great.

推荐答案

您无法阻止 Chrome 扩展程序运行.它们在自己的单独线程中运行，具有特权 API，并且对页面脚本隐藏.

You cannot prevent Chrome extensions from running. They operate in their own separate thread, with a privileged API, and hidden from page scripts.

检测广告拦截器很尴尬.最简单的方法是创建一个牺牲元素"——一个带有像ad_unit"这样的类的 div——将它添加到 DOM 中，然后等待一个框架来查看它是否已被隐藏(使用 display: none，例如，或 getBoundingClientRect 检查).

Detecting adblockers is awkward. The easiest way is to create a 'sacrificial element' - a div with a class like 'ad_unit', for example - add it to the DOM and then wait a frame to see if it has been hidden (with display: none, for example, or a getBoundingClientRect check).

不过，元素检查很棘手，因为严格来说，不能保证广告拦截器会同步运行或在您检查代码之前运行.

Element checking is tricky, though, because strictly speaking there's no guarantee an adblocker will run synchronously or before your checking code.

因为广告拦截器在特权模式下运行，它们的操作不会触发非特权脚本空间中的事件.更简单地说:您不能使用 DOMMutationEvents 来监视外部扩展程序是否干扰了您的页面.

Because adblockers run in a privileged mode, their operation does not trigger events in the nonprivileged script space. To put it more simply: you can't use DOMMutationEvents to spy when a foreign extension messes with your page.

另一种选择是尝试加载一个牺牲文件"——一个带有 URI 的图像，比如说，看起来像一个广告——然后将一个 onError 处理程序附加到元素.如果它抛出一个看起来可疑的错误(我认为它是 Chrome 上的 ERR_BLOCKED_BY_CLIENT)，那么你就会显示你的警告信息.

The other option is to try and load a 'sacrificial file' - an image with a URI that looks like an advert, say - and then attach an onError handler to the element. If it throws an error that looks suspicious (I think it's ERR_BLOCKED_BY_CLIENT on Chrome), then you show your warning message.

您的最终选择是首先尝试避免招致 Adblock 的愤怒.Adblockers 通常使用 URI 和 CSS 选择器的开放黑名单，例如 EasyList (https://easylist.to/easylist/easylist.txt) - 这是 AdblockPlus 和其他一些使用的.您可以尝试确保您的 DOM 元素永远不会有与任何这些选择器发生冲突的 ID 或类.不过，这是一个很大的清单，并且可以随时更改.

Your final choice is to try and avoid incurring Adblock's wrath in the first place. Adblockers generally use open blacklists of URIs and CSS selectors, like EasyList (https://easylist.to/easylist/easylist.txt) - this is what AdblockPlus uses and a fair few others. You could just try and make sure your DOM elements never have IDs or classes that collide with any of those selectors. It's a big list, though, and it can change at any time.

这篇关于如何处理 AdBlock 阻塞非广告元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！