The use of Adblockers is a contentious issue, pitting users against web publishers that rely on ad revenue to fund and run their sites. As part of the later group, whatever your tolerance level of Ad Blockers are, it’s important to at least have an idea of how wide spread Ad Blockers are being used by visitors to your site, so you can make a more informed decision whether it’s an issue worth addressing.
Detecting Ad Blockers
One method to detect Ad Blockers (at least the mainstream ones), devised by Christian Heilmann, is to temporarily inject a DIV onto the page with a certain CSS class that misleads the Ad Blocker into thinking it’s a container for an advertisement:
var test = document.createElement('div');
test.innerHTML = ' ';
test.className = 'adsbox';
document.body.appendChild(test);
window.setTimeout(function() {
if (test.offsetHeight === 0) {
document.body.classList.add('adblock');
}
test.remove();
}, 400);
The CSS class “adsbox” triggers the false alarm in most Ad Blockers, with the plugin then attempting to hide it on the page. Testing the DIV’s height to see if it’s collapsed (test.offsetHeight === 0) tells us whether an Ad Blocker is in use. Note that the test for the DIV”s height is done after a delay of 400 milliseconds, to give Adblockers ample time to try and hide it first on the page.
This technique for sniffing out Ad Blockers forms the backbone of the script AdBlock Checker and Notifier, which detects and displays an overlay to urge users to disable Adblock:
Logging Adblock views to Google Analytics
Data is often a critical component in making an informed decision, and with Ad Blockers, a key data to unearth is just how many visitors are actually using an Ad Blocker on your site. From there you can deduce how much revenue you’re losing, and the level of response to take.
If you use Google Analytics (and who doesn’t), you have the means to track all types of custom actions on your site and have it logged to GA for easy reporting. Called Event Tracking, we can call a specific Google Analytics function whenever Adblock is detected to record it in Google Analytics, allowing us to see how many pageviews and unique visits are Ad-less. The GA function we’ll be calling is:
ga('send', 'event', 'Ad Setting', 'Adblock', 'Enabled');with a quick explanation of the parameters used:
'send': Always set to this value.'event': Always set to this value.'Ad Setting': Arbitrary value defining the category of this event for your own reference.'Adblock': Arbitrary value defining the specific action that triggered this event for your own reference.'Enabled': Arbitrary value defining the label of this event for your own reference.
Note that the ga() function is only compatible with the more recent Universal Analytics code; look for “analytics.js” in your page’s source to confirm you’re using this version of GA. If you’re still stuck in the 1990s and are using Google Classic Analytics, the function to call would instead be:
_gaq.push(['_trackEvent', 'Ad Setting', ‘Adblock', 'Enabled');Integrating this into our original Adblock Detection code, the result looks like this:
var test = document.createElement('div');
test.innerHTML = ' ';
test.className = 'adsbox';
document.body.appendChild(test);
window.setTimeout(function() {
if (test.offsetHeight === 0) {
document.body.classList.add('adblock');
ga('send', 'event', 'Ad Setting', 'Adblock', 'Enabled');
}
test.remove();
}, 400);
Setting Up Custom Events Viewing in Google Analytics
Now that we’re logging Adblock usage into GA, we should set up the appropriate Events View in Google Analytics to see this data. Log into Google Analytics, click on the “Admin” tab near the top, then under the “View” column, click on “Goals” to set up a goal:
On the “Goals” page, click on the red “New Goal” button to create a New Goal. Fill out the “Name” field with the name of your Goal (ie: “Ads Blocked”), and for the “Type” field, select “Event” then click “Continue” to be presented with the following:
For the “Category“, “Action“, and “Label” fields, use the same values you’ve used earlier when calling ga() to track Adblock users. Leave the remaining settings as is, and click “Save“. Give yourself a pat on the back, you’ve just set up Reporting for Adblock usage!
Verifying Things Are Working In Google Analytics
To verify Adblock usage is being probably tallied, enable Adblocker in your browser, then visit your page containing the Adblock detection and GA recording script (reload the page for good measure). Then in a new tab, go to Google Analytics, and under “Reporting“, click on “Real Time” -> “Events“. You should see under the “Active Users” column for the “Ad Setting” Category an additional Active User:
If your page is live, you’ll most likely see more than 1 active user, signaling that other people besides yourself are currently using an Adblocker on your page.
To see historical data for the number of Adblock enabled users by day, inside “Reporting“, go to “Behavior” -> “Events” -> “Top Events“.
After a few days of running the Adblock Detection and Logging script, you’ll have a clear picture of the percentage of users on your site using some form of Adblocker, and calculate the monetary impact it’s having on you.
For those of you interested in learning more about setting up Event Tracking in Google Analytics for other actions, check out this helpful page.