Have you ever wanted to know exactly how many people visiting your WordPress website are blocking your ads? If so, you’re in luck. This guide will show you how to tag new sessions from visitors using AdBlockers with a Google Analytics custom event. Then show you how to segment users with AdBlockers via an advanced segment in Google Analytics.
How To Track AdBlock Users in Google Analytics without Google Tag Manager
Add the following code right after your Google Analytics tracking code in the body of your theme’s “header.php” file:
<?php session_start();
if(empty($_SESSION['exists'])){
echo "<script>
var adBlockEnabled = false;
var testAd = documentcreateElement('div');
testAd.innerHTML = ' ';
testAd.className = 'adsbox';
document.body.appendChild(testAd);
window.setTimeout(function() {
if (testAd.offsetHeight === 0) {
ga('send', {
hitType: 'event',
eventCategory: 'adBlocker',
eventAction: 'detected'
});
}
testAd.remove();
}, 100);
</script>";
}
$_SESSION['exists'] = true; ?>If you encounter any errors related to sessions with the above code, use the following code instead:
<script>
var adBlockEnabled = false;
var testAd = document.createElement('div');
testAd.innerHTML = ' ';
testAd.className = 'adsbox';
document.body.appendChild(testAd);
window.setTimeout(function() {
if (testAd.offsetHeight === 0) {
ga('send', {
hitType: 'event',
eventCategory: 'adBlocker',
eventAction: 'detected'
});
}
testAd.remove();
}, 100);
</script>Install and enable the following AdBlocker advanced segments in Google Analytics:
View the results in Google Analytics to see how many of your website visitors block your ads as well as how they use your website differently than visitors who don’t.
How To Track AdBlock Users in Google Analytics with Google Tag Manager
Add the following code right after your Google Tag Manager container code in the body of your theme’s “header.php” file:
<?php session_start();
if(empty($_SESSION['exists'])){
echo "<script>
var adBlockEnabled = false;
var testAd = document.createElement('div');
testAd.innerHTML = ' ';
testAd.className = 'adsbox';
document.body.appendChild(testAd);
window.setTimeout(function() {
if (testAd.offsetHeight === 0) {
dataLayer.push({'event': 'adBlockerDetected'});
}
testAd.remove();
}, 100);
</script>";
}
$_SESSION['exists'] = true; ?>If you encounter any errors related to sessions with the above code, use the following code instead:
<script>
var adBlockEnabled = false;
var testAd = document.createElement('div');
testAd.innerHTML = ' ';
testAd.className = 'adsbox';
document.body.appendChild(testAd);
window.setTimeout(function() {
if (testAd.offsetHeight === 0) {
dataLayer.push({'event': 'adBlockerDetected'});
}
testAd.remove();
}, 100);
</script>In your site’s Google Tag Manager container create a new Universal Analytics tag called “adBlocker Detected” with the following settings:
- Tracking ID: [insert your Google Analytics ID here]
- Track Type: Event
- Category: adBlocker
- Action: detected
- Non-Interaction Hit: True
Then add a new trigger for this tag called “adBlocker Detected” with the following settings:
- Trigger type: Custom Event
- Event name: adBlockerDetected
- This trigger fires on: All Custom Events
Publish your updated Google Tag Manager container
Install and enable the following AdBlocker advanced segments in Google Analytics:
View the results in Google Analytics to see how many of your website visitors block your ads as well as how they use your website differently than visitors who don’t.
Thanks to Christian Heilmann for writing the JavaScript code for detecting AdBlock used in this guide.
