Pass gtm id dynamically to gtm script in head section - reactjs

Question

I have integrated google tag manager in my react js application but the problem is I have to pass the gtm id present in gtm script dynamically and turn on and off datalyer dynamically depending upon the response of the value coming from API.
I have created a component LoadAppKeys which receives a value on which I decide whether gtm is enabled or not. But how do I pass the gtm id dynamically to the script present in head section of index.html and append the script in head if value is 1 and not if its 0.
class LoadAppKeys extends React.PureComponent {
componentDidMount() {
this.props.getStorefrontConfigs();
}
componentWillReceiveProps(nextProps) {
if (!nextProps.loading) {
const gtm = getGTM(nextProps.storefrontConfig);
if (R.equals(gtm.gtm_enabled, 1)) {
var script = document.createElement('script');
script.type = "text/javascript";
script.text = myGTM(window, document, 'script', 'dataLayer', "GTM-KQZGSBW");
document.head.appendChild(script);
}
}
}
-------------------------------------
function myGTM(w, d, s, l, i) {
(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_id);
}
Want to load the script everytime the page based upon the value in loadAppKeys component.

Answer 1

You can directly call myGTM, instead of doing the whole script insertion. Otherwise if you want to do the insertion all you need is determine the src attribute, example:
script src = 'https://www.googletagmanager.com/gtm.js?id='+id
In there you don't mention how you get the id, but basically change id with your variable.