角度 Google Analytics gtag 配置仅在第一页触发

Question

在 Angular 应用程序中，我有一个事件路由器订阅来跟踪页面更改，但“收集”网络调用仅在第一次触发 gtag 时触发。

在我的 Index.html 中：

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
  </script>

在我的服务中。ts：

  public trackGaPageViews(): void {
    if (this.cloudConfiguration.configuration?.googleAnalyticsEnabled) {
      this.router.events
      .pipe(takeUntil(this.cleanupStream))
      .subscribe(event => {
        if (event instanceof NavigationEnd) {
          gtag('config', this.googleAnalyticsId, {
            'page_path': event.urlAfterRedirects
          });
        }
      });
    }
  }

我可以看到推送到数据层的事件：

但是网络部分只有一个page_view事件：

我不明白为什么我没有看到更多网络调用（因此我在分析仪表板中看不到该事件），每次页面更改时都会触发 gtag。

有人有想法吗？

Answer 1

您可能正在寻找

page_view

事件，

config

只需要运行一次。

  public trackGaPageViews(): void {
    if (this.cloudConfiguration.configuration?.googleAnalyticsEnabled) {
      this.router.events
      .pipe(takeUntil(this.cleanupStream))
      .subscribe(event => {
        if (event instanceof NavigationEnd) {
          gtag('event', 'page_view', {
            'page_path': event.urlAfterRedirects
          });
        }
      });
    }
  }

您可能需要将配置代码移动到根组件的

ngOnInit

...
export class AppComponent {

    ngOnInit(): void {
        gtag('config', this.googleAnalyticsId, {
            'page_path': event.urlAfterRedirects
        });
    }
    ...