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

Question

We have a page in Vue Js and we have noticed that some requests are blocked by Adblocker, I would like to detect when this happens (only when a request is blocked)

Answer 1

Create an endpoint which looks like an advert to fool adblock into blocking it, and load it in a script tag i.e:

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

The endpoint then returns some basic js to create a dummy element on the page:

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)
})

Then on the page or in your app you can simply look for the element which should have been loaded, if it wasn't then it was blocked, which will indicate the user has adBlock enabled:

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

If you're trying to work around adBlock blocking images, don't name your asset with ad characteristics like common image dimensions for ads. ie. /ads/ad375x50.jpg instead use something like /a/708e8144b8c034c8bde17391ef1bf9c1.jpg and match/map the hash with the actual file. This includes DOM ids and classes like class="share" will get hidden (heres a list of blocked classes).

If you're trying to work around loading AdSense or a 3rd party domain etc you're out of luck as there is no workaround for that.