I'm curious how websites determine that a visitor is blocking advertisements and then show a message asking them to whitelist the site. My first thought was to add an element with a class such as `ad` and check whether the blocker removes it from the DOM, but I'm not sure how reliable that is across different blockers. What detection techniques are commonly used, and how accurate are they?
4 Answers
The browser can sometimes fail to load a resource even when no ad blocker is installed, so these checks are only indicators rather than proof. Network failures, privacy settings, browser extensions, and connection problems can produce similar results. A site should account for false positives instead of treating every failed request as definitive evidence.
Another method is to request a resource that blockers commonly target, such as an ad script or a specially named endpoint. The page can check whether the request failed, returned empty content, or never exposed an expected JavaScript function. Combining this with a hidden-element test generally works better than relying on only one signal, since filter lists block different URLs and patterns.
A common approach is to create a hidden test element with ad-related class names, then check it shortly after the page loads. If the element was removed, hidden with CSS, or has no measurable width or height, that’s a strong indication that a content blocker modified it. Waiting briefly after the DOM is rendered is useful because some blockers act after the initial markup is parsed.
There isn’t one universal detection technique. It’s an ongoing back-and-forth: blockers adjust their filters, and websites change their test elements, script names, and request paths. Also, detecting a blocker doesn’t guarantee that ads will display, so many sites use the result mainly to decide whether to show a notice or restrict some content.
That delay is why the warning often doesn’t appear immediately. The page gives the blocker time to remove or hide the test element before checking it.