I'm curious how websites figure out that a visitor is running an ad blocker and then show a message asking them to disable it or whitelist the site. My first thought was to add a hidden 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?
3 Answers
You can also try loading a script or endpoint whose URL resembles an advertisement or tracking resource. If the browser request fails, returns no usable content, or the expected global function never appears, that suggests the request was blocked. A frontend request may fail even though the same URL works from the server, because the blocker is filtering the browser’s request.
A common approach is to add a small bait element using class names that ad blockers typically target, then check it after the page has rendered. You can see whether the element still exists, whether it was hidden, or whether its dimensions are zero. Waiting briefly helps avoid checking before the browser or blocker has finished processing the page.
There isn’t a guaranteed single test because blockers use different filter lists and techniques. Sites often combine a bait-element check with a test request or script-load check, but the result is still only an indication and can produce false positives. It’s also worth considering whether blocking access is better than simply detecting the blocker, since aggressive detection can frustrate visitors.
That’s why those warning messages often appear a short time after the page loads rather than immediately.