How To Detect That AdBlock Is Enabled On Your Website

profile picture

How To Detect That AdBlock Is Enabled On Your Website

You are running a website that contains a bit of advertisments, exactly like this blog, hoping that it will be enough to cover your hosting costs, but it's not working very well because most of your visitors do not see these ads ? Especially thanks to this awesome browser plugin that we all know: AdBlock.

Now, I'm totally an AdBlock user because on some website the ads are totally ugly and intrusive.. But sometimes it is good to disable the plugin on websites that can place advertisments in a correct and discrete way, so the website owner can actually make his website profitable.

AdBlock will prevent your browser to load any JavaScript files containing the word "ad", and its variations. Knowing that, if we create our own JavaScript file and set a specific variable in it, we can check if the variable exists later on on our other scripts.

In the <head> of your html page, insert a new JS file:
<script src="/js/ads.js"></script>

This file can contain a single line:

    var adsAreEnabled = true; // or whatever you want to call it

Now, put your other script files right at the end of the body, and within your application javascript, you can simply do something like that:

    if (window.adsAreEnabled === undefined) {
        // Display a message
    }

And basically that's it!

Another good method is to hide a message juste under the advertisment emplacement. With the correct z-index and an absolute position, it's the easiest solution.

about me

profile picture

I consider myself as an IT Business Artisan. Or Consultant CTO if you prefer. I'm a self-taught Web Developper, coach and teacher. My main work is helping and guiding digital startups.

more about me

follow me

newsletter

A weekly email with the latests articles

2020 My Dynamic Production SPRL All rights Reserved.