For many, it seems, one of the most important justifications for server-side Google Tag Manager<\/a> is its resilience to ad and content blockers<\/strong>. After all, by virtue of serving the container JavaScript from your own domain<\/em>, you escape many of the heuristic devices today\u2019s blocker technologies employ.<\/p>\n Well, I\u2019ve gone on record over and over again to say how this is poor justification<\/strong> for using server-side GTM. By circumventing the user\u2019s wish<\/em> to block scripts, you are disrespecting them and forcing their browser to download scripts that they wanted to avoid downloading in the first place.<\/p>\n However, this is not another article lamenting this disconnect between data-hungry analysts and their unsuspecting site visitors.<\/p>\n Instead, I want to take the technology that allows you to circumvent<\/strong> and instead use it to detect<\/strong>.<\/p>\n While ad and content blockers should be allowed to run their course, I do think it\u2019s absolutely vital that their impact be measured. That way you can calculate just how many of your analytics and ad requests are blocked due to these tools.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n You can even use the detection technology to conditionally block your server-side tags! That way you can truly act according to the user\u2019s wishes and<\/em> keep those data streams between the browser and the server container alive.<\/p>\n By the way, if you\u2019re interested in knowing more about ad and content blockers in general, I recommend you listen to this Technical Marketing Handbook podcast episode<\/a>, where I interviewed Pete Snyder<\/strong> of Brave about this very topic.<\/p>\n<\/blockquote>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n Let\u2019s start with a major caveat (first of many):<\/p>\n This is a proof of concept<\/strong>. What I\u2019m showing you here are some of the components you need to create the detection system, but most of the work needs to be done client-side (where the detection happens), so you need to adjust these ideas to make sense for what your<\/strong> site runs on.<\/p>\n<\/blockquote>\n In this article, I\u2019ll show you how I\u2019m measuring three different things:<\/p>\n There are additional caveats related to each of these measurements, but I\u2019ll tackle those when they come up.<\/p>\n Note that to understand everything that\u2019s happening here, you need a fairly good grasp of server-side tagging<\/strong>. If you haven\u2019t set it up yet, I recommend you take a look at my article on the topic<\/a>.<\/p>\n I\u2019m using a custom Client template<\/a> in the Server container to pick up requests for the ad blocker bait file<\/em> as well as for the pixel that is used to generate an event data object<\/a>.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n The bait file contains instructions for the browser to generate an element with the ID Most of the magic needs to be done client-side.<\/p>\n In the page template of my site, I\u2019m running the following script in the page HTML. Yes, you need to do this outside Google Tag Manager, because if GTM is blocked then you won\u2019t be able to measure the impact due to the client-side script being blocked, too.<\/p>\n I only want to run this script on the home page, and because I\u2019m so lazy at editing my templates, I simply exit the function if the current page path isn\u2019t the root of the site.<\/p>\n For In the following chapters, I\u2019ll tell you how I\u2019m measuring ad blocker use, Google Analytics blocking, and Google Tag Manager blocking.<\/p>\n To measure the impact of ad blockers<\/strong>, I\u2019m using an age-old heuristic system to detect if the browser is blocking ads.<\/p>\n The browser sends a request to the Server container, where the Client template<\/a> picks it up. The request needs to be for a file that is most commonly blocked by ad blockers, such as ads-min.js<\/strong>.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n The purpose of the file is to create a dummy HTML element on the page with a specific ID ( Caveat<\/strong>: We don\u2019t know why the download failed. It could be due to an ad blocker, but it could also be due to a network error or something else. So there\u2019s always some uncertainty in this regard.<\/p>\n<\/blockquote>\n Note also that filter lists such as Disconnect.me<\/a>, used in e.g. Mozilla Firefox and Microsoft Edge, pattern match against the domain name, which makes detecting them with a custom solution very difficult to do.<\/p>\n To measure whether Google Analytics is blocked or not, I\u2019m using a very simple method. I run a The request is sent with the HEAD method to prevent exerting browser resources, and it\u2019s sent with the Here\u2019s what the request looks like:<\/p>\n Caveat<\/strong>: Again, we don\u2019t know if it\u2019s a blocker that prevents GA from loading. Also, in e.g. Firefox, even in Private Windows, Google Analytics is allowed to load, but its main methods are shimmed<\/strong> to prevent it from working. This particular approach would not be able to detect that type of blocking.<\/p>\n<\/blockquote>\n For GTM, we\u2019re taking an even<\/em> simpler approach. At window loaded time, we\u2019ll check if the Caveat<\/strong>: All the aforementioned caveats apply, again. And it\u2019s important to remember that on e.g. Firefox, the global Once you have your Booleans for whether or not these three vectors are being blocked, it\u2019s time to put everything together.<\/p>\n The pixel request waits for the window to completely load and<\/strong> for the Google Analytics In the The Caveat<\/strong>: This means that we\u2019re not measuring users<\/strong> who use blockers but rather individual hits<\/strong> and whether they\u2019re blocked or not. I wanted to ignore users<\/strong> simply because I don\u2019t want to start setting cookies or fingerprinting just for the purpose of this exercise.<\/p>\n<\/blockquote>\n Finally, a pixel request is sent to your server container, which grabs it and creates an Event Data Object with the parameters:<\/p>\n![\"Blocker](\"https:\/\/www.simoahava.com\/images\/2021\/09\/blocker-data.jpg#ZgotmplZ\")
<\/p>\n\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\nMeasuring blocker impact<\/h2>\n
\n
\n
Custom Client template<\/h2>\n
![\"Ad](\"https:\/\/www.simoahava.com\/images\/2021\/09\/ad-blocker-client.jpg#ZgotmplZ\")
<\/p>\nGxsCRdhiJi<\/code>. This is the element you need to search for to see if the file was blocked or not.<\/p>\nClient-side script<\/h2>\n
(function<\/span>() {\n \/\/ Set these to the endpoints configured in the Client template\n<\/span> var<\/span> baitPath = 'https:\/\/sgtm.simoahava.com\/ads-min.js'<\/span>;\n var<\/span> pixelPath = 'https:\/\/sgtm.simoahava.com\/4dchk'<\/span>;\n \n \/\/ Prevent the script from running outside the home page\n<\/span> if<\/span> (document<\/span>.location.pathname !== '\/'<\/span>) return<\/span>;\n \n \/\/ Inject the bait file\n<\/span> var<\/span> el = document<\/span>.createElement('script'<\/span>);\n el.src = baitPath;\n document<\/span>.body.appendChild(el);\n \n var<\/span> gaBlocked = false<\/span>;\n \n \/\/ Run the detections at page load to avoid race conditions\n<\/span> window<\/span>.addEventListener('load'<\/span>, function<\/span>() {\n \/\/ Send a HEAD request for the Universal Analytics library to see if it's blocked\n<\/span> fetch('https:\/\/www.google-analytics.com\/analytics.js'<\/span>, {method: 'HEAD'<\/span>, mode: 'no-cors'<\/span>})\n .catch<\/span>(function<\/span>() {\n \/\/ If the load failed, assume GA was blocked\n<\/span> gaBlocked = true<\/span>;\n })\n .finally<\/span>(function<\/span>() {\n \/\/ Build the GA4 parameters, add additional parameters at your leisure\n<\/span> var<\/span> params = {\n ads_blocked: !document<\/span>.querySelector('#GxsCRdhiJi'<\/span>), \/\/ Detect if the bait file was blocked\n<\/span> gtm_blocked: !(window<\/span>.google_tag_manager && window<\/span>.google_tag_manager.dataLayer), \/\/ Detect if gtm.js was blocked\n<\/span> ga_blocked: gaBlocked \/\/ Detect if analytics.js was blocked\n<\/span> };\n \n \/\/ Build the pixel request with a unique, random Client ID\n<\/span> var<\/span> cid = Math<\/span>.floor((Math<\/span>.random() * 1000000<\/span>) + 1<\/span>) + '_'<\/span> + new<\/span> Date<\/span>().getTime();\n var<\/span> img = document<\/span>.createElement('img'<\/span>);\n img.style = 'width: 1; height: 1; display: none;'<\/span>;\n img.src = pixelPath + '?client_id='<\/span> + cid + '&'<\/span> + Object<\/span>.keys(params).reduce(function<\/span>(acc, cur) { return<\/span> acc.concat(cur + '='<\/span> + params[cur]);}, []).join('&'<\/span>);\n document<\/span>.body.appendChild(img);\n });\n });\n})();\n<\/code><\/pre>\n<\/div>\nbaitPath<\/code> and pixelPath<\/code>, configure the corresponding settings you added to the Client template. The default values are \/ads-min.js<\/code> for the bait file path, and \/4dchk<\/code> for the pixel path.<\/p>\nMeasuring ad blockers<\/h2>\n
...\nvar<\/span> baitPath = 'https:\/\/sgtm.simoahava.com\/ads-min.js'<\/span>;\nvar<\/span> el = document<\/span>.createElement('script'<\/span>);\nel.src = baitPath;\ndocument<\/span>.body.appendChild(el);\n...\n<\/code><\/pre>\n<\/div>\n![\"ads-min.js](\"https:\/\/www.simoahava.com\/images\/2021\/09\/ads-min-blocked.jpg#ZgotmplZ\")
<\/p>\nGxsCRdhiJi<\/code> if you\u2019re using the default template). If the element doesn\u2019t exist when you query it, it means that the download failed for some reason or other, one of which could be due to ad blockers.<\/p>\n\n
Measuring GA blockers<\/h2>\n
fetch()<\/code> call for the Universal Analytics JavaScript library. If that request fails, I\u2019ll chalk it up to GA being blocked.<\/p>\nno-cors<\/code> mode to avoid CORS issues.<\/p>\n...\nfetch('https:\/\/www.google-analytics.com\/analytics.js'<\/span>, {method: 'HEAD'<\/span>, mode: 'no-cors'<\/span>})\n .catch<\/span>(() => {\n \/\/ GA is blocked\n<\/span> });\n...\n<\/code><\/pre>\n<\/div>\n\n
Measuring GTM blockers<\/h2>\n
window.google_tag_manager<\/code> interface has been created and that it also has the nested object window.google_tag_manager.dataLayer<\/code>.<\/p>\n...\ngtm_blocked: !(window<\/span>.google_tag_manager && window<\/span>.google_tag_manager.dataLayer)\n...\n<\/code><\/pre>\n<\/div>\n\n
window.google_tag_manager<\/code> interface is<\/em> created, but since dataLayer.push<\/code> is shimmed, GTM itself won\u2019t work.<\/p>\n<\/blockquote>\nSending the pixel request to the Server container<\/h2>\n
window<\/span>.addEventListener('load'<\/span>, function<\/span>() {\n fetch('https:\/\/www.google-analytics.com\/analytics.js'<\/span>, {method: 'HEAD'<\/span>, mode: 'no-cors'<\/span>})\n .catch<\/span>(function<\/span>() {\n gaBlocked = true<\/span>;\n })\n .finally<\/span>(function<\/span>() {\n var<\/span> params = {\n ads_blocked: !document<\/span>.querySelector('#GxsCRdhiJi'<\/span>),\n gtm_blocked: !(window<\/span>.google_tag_manager && window<\/span>.google_tag_manager.dataLayer),\n ga_blocked: gaBlocked\n };\n var<\/span> cid = Math<\/span>.floor((Math<\/span>.random() * 1000000<\/span>) + 1<\/span>) + '_'<\/span> + new<\/span> Date<\/span>().getTime();\n var<\/span> img = document<\/span>.createElement('img'<\/span>);\n img.style = 'width: 1; height: 1; display: none;'<\/span>;\n img.src = pixelPath + '?client_id='<\/span> + cid + '&'<\/span> + Object<\/span>.keys(params).reduce(function<\/span>(acc, cur) { return<\/span> acc.concat(cur + '='<\/span> + params[cur]);}, []).join('&'<\/span>);\n document<\/span>.body.appendChild(img);\n });\n});\n<\/code><\/pre>\n<\/div>\nfetch()<\/code> request to complete. This way any possible asynchronous race conditions won\u2019t spoil the measurement.<\/p>\nparams<\/code> object, you can add any parameters you wish to end up in the event data object. If you don\u2019t<\/em> provide the page_location<\/code> parameter, you\u2019ll need to add it to the tag (see below). You can also provide a custom event_name<\/code> parameter, and the Client template will default to page_view<\/code> if you don\u2019t.<\/p>\nclient_id<\/code> is automatically generated as a unique, random value for each request.<\/p>\n\n
![\"Event](\"https:\/\/www.simoahava.com\/images\/2021\/09\/event-data-object.jpg#ZgotmplZ\")
<\/p>\n![\"GA4](\"https:\/\/www.simoahava.com\/images\/2021\/09\/ga4-tag.jpg#ZgotmplZ\")
<\/p>\n![<\/p>\n](\"https:\/\/www.simoahava.com\/images\/2021\/09\/server-custom-trigger.jpg\"){kind=link}