How to detect adblock using javascript

Some recent estimates suggest that as many as a fifth of Internet users now have ad blocker extensions in their browsers. This has obvious implications on free content funded by advertising, but has also been known to break non-advertising site content.

In a recent project I had a site where none of the videos would play at all if ad blockers were installed. Why? Because the videos had pre-roll introductions... If you find yourself in a similiar predicament, you might find the following javascript useful for alerting your users that they need to whitelist your site if they want to view it properly.

How ad blockers works

So before we get to the javascript, it's helpful to know how these ad blockers are stripping content out of your page. 

Ad blockers generally work in two ways - hiding and blocking. Blocking consists of denying http requests to known advertising domains to prevent scripts, iframes and flash from running. Hiding involves checking the source code of pages to find elements that are potential adverts and then hiding them by overriding the css. Commonly, elements will be set to 'display:none' and the height set to zero to stop it from being visible to the user. 

This second method is useful for us to detect if an adblocker is present...

Ad blocker detection plugin

The following code will insert a temporary 'dummy' advert container that ad blocking software will detect as an advert and attempt to surpress. On page load we check if software has attempted to hide our dummy advert, and if it has, present a message to the visitor.

$( document ).ready( function()
{
    $(document.body).append('<a id="advert-tracker"><img src="http://www.advert.com/advert"></a>');

    setTimeout(function()
    {
        if( $( "#advert-tracker" ).height() == 0)
        {
            
            $("body").append("<div id='advert-notice'><h1>Ad Blocker Detected</h1>An adblocker is preventing this page from loading correctly, please disable it for this site and click refresh.</div>");

            $("#advert-notice")
                .css(
                {
                    'opacity' : 0.9,
                    'position' : 'absolute',
                    'background-color' : '#222222',
                    'width' : '100%',
                    'top' : 0,
                    'left' : 0,
                    'height' : $(document).height(),
                    'color' : '#ffffff',
                    'text-align' : 'center',
                    'padding-top' : '50px',
                    'font-family' : 'arial'
                }
            );

            $("#advert-notice").zIndex(9999);
        }

        $('#advert-tracker').remove();
    }, 500);
});

The check is delayed by half a second (500) to ensure the adblocker has run. Once the plugin has checked and alerted the user (if it needs to), the dummy container is then removed as a clean up process.

Note you could easily update the code to redirect the user to an adblock page rather than show a message, or update the message method or content if you wanted to make it less intrusive. To make the notice closable for example, you could add the following code inside the timeout:

$('#advert-notice').on('click', function()
{
    $('#advert-notice').fadeOut('slow'); 
}); 

A word of caution...

For sites that flat out won't work properly with an ad blocker enabled, scripts like these are very useful, but think twice before using it on sites just to get visitors to view your adverts. While ad blockers can be very damaging to providing ongoing 'free' content on the web, remember your visitors have chosen to install this plugin because they don't want to view ads, and strong-arming them into making exceptions is likely to result in no visitor at all. 

Limitations

This javascript plugin has been tested with the most popular ad blocking software 'Adblock', feel free to test this with other browsers and software and make or suggest code modifications. 

Try it out

The script provided in this article has been included on this page, so if you want to give it a test simply install ad block and refresh the page to see how it works.... then whitelist this site... 

comments powered by Disqus
Sign Up

Popular Tags

350x250

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.