Posts Learn Components Snippets Categories Tags About
/

How to detect adblock on your website?

Learn how to detect AdBlock on your website easily and determine what to show to the user afterwards

4 months ago

5 mins read

71 views

In this short post, you'll learn how to detect AdBlock on your website and display the appropriate message to the user. It's quite straight forward but this method might be tricky if you are not familiar with javascript.

To achieve this create a method to checkAdBlocker and inside the method perform an ajax request to google tag manager which is essentially Google analytics script that you have placed on your website. Generally, Adblock block this script and other tracking scripts, so by doing so the ajax that perform the request will get blocked.
async function checkAdBlocker() {
    let isBlocked;

    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
                    isBlocked = false;
                    return isBlocked;
                }).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 isBlocked;
        }
    }

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

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

Load comments for How to detect adblock on your website?

new

PostSrc Code Snippets

Learn new snippets today, level up your Laravel, Alpine JS, Vue JS, Tailwind CSS skills and more.

Learn New Snippets

Authored by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components