Quit-Hogging: A JavaScript plugin for AdBlock detection.

The other day, we wrote a tutorial on how to detect AdBlock with JavaScript. Today, we will go one step further and create a simple plugin called Quit-Hogging.

The idea behind the plugin is pretty simple: Fool AdBlock into blocking a JavaScript file that contains a certain variable and then check to see if that variable exists.

If the variable is undefined, you can assume that the JS file has been blocked and that AdBlock is enabled by the user.

We’ve tried to make the plugin pretty simple to use, so that even the most novice webmasters can implement it on their website. Here is a drill-down of how to use Quit-Hogging.

Blocking.

If you’re OK with blocking visitors with AdBlock enabled, you can use the following example, which will cover your content with an overlay. As you can see, we’ve set the “block” parameter to true and we’ve provided the title and content that we want to be displayed in the overlay:

<h1>Greetings!</h1>
<p>
    This content will be blocked by an overlay if AdBlock is enabled.
</p>

<!--the plugin requires JQuery-->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!--the file that AdBlock will block-->
<script src="js/ads.js"></script>
<!--include quit-hogging.js-->
<script src="js/quit-hogging.js"></script>
<script>
    //Call QuitHogging and provide it with the relevant options.
    QuitHogging({
        block: true,
        blockTitle: 'Adblock Detected',
        blockContent: 'Please whitelist our website in order to view our content'
    });
</script>

Message.

If you want to display a message to AdBlock users, you can use the following parameters instead:

  • displayMessage: Set this to true.
  • displayMessageId: The ID of the DIV / element that you want to display the message in.
  • displayMessageContent: The message that you want to display.

Code:

<script>
    QuitHogging({
        displayMessage: true,
        displayMessageId: 'message',
        displayMessageContent: 'Please whitelist our website from AdBlock!'
    });
</script>

Be sure that a DIV / element containing the ID that you’ve supplied to “displayMessageId” actually exists. Otherwise, an error will be thrown and no message will be display. The best thing to do is to create a hidden DIV that has it’s CSS display attribute set to none:

<div id="message" style="display:none;"></div>

If the plugin detects that AdBlock is enabled, JQuery will fade it in.

Download

You will find a download link on the Github page, which can be found here. As I said: It works on a pretty simple idea and I can’t guarantee that it will work in every scenario. However, it should work against the vast majority of your visitors.