How to remove Google Tag Manager ID using an in-house Chrome Extension?

Question

We have staff working from home all over the UK, and we need to stop their page view from being tracked on all the tracking help in Google Tag Manager. The IP block won't work due the numbers and variable IPs.

I'm looking to find a way to remove the Google Tag Manager ID or the code in full before it's fired.

I'm thinking an in-house built Chrome Extension will do this, but for the life of me I can't find out how.

I know how Extensions are built.

Also, are extensions fired after the DOM has fully loaded? if so then this option isn't workable.

Any tips, or asistance would be grateful.

Thanks

{
    "name": " GTM Blocker",
    "version": "1.0.0",
    "description": "To block all tracking data",
    "manifest_version": 3,
    "author": "John Bell",
    "action":{
        "default_popup": "index.html",
        "default_title": " GTM Blocker"
    },

"icons": { "16": "images/favicon.ico",
           "48": "images/favicon.ico",
          "128": "images/favicon.ico" }

}

I did find this plugin https://github.com/tommyrharper/gtm-disabler-chrome But it doesn't seem to work.

I added the extension and then did teh following...

<meta name="GTM-Blocker" content="enabled" />
    <!-- Google Tag Manager -->
    <script>
    const GTMBlocker = document.querySelector('meta[name="GTM-Blocker"]');
    const GTMBlockerEnabled = GTMBlocker.content === 'enabled'

    if (GTMBlockerEnabled) { // DO NOT CONNECT TO GOOGLE TAG MANAGER
        alert("It does not fire");
    }else{
        alert("It fires");
        (function(w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime(),
                event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', '<?php echo set_header_codes(TAG_MANGER_CODE); ?>');
    }
    </script>
    <!-- End Google Tag Manager -->```

Answer 1

Ok, you're likely approaching this from a wrong direction. However, I will be orderly:

1. Extensions are capable of preventing any network requests.
2. Extensions are there even before the dom ready.
3. Pretty much any adblocker will, too, block GTM. And for some adblockers, you can set exactly what to block, then ask your employees to use that.

Adblockers may be an overkill there. There are different extensions that allow overriding resources. I'm talking about... errr, well, it's called exactly that: resource override. You can easily override your GTM endpoint with a non-existent GTM, or with a different container that you want your employees to use. I would definitely do the latter. But, there's a better solution.

A better solution would be a GTM solution, of course. If you're ready to send your employees to some plugin installation, then it's likely easier to ask them to visit certain page on your site where you would set a cookie and a local storage, flagging them as employees. The cookie can be set only on that page (and on any lower env page), but you will reset the expiry date for the cookie every time a user hits any prod page of the site, to keep the cookie. Local storage is a backup here if they delete the cookie or something.

Don't forget mobile browsers don't have extensions. They still have cookies though. Very useful.

The above can be done in GTM, but also it can be done on the front-end. Now you just don't serve the GTM snippet to those who have the cookie/local storage flag. Or you do it more elegantly, in GTM. Making a blocking trigger based on that cookie. Then adding it as a blocker to every tag, or to tags you want to censor like this.

But even that is far from perfect.

A better solution would be to forcefully direct all the tracking from the employees to your lower environment GA instance. Or AA, or wherever you send your data to. Easier done that it looks: you would just have to serve your measurement id through a JS variable (or a lookup table) rather than hardcode it, and have the cookie-based condition there. You still just block all your third party pixels though. Don't want employees triggering them

Now this is better. Not perfect though.

A perfect solution would be having a separate lower environment container that would be conditionally served on all lower environments and even on prod, when a person is an employee.

Now, if you have that many employees that you feel like making an extension, then you must as well have them on VPN. Or, at least, you have an IT department who controls the machines through group policies and Active Directory. Now, through them, the IT can override client's local host files and firewalls, either blocking or rerouting certain endpoints to different endpoints. This approach will require collaboration from IT, but it will not rely on employees following your guidance and it will cover all work devices.

Sorry for all the details here, I just recently worked on a similar task, so memories are fresh. The latter solution was the best I could conjure up for a corp with over 50k employees.