append and execute script to HTML

Question

I'm working with a service provider who holds data externally and provides the snippets below to populate my page with that data. Based on the IDs in the first script, the second script will populate data in the div.

Unfortunately my CMS does not allow external HTML or JS. I'm trying to execute this via Google Tag Manager. Based on other posts on here, I assume I need to execute the scripts and then append the div to the page as new elements. But I'm stumped on how to actually execute it, especially from within GTM.

<script type="text/javascript">
        window.ex_event_id = 1234;
        window.ex_category_id = 6789;
</script>
<script type="text/javascript" src="https://register.example.com/js/embed/people_index.js"></script>
<div id="gt_content"></div>

Thanks in advance for any advice!

Answer 1

I figured it out. See below if curious. This is all done in one tag with document.write enabled. There might be more efficient ways of doing this (please let me know if there is,) and I've still got some QA to do. but it seems to work.

<script>
    //relabel an existing ID to house the content. Alternatively you could append a div if preferred. 
    //For some reason it wouldn't work if the scripts were added first, 
    //so it's important that the div is made available before appending the scripts.
    document.getElementById("destination").id = "gt_content";

    //append a new script for the IDs
    var s = document.createElement("script");
    s.innerHTML = "window.ex_event_id = 1234;window.ex_category_id = 6789;";
    document.body.appendChild(s);

    //append a new script for the URL
    var s = document.createElement("script");
    s.src = "https://register.growtix.com/js/embed/people_index.js";
    document.body.appendChild(s);
</script>