I'm building a portal in Angular that has different white labels. As a result, I need each white label to have their own Google Tag Manager code. I've added the static code to the index.html page in the head and the body and that works for one brand, but that also means that the one brand is applied to all brands.
I need a way to make the GTM tag variable (I get this from an API - so a http get call). As the index.html is a static page, how can make this tag variable and still have it in the head and body?
Head code is:
<!-- Google Tag Manager -->
<script>(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','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
And body code is:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->