Loading...

How to know whether a user is using an adblocker

how-to blog
Ram Patra Published on January 25, 2020
Image placeholder

Adblocker detection is a nice feature to have, given that around 47% of the users now use ad blockers according to GlobalWebIndex.

You can show a friendly message to disable the adblocker to support your website or you can simply not allow the user to use the site until they have allowed ads for your website. People should understand that the content may be free but maintaining the website isn’t. However, the website should show quality ads and a maximum of up to 3-4 ads per page. No pop-ups or all that crap, seriously. That’s why people use adblockers in the first place.

Below is the javascript code which I used to detect adblockers and prevent users from using the website if they have one enabled. This code not only detects adblockers but it also takes care of the Overall Bounce Rate in Google Analytics or tracks the users with adblockers turned on.

Create a file called ads.js with the below code. Adblockers block the javascript files which have ad in their name. So, the below file won’t be loaded when the adblocker is enabled and therefore, the variable (in this file) would be undefined.

isAdBlockActive = false;

File: ads.js

Include script.js in your page where you want to check for adblockers. We check for isAdBlockActive variable in the below code as well as for the element which Google Ads create, i.e, ins.adsbygoogle. If either the variable is undefined or the element isn’t created then the user is blocking ads and we show the modal as well as track on GA. Now, if you aren’t using Google Ads then you can just check whether the variable is defined in script.js.

var AdBlocker = (function () {

    function showModal() {
        $('#modal_ad_blocker').modal(); // show a message to the user when ads are blocked
    }
    
    setInterval(function () {
        // Get the first AdSense ad unit on the page
        var ad = document.querySelector("ins.adsbygoogle");
    
        // If the ads.js or the Google ads are not loaded, show modal and track the event
        if (typeof isAdBlockActive === 'undefined'
            || (ad && ad.innerHTML.replace(/\s/g, "").length === 0)) {
    
            showModal();
    
            if (typeof ga !== 'undefined') {
                // Log an event in Universal Analytics
                // but without affecting overall bounce rate
                ga('send', 'event', 'Adblock', 'Yes', {'nonInteraction': 1});
    
            } else if (typeof _gaq !== 'undefined') {
                // Log a non-interactive event in old Google Analytics
                _gaq.push(['_trackEvent', 'Adblock', 'Yes', undefined, undefined, true]);
            }
        }
    }, 5000); // check every 5 seconds

})();

File: script.js

It is that simple. You can even see how it looks on this website by installing AdBlockPlus Extension for your browser and then reloading this page.

Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on January 25, 2020
Image placeholder

Keep reading

If you liked this article, you may like these as well

March 14, 2021 Beginners guide to mine crypto with your computer

Crypto Mining nowadays has been made really easy by apps like NiceHash, CudoMiner, HoneyMiner, etc. Anyone with a computer and some decent CPU or GPU (Graphics Card) can mine and earn quick money. And, because of the rising price of Bitcoin and mining profits, everyone wants to mine nowadays. Ergo, I am putting down a short guide on how to get started with mining.

November 28, 2019 How to make a Wedding Website for free

I made this website for my wedding in November 2017 and thought of open-sourcing it on my 1st anniversary. I honestly had put a good amount of time developing it so reckoned this effort may help others save some of their time. Hope you guys like it.

November 28, 2019 How I made my blog

I made this blog using JAMStack. J stands for Javascript, A for APIs, and M for Markups. So, in short, a website built using HTML, CSS, and Javascript only and maybe accessing some APIs over HTTP can be said to be built with JAMStack and are generally called Static Websites.

Like my work?

Please, feel free to reach out. I would be more than happy to chat.