javascript - Ladda Google Tag Manager dynamiskt och byt i SPA

Marknadsavdelningen vill separera Google Tag Manager per land. För en vanlig webbplats, inte SPA, kan vi enkelt göra detta baserat på URL:en. Skulle klienten byta till en annan URL, då skulle sidan uppdateras, landskoden läggas till i URL:en och rätt GTM kan laddas.

Nu för en SPA (i Angular, Typescript) är detta lite svårare. För närvarande har vi ingen språk-/landsparameter i denna applikation, men det kan ändå ändras genom hela webbapplikationen. Självklart skulle sidan inte uppdateras.

Jag försöker hitta ett sätt att dynamiskt ladda och avlasta GTM-skriptet.

Jag kan framgångsrikt ladda och avlasta ett <script>-element i <head>, men tagghanteraren lägger till fler element.

public loadScriptSimple(country : string) {
    //first remove existing node
    var existing = document.getElementById("tagmanager");
    if (existing && existing.parentNode) {
        existing.parentNode.removeChild(existing);
    }
    //
    console.log('adding node to head...');
    let node = document.createElement('script');
    if (country === "NL") {
        node.textContent =
            "(function (w, d, s, l, i) {w[l] = w[l] ....(window, document, 'script', 'dataLayer', 'GTM-XXX');";
    } else {//todo for later loading others
        node.textContent =
            "(function (w, d, s, l, i) {w[l] = w[l] ....(window, document, 'script', 'dataLayer', 'GTM-YYY');";
    }

    node.type = 'text/javascript';
    node.async = true;
    node.charset = 'utf-8';
    node.setAttribute("id", "tagmanager");
    document.getElementsByTagName('head')[0].appendChild(node);
    console.log('loaded script');
}

Källa: https://stackoverflow.com/a/38473334/2901207

Så det skulle vara möjligt att ladda det vid första förfrågan (t.ex. första gången landet bestäms baserat på IP), men efter att ha ändrat landet skulle två taggar laddas.

Finns det något enkelt sätt att ta bort de befintliga elementen och sedan skapa de nya som ovan?