Dynamically injecting Google analytics code via JavaScript

Question

I am trying to inject Google analytics code dynamically to my dom. My code looks like this

 (function () {
    const head = document.getElementsByTagName("head")[0];

    var myScript = document.createElement('script');

    myScript.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=UA-1234567-6');
    head.insertBefore(myScript, head.children[1]);

})();

window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());

gtag('config', 'UA-1234567-6');

I can see https://www.googletagmanager.com/gtag/js?id=UA-1234567-6 getting added to my DOM. But the code below it (starting with window.dataLayer) is not getting executed. How can I solve this issue?

User863 · Accepted Answer · 2020-07-15 09:29:19Z

3

Try using onload event

(function() {
  const head = document.getElementsByTagName("head")[0];

  var myScript = document.createElement('script');

  myScript.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=UA-1234567-6');

  myScript.onload = function() {
    window.dataLayer = window.dataLayer || [];

    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    
    console.log('window.dataLayer Executed', window.dataLayer)

    gtag('config', 'UA-1234567-6');
  }

  head.insertBefore(myScript, head.children[1]);

})();

answered Jul 15, 2020 at 9:29

User863

20.1k3 gold badges20 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

Dynamically injecting Google analytics code via JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related