Angular:动态加载谷歌分析？

Question

我正在使用 Google Analytics 全局网站代码 (gtag.js)

但是，我不能直接在 index.html 中插入标签因为 trackingID 是通过网络动态加载的，所以我需要在加载 Google Analytics 之前等待获取 trackingID。

为此，我创建了一个服务。

@Injectable()
export class HelpersService {

  constructor() {}

  static loadGoogleAnalytics(trackingID: string): void {
    document.write('' +
      '<script async src=\'https://www.googletagmanager.com/gtag/js?id=' + trackingID + '\'></script>\n' +
      '  <script>\n' +
      '    window.dataLayer = window.dataLayer || [];\n' +
      '\n' +
      '    function gtag() {\n' +
      '      dataLayer.push(arguments)\n' +
      '    };\n' +
      '    gtag(\'js\', new Date());\n' +
      '\n' +
      '    gtag(\'config\', \'' + trackingID + '\');\n' +
      '  </script>');
  }
}

然后，一旦我在我的根组件中设置了我的 GA 跟踪 ID，我就会调用这个方法:

HelpersService.loadGoogleAnalytics(myGATrackingID);

问题

GA 已加载并正常工作(我可以看到在 GA 仪表板中检测到我的用户)。
但是我的 Angular 项目根本没有加载，我有一个空白页面，无限加载，检查 HTML 只显示 GA 代码，而不是我的 Angular 项目。

任何的想法？

Answer 1

在 HTML 文档完全加载后使用 document.write() 将删除所有现有的 HTML:example here

在您的情况下，我将简单地从 <script> 中提取函数标记作为定义，或者如果您在应用程序启动后严格需要加载它，请将其提取到延迟加载的 Angular 模块中。

编辑 ->
这是一个代码示例:

  static loadGoogleAnalytics(trackingID: string): void {

    let gaScript = document.createElement('script');
    gaScript.setAttribute('async', 'true');
    gaScript.setAttribute('src', `https://www.googletagmanager.com/gtag/js?id=${ trackingID }`);

    let gaScript2 = document.createElement('script');
    gaScript2.innerText = `window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag(\'js\', new Date());gtag(\'config\', \'${ trackingID }\');`;

    document.documentElement.firstChild.appendChild(gaScript);
    document.documentElement.firstChild.appendChild(gaScript2);
  }