如何将页面查看事件发送到 Angular 中的 Google 跟踪代码管理器

Question

直到现在，我一直在直接使用 Google Analytics，并且我使用 app.component.ts 中的 JavaScript 手动触发页面查看事件，如下所示：

declare var gtag: Function;
...
constructor(private router: Router) {
  const navEndEvents = this.router.events.pipe(
    filter((event) => event instanceof NavigationEnd)
  );
  navEndEvents.subscribe((event: NavigationEnd) => {
    gtag('config', 'xxx', {
    page_path: event.urlAfterRedirects,
    page_title: event.urlAfterRedirects
    });
  })
}

现在，我想通过 Google 跟踪代码管理器使用 Google 分析，而不是直接使用。我现在应该如何发送页面浏览事件？

Answer 1

我可以使用 angular-google-tag-manager 包来完成。安装和配置包后，您可以非常轻松地将任何事件发送到 GTM。 app.component.ts 中页面查看事件的重构如下所示：

import { GoogleTagManagerService } from 'angular-google-tag-manager';

constructor(private router: Router, private gtmService: GoogleTagManagerService) {
  const navEndEvents = this.router.events.pipe(
    filter((event) => event instanceof NavigationEnd)
  );
  navEndEvents.subscribe((event: NavigationEnd) => {
    this.gtmService.pushTag({
      event: 'pageview',
      data: {
        page_name: event.urlAfterRedirects
      }
    });
  });
}

如何将页面查看事件发送到 Angular 中的 Google 跟踪代码管理器

How to send Page View Event to Google Tag Manager in Angular

javascript

google-analytics

typescript

google-tag-manager

angular