When it comes to advertising on websites, we are our own worst enemies. More and more users are turning to browser extensions like AdBlock to hide banner ads because developers and website owners are placing more ads on their pages than content. The industry did this to itself, and I have no pity for it. That being said, we can detect when a user is blocking our banner ads to show alternate content like a donate button or other image.
Detecting AdBlock and other similar browser extensions is relatively easy to do. Simply wait for the window to finish loading, and check the rendered height of a named container that is wrapped around your ad. In the example below, I have wrapped my ad in a div with a class of “extra_resources”. Important: Don’t name your class/id of the containing element with anything “ad” related because it can be blocked too!
HTML
Once you have created the markup, you’ll need to use JavaScript to make the detection. In this example, I’m using jQuery. In the example below, you’ll see that after I’ve removed the “hidden” class from the “blockdetection” element (which is the donate image in this case) I am logging an event in Google Analytics. I highly recommend logging these events to see how many of your users are blocking ads. I’d even recommend taking it a step further and creating a custom dimension for users who block ads to see how they interact with your website differently than visitors who are seeing the ads.
HTML
And that’s all you need! If you want to get really clever, do what OkCupid is doing and generate a random ID for the donate graphic container so that users can not simply select your donate container and manually hide that too. Here’s one idea of how to pull it off: instead of simply removing a hidden class on it, you could make an AJAX call and pull in the new content with a random ID. Here’s another tip: inside of that random ID container, don’t use any IDs or classes at all!
Your goal as a website owner is to be unobtrusive with your ads. Best case scenario is you end up on AdBlock’s “Acceptable Ads” list. Instead of bogging down your site with a ton of banner ads, you should be focused on getting return visitors. Banner Ads do nothing but increase your load time and bounce rate! If your content is good enough, the revenue will follow.
