使用 Angular universal 加载 Google Analytics 代码的正确方法是什么？

Question

我正在为我的 Angular 应用程序设置服务器端渲染。我按照 article 中的步骤和运行命令启动应用程序。我收到由 window 或 document 等浏览器特定对象引起的 document is not defined。我发现错误是由于 index.html 中的 Google Analytics 站点标记引起的。评论分析代码有应用运行确认它是问题的根源。

 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

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

    gtag('config', 'UA-XXXX');

  </script>
  <!--Google global site tag-->

我发现解决这个问题的方法之一是将代码包装在 isPlatformBrowser if 块周围。如何在 for index.html 中实现？什么是合适的解决方案？

注意：这不是特定于分析标签，我还有其他标签，例如导致问题的聊天小部件标签

Answer 1

您可以从 index.html 中删除脚本，而是在您的应用程序加载时注入它们，例如来自您的 AppComponent，并且仅当它加载客户端时

constructor(private renderer: Renderer2, @Inject(DOCUMENT) private _document: any,  @Inject(PLATFORM_ID) private platformId: Object)
{
    if(isPlatformBrowser(this.platformId)) //Client side execution
    {
        this.injectScripts();
    }   
}

injectScripts()
{
    
    const gtmScriptTag = this.renderer.createElement('script');
    gtmScriptTag.type = 'text/javascript';
    gtmScriptTag.src = 'https://www.googletagmanager.com/gtag/js?id=UA-XXXX';
    this.renderer.appendChild(this._document.body, gtmScriptTag);
    
    
    const gtagInitScript = this.renderer.createElement('script');
    gtagInitScript.type = 'text/javascript';
    gtagInitScript.text = `
    window.dataLayer = window.dataLayer || [];

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

    gtag('config', 'UA-XXXX');
    `;
    this.renderer.appendChild(this._document.body, gtagInitScript);
}

使用 Angular universal 加载 Google Analytics 代码的正确方法是什么？

What is the proper way to load the Google Analytics tag with Angular universal?

angular-universal

angular