Posts Learn Components Snippets Categories Tags Tools new 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

7 months ago

5 mins read

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

Alternative Tags

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

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
new

PostSrc Code Components

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

View Components
)