How to Avoid Ad Blocker Errors
The web is full of ads, and many users install ad blocker extensions to deal with them. But ad blocker extensions can break websites in strange and unintended ways, which often show up as errors in TrackJS.
Ad blocker-related errors are common across our customers. So after debugging a few ad blocker-related issues myself recently, I thought I’d share 3 Tips to Avoid Ad Blocker Errors.
Is that click-bait-y enough?
Tip #1: Don’t Expect Analytics to Work
Analytics and social network scripts are often blocked by ad blocker extensions. Things like Google Analytics, Facebook Pixel, Mixpanel, and Twitter Widget all get caught up and removed by ad blockers.
For example, when an ad blocker blocks Google Analytics, ga simply won’t exist. If you try to call out to ga from your custom JavaScript click handler, it will break with:
Uncaught ReferenceError: ga is not defined
The error stops the execution, and your click handler fails to complete. The ad blocker has unintentionally broken your page.
I may have stumbled over this very issue coding the first TrackJS signup form.
Every time you reference a function loaded from an external script, you should safety-check that it exists. You can do this with some short-hand JavaScript that checks the “truthiness” of the variable:
window.ga && ga("event", "funnel", "sign_up")
This simple check guards against external script failure, whether it be an ad blocker, network failure, or third-party changes.
Tip #2: Avoid Advertising-Related Words
Ad blockers don’t actually know what an “ad” is. They just try to match the HTML and network requests against a list of patterns. Avoiding these patterns in your code will help you steer clear of issues with ad blockers.
When your image, classname, or URL contain one of the patterns, it will get blocked as though it was an ad. And this is broader than just avoiding the word “ad”, here are some example patterns that often get blocked:
-
/images/myImage-900x300.jpgImages that contain common advertisement dimensions in the filename. -
/api/trackURLs that containtrack,pixel, oradas a segment. This one catches TrackJS stuff a lot. -
<div class="sponsor align-right">Using keywords likesponsororadin an element class name.
Naming things is hard. Avoiding some of these common patterns will save you heartache later.
Tip #3: Run An Ad Blocker Locally
Regardless of the precautions you take, ad blockers can still cause subtle issues on your website. According to a survey, over 25% of internet users use an ad blocker, so it’s really important to understand what their experience will be on your site.
The best way to know is to run an ad blocker yourself to test your page. I personally recommend uBlock Origin on Chrome and Firefox. I have mine configured with the default “EasyList” filter list, which is the most commonly used.
If you really want to be daring and discover new and terrible ways your site will break, turn on “Fanboy’s Enhanced Tracking List”. This is an aggressive list that blocks anything that even looks like it might remember you. Don’t worry if your site breaks though, most of the web is broken with this list enabled.
If you’ve never looked at your site with an ad blocker before, you probably have a bug or two you need to sort out. Front-end error monitoring can help expose issues too, as your ad blocker may behave slightly different than your user’s ad blocker. Understanding real-user behavior will show you where the user-impacting bugs are.
