Angular：动态加载 Google Analytics？

Question

我正在使用 Google Analytics Global 站点代码 (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：此处的示例

在您的情况下，我会简单地从<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);
  }