通过 JavaScript 动态注入 Google 分析代码

Question

我正在尝试将 Google 分析代码动态注入我的 dom。我的代码看起来像这样

 (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');

我可以看到 https://www.googletagmanager.com/gtag/js?id=UA-1234567-6 已添加到我的 DOM。但是它下面的代码（以 window.dataLayer 开头）没有被执行。我该如何解决这个问题？

Answer 1

尝试使用 onload 事件

(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]);

})();

通过 JavaScript 动态注入 Google 分析代码

Dynamically injecting Google analytics code via JavaScript

javascript

google-analytics