<script async src="https://www.googletagmanager.com/gtag/js?id=<key here>"></script>
<script>
const container = document.getElementById('app');
const key = container.getAttribute('secret-key');
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', key);
</script>
I am trying to access the key that I need to add Google Analytics inside the <script> tag. I was able to do it in the second block of code using
const container = document.getElementById('app');
const key = container.getAttribute('secret-key');
I want to use the same key for the first <script> clause, but I am not sure if I can do the same thing for the inline <script>? I want to use the same const key to replace the <key here>.
How can I achieve this?
EDIT
<script>
function appendGAScriptTag() {
const configKeys = JSON.parse(container.getAttribute('data-bootstrap')).common.conf;
const gaKey = configKeys['GOOGLE_ANALYTICS_KEY'];
let gaScriptTag = document.createElement('script');
gaScriptTag.type = 'text/javascript';
gaScriptTag.async = true;
gaScriptTag.src = `https://www.googletagmanager.com/gtag/js?id=${gaKey}`;
document.getElementsByTagName('head')[0].appendChild(gaScriptTag);
}
appendGAScriptTag(); // <--- calling it here
</script>
You could dynamically create the <script> tag using... more JavaScript!
function appendGAScriptTag() {
var gaScriptTag = document.createElement('script');
gaScriptTag.type = 'text/javascript';
gaScriptTag.async = true;
gaScriptTag.src = `https://www.googletagmanager.com/gtag/js?id=${document.getElementById('app').getAttribute('secret-key')}`;
document.getElementsByTagName('head')[0].appendChild(gaScriptTag);
}Call appendGAScriptTag() in your preexisting JavaScript code when you want to inject the generated element into the DOM.