Dynamically loading Google Tag Manager environments in a single page application

Question

We have a single page React.js/Webpack app and want to set up an environment for QA. The tag manager documentation says to paste the snippet in the head of the html of each page. It's a SPA, so there is only 1 index.html and it is currently using the default snippet. Is there a way to dynamically load different environments; for example: if website.com use default or if website.uat.com use other qa snippet?

Answer 1

Yes this is possible. You should be able to do something like this.

if(window.location.hostname == "the-qa-url.com"){
   // Load Tag Manager Snippet for QA
}
if(window.location.hostname == "the-prod-url.com"){
   // Load Tag Manager Snippet for PROD
}

Also I believe tag manager has a way to do filtering on the URL from within tag manager so you can filter out QA traffic.