Accessing a variable inside an inline <script> tag in an html file with JavaScript

Question

<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>

esqew · Accepted Answer · 2021-11-30 23:40:36Z

1

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.

answered Nov 30, 2021 at 23:40

esqew

45k28 gold badges139 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user6792790 Over a year ago

I tried to call this function in a <script> tag, but it didn't get called. How can I do it in the same HTML file?

Collectives™ on Stack Overflow

Accessing a variable inside an inline <script> tag in an html file with JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related