How-to: Detect ad-blockers on your site
This is a quick and easy tutorial on how to detect if someone is using an ad blocker on your site (eg. Adblock Plus), and display them a message to nag them not to. Please do not use this tutorial to block access to your site entirely or display annoying alerts for those that do.
Demo:
Without an ad-blocker, an advert is displayed. With an ad-blocker, an alternative message is displayed.
http://www.habbopfm.com/
Step 1:
Make a file named "adverts.js" on the root directory of your site (eg. www.yoursite.com/adverts.js) with the following code:
Step 2:
Add the following code just after your <body> tag:
Code:
<script>loa=false;</script><script src="/adverts.js"></script>
Step 3:
The final step is displaying the message - add the code below where your ads would be (you can change the style and text of the message):
Code:
<script>if(!loa)document.write("<div style='text-align:center;color:red;font-size:20px;font-weight:bold;background:#000;padding:10px;'>Our site is funded entirely by our sponsers.<br />Please do not block adverts on this page.</div>");</script>
How it works
This method of detection works by beating the ad-blocker at its own game - the blocker won't load anything it believes to be an advert, in this case "adverts.js", which simply sets a variable when it is loaded. If the variable isn't set, the file must have been blocked, and the message is displayed.
Limitations
This method can be circumvented by white-listing the "adverts.js" file. To prevent this, you could use several files with varying names.
