Home Carbon Ads How To Detect Adblock using JavaScript

How To Detect Adblock using JavaScript

adblock

In this post we will look at how we can detect if user has installed Adblock extension or not. Websites that depend on ads for revenue can detect adblock and than stop users from viewing their site. So only those users can view your website who don’t have adblock installed.

View Demo

Its important to understand how adblock works before we find a way to detect presence of adblock.

How does Adblock work?

Adblock uses three simple mechanisms to block ads. Mechanisms are Blocking Requests, Element Hiding and Filters. Now we will look at each of them.

Adblock uses source URL of images, iframes, scripts and flash files to identify advertisements in the page. And then it blocks(HTTP and HTTPS requests) and hides(CSS display, visibility and height) those advertisements. It identifies the domain names of advertising networks and also uses build in filters and keywords to identify advertising links.

Adblock identifies text ads using a list of keywords and hides the advertising text using CSS.

Filters allows users to specify new domain names, words and other things to be blocked by Adblock.

Logic To Detect Adblock

We can simply include iframes, images and scripts on our webpage and then point them to advertising networks or embed advertising specific keywords in the URLs. And then detect if resource is been hidden or not. If the elements are hidden then we can be sure that Adblock is installed and running in user browser.

        function detect()
        {
            //create a iframe. Append the iframe to the body. And then after 100ms check if their offsetHeight, display or visibility is set such a way that user cannot see them.
            //In the URL use the words specific to advertising so that Adblock can do string matching.
            var iframe = document.createElement("iframe");
            iframe.height = "1px";
            iframe.width = "1px";
            iframe.id = "ads-text-iframe";
            iframe.src = "http://domain.com/ads.html";
           
            document.body.appendChild(iframe);
           
            setTimeout(function()
                       {
                           var iframe = document.getElementById("ads-text-iframe");
                           if(iframe.style.display == "none" || iframe.style.display == "hidden" || iframe.style.visibility == "hidden" || iframe.offsetHeight == 0)
                           {
                                alert("Adblock is blocking ads on this page");
                                iframe.remove();
                           }
                           else
                           {
                                alert("Adblock is not detecting ads on this page");
                                iframe.remove();
                           }
                       }, 100);
        }

We check for visibility after 100ms because we need to gives some time to Adblock to intercept the request and also apply its invisibility styling to the iframe. This is a simple way of detecting if Adblock is present or not.

Conclusion

I would recommend you to detect for Adblock and stop Adblock users from accessing your website if your website is completely dependent on advertising revenue. Thanks for reading.

Narayan Prusty
Creating a WYSIWYG EditorSEO Pagination Best Practices and Friendly URLs
Comments: 8
  1. ajar
    6 years ago

    Try this one
    http://lukkr.com/noadblock

    ReplyCancel
  2. 6 years ago

    not working

    ReplyCancel
  3. Nad88
    6 years ago

    Hello,
    Thank’s it works well. 😉

    ReplyCancel
  4. 7 years ago

    Detect AdBlock with JavaScript

    <script>
    window.onload = function() {
    setTimeout(function() {
    if ( typeof(window.google_jobrunner) === "undefined" ) {
    console.log("ad blocker installed");
    } else {
    console.log("no ad blocking found.");
    }
    }, 10000);
    };
    </script>

    ReplyCancel
  5. 7 years ago

    Hi pnarayanprusty,
    i have pasted this code in html/ java script widget but it doesn’t worked for me, please tell me how to make this work. but i loved how your site is shown to disable the adblock.( sorry i don’t know the coding, it is good if you can provide direct working html/ java script format, so i can easily add). i will be gratitude for your help

    Awaiting for your reply
    Thanks

    ReplyCancel
    • Narayan Prusty
      7 years ago

      http://qnimate.com/anti-adblock-plugin-for-wordpress/

      ReplyCancel
  6. karim
    8 years ago

    but what if someone disable javascript in his/her browswer ?

    ReplyCancel
    • pnarayanprusty
      8 years ago

      Till now there is no way to detect without javascript.

      ReplyCancel

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 9 Comments Web Development
Share this
Related Articles