If you are a website owner you most likely have advertising of some type to help you pay the bills for the site. If your site is really popular you most likely use with money for your financial “bread and butter” that supplements your income and keeps things running smoothly. Most site owners see this as compensation for their hard work and dedication to the site.
However, most people that browse the web dislike ads for a variety of reasons. They are normally bright and flashy to catch the attention of the browser, they detract from the style of the page or often get in the way. They are tired of being blasted with ads and commercials everywhere they go. Instead of having to deal with all of this, it has become easy for these people to block or hide the ads they do not want to see through simple, easy to install plug-ins called Ad Blockers.
The way Ad Blockers work is simple. Once the add-on or plug-in is installed, it identifies the advertising on the page and removes or hides it from view based on a list of ad provider networks and common advertisement names. Using these add-ons is a great solution for the user but not for the site owner who is relying on the page views and clicks from those ads to keep the site afloat. Now that more and more users have these add-ons installed, it is becoming harder to maintain and run a website that relies to ads to support it.
To help site owners out, this tutorial will show you how to detect if a visitor has an Ad Block plug-in installed.
How to Detect an Ad Blocker
Using a simple Bait Test we will using the Ad Blocker itself to tell us whether one is active. Since these plug-ins usually look for files that are used to display the ads and then prevent them from loading, we will set up a bait file that will trigger the Ad Blocker and then check whether or not the file has been loaded.
Step 1: We will create a new property on the Global jQuery object that we can later check. Create a file named _advertisement.js with this code:
jQuery.adblocker = false;
Only this one line is necessary in this JavaScript file. Later, when we check this global property, if it is undefined we will know that the file was blocked from loading by an Ad Blocker.
Checking the Global Property
To find out if your visitor has an Ad Blocker installed and active, we can check the $.adblocker variable that we created. Create the file "check.js" with the following code that will check for the variable and let us know if an Ad Blocker is running:
$(function () {
//check if the adblocker variable is undefined
if ($.adblocker == undefined) {
//it is undefined so an adblocker is present
$.adblocker = true;
//pop up the alert
alert("No Ad Blockers Allowed!");
}
});
With this simple check we can easily tell if the variable is still "undefined" and let the user know that having an Ad Blocker enabled is not allowed on your site.
Ideas For Use
Here are some ways you can use this handy trick on your site:
- Track how many of your site’s visitors have Ad Blockers enabled. These metrics can help you identify how many of your visitors think blocking ads is important.
- Determine which advertisements are being blocked and replace them with other types of ads
- Replace advertisements with other types of content that will not be blocked
- Take the Wikipedia approach and inform your visitors how Ad Blockers harm your site
Of course there are some not-so-nice ways you can use this script as well, but remember that your site visitors are ultimately customers and you do not want to be rude or alienate them. The pop up message that “Ad Blockers are not allowed” is not very nice but works for an easy example. Obviously, the purpose of this script isn’t to block users from using your site that have Ad Blockers installed because a simple Script Blocker would remove this entirely. The point here should be to find out the data and metrics on your users to provide a better user experience.
Ultimately, if you are providing useful content to your site visitors and using non-intrusive ads that come from reputable sources, your visitors shouldn’t be too offended by your methods. Hopefully with some user education or by polling your users you can begin to bring in more ad revenues for your site without alienating your users. Finding a common ground may not be easy but this is a good step in the right direction.
Article Source Files
| Description | Name | Size | Download method |
|---|---|---|---|
| Detecting AdBlockers with jQuery Source Code | detect-adblock-jquery-source.zip | 1KB | HTTP |
That won’t work for a long time, nor for many sites. Most ad blocking relies on domain names. You’d better propose some proxy system.