Detecting ad block on your site using javascript

Subscription model is the future, monetisation using advertisement plays big contribution for our revenue.

Vasanth Jagadeesan

Enterprise solution architect

Subscription model is the future, monetisation using advertisement plays big contribution for our revenue.

Detecting ad blocks in our user browser we can display right message to our users.

async function adBlockerEnabled() {
    let blocked;

    async function tryRequest() {
        try {
            return fetch(
                new Request("https://www.googletagmanager.com/gtag/js?id=[GTag-Code]", {
                    method: 'HEAD',
                    mode: 'no-cors'
                })) 
                .then(function(response) {
                    // Google Ads request succeeded, so likely no ad blocker
                    blocked = false;
                    return blocked;
                }).catch(function(e) {
                    // Request failed, likely due to ad blocker
                    isBlocked = true;
                    return isBlocked;
                });
        } catch (error) {
            // fetch API error; possible fetch not supported (old browser)
            // Marking as a blocker since there was an error and so
            // we can prevent continued requests when this function is run
            console.log(error);
            isBlocked = true;
            return blocked;
        }
    }

    return isBlocked !== undefined ? isBlocked : await tryRequest();
}

adBlockerEnabled().then((blocked) => {
    if (blocked) {
        // ad block is on
    } else {
        // ad block is off
    }
});

A simple head request to the google tag manager will give the advertisement blocked status.

Conclusion

Subscription based model are the future business model. Using this script we can promote our paid plans to our users or block the site content for those who disabled advertisement using ad blockers.
Happy Coding!!!

Conclusion

Share