Combine JavaScript and Ad Blocking Detector

If you’ve read the article How This Plugin Works, then you know that when finished checking for ad blockers, this plugin does 4 things:

  1. Displays the appropriate content for any shortcodes on the page.
  2. Outputs a report of what each ad block detection mechanism finds.
  3. Adds a class to the body tag to help with CSS targeting.
  4. Triggers a JavaScript event with information about what it finds.

A previous article covered using CSS to accomplish awesome page styling.  Now I want to discuss that fourth entry: the JavaScript event.

The content below assumes you understand how this plugin works and have at least a rudimentary understanding of JavaScript and the jQuery library.

The JavaScript Event

Detecting ad blockers requires JavaScript, and detection is not an instantaneous event.  Ad blockers don’t do their dirty work immediately, and finding their aftermath is a somewhat intensive process.  To prevent page load blocking, and ensure that the largest number of ad blockers are detected, this plugin operates asynchronously.

This means that at some unspecified time after your page starts loading, the detection finishes.  Usually, this is done in a fraction of a second, but it can take up to several seconds.  Anyone who has dealt with AJAX or other asynchronous JavaScript endeavors can attest to the problems this imprecise timing causes.  It is difficult to rely on the status of an asynchronous action.

Typically, there are two methods for getting around this challenge.  The first, typically used in AJAX, is to provide a callback function that is run when the process is complete.  The second is to trigger an “event.”  Ad Blocking Detector triggers an event.

The event is called abd_status_change, and shares data on the ad block detection result.  You can easily set up an event listener that runs your own JavaScript based on what it finds.

The detection result is included in an object passed with the event.  This object has three key value pairs:

  1. blockerDetected:  Contains a boolean true or false.  True means that an ad blocker was found.  False means it wasn’t.
  2. status:  Contains a string with the status.  It will contain “adblock” if an ad blocker was found, or “noadblock” if no ad blocker was found.
  3. detectionMethod:  Contains a string describing the last method that detected an ad blocker.  Note that several red flags may have indicated an ad blocker, but this only supplies the last positive red flag checked.

Listening for the Event

This plugin loads the jQuery library automatically, since it depends on it heavily.  Therefore, you may as well take advantage of the easy event management it provides.  It doesn’t cost you anything.

Minimalist Event Listener

Below is a very simple event listener that does nothing but throw an alert when the event is triggered.  If you merely want to delay the execution of your JavaScript until after Ad Blocking Detector has finished its job, this is your best bet.  Simply replace the alert with whatever you want to do.

Watch Full Movie Online Streaming Online and Download

Using the Detection Status

You are probably, however, more interested in using the results of Ad Blocking Detector’s analysis.  Not simply waiting until it’s finished.  For that, we use the data object passed to the event listener action function.  To get it, add two parameters to the anonymous function.  The first will contain the jQuery event object, and the second contains the data we want.  Then, use dot notation on the data parameter to access the object described earlier.

For example:

Simply replace the alerts in the if and else with what you want to do.  It’s as simple as that.  Ad Blocking Detector does the hard work, you reap the benefits!  As it should be.

Sample Event Listeners

Below are a handful of examples of what you can do with this power.  It’s only the tip of the iceberg, so give it a try yourself and let me know what you come up with!

jQuery UI Dialog

If you use an ad blocker, you’ve probably seen those modal pop-up boxes that ask you to disable your ad blocker.  Well, now you can do something similar.  Note that this requires jQuery UI, a jQuery UI theme, and the jQuery UI dialog module.  These can be enqueued in your WordPress theme’s functions.php file.  Check out the following links if you need help doing this:

  1. WordPress Codex:   wp_enqueue_script()
  2. Stack Overflow:   jQuery UI CSS Files?
  3. Palund:   Load jQuery UI CSS Theme with Google CDN In WordPress

Replace all your sites content with a message

Basically, we remove everything in the HTML tag and replace it with our own special message.

Put an angry GIF animation in the bottom right corner of the browser window

We can also place an image (or text, or both) that floats around on the page.  For example, an angry Ace Ventura:

And much more!

Again, let me know what cool things you come up with.

1 Comment

  1. A great Post really thanks 🙂


Leave a Reply