如何在AngularFire及Firebase托管的Angular应用中使用Google Analytics？

我之前在自己的AngularFire项目里刚折腾完Google Analytics的集成，刚好可以给你分享下完整的步骤，涵盖设置用户ID、页面跟踪和自定义事件这几个核心需求：

一、前期准备 #

首先得确保你的Firebase项目已经开启了Google Analytics（在Firebase控制台的Analytics板块就能操作），然后在Angular项目里把依赖装全：

npm install @angular/fire firebase

接着在app.module.ts里导入并配置AngularFireAnalytics模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAnalyticsModule } from '@angular/fire/compat/analytics';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAnalyticsModule // 导入Analytics模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

二、设置用户ID #

当用户完成登录（不管是邮箱密码、Google登录还是其他方式），你可以把用户的唯一ID（比如Firebase Auth的uid）传给Analytics，这样就能把用户的行为和具体账号关联起来。

在你的Auth服务或者登录组件里，订阅用户登录状态，然后调用setUserId方法：

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFireAnalytics } from '@angular/fire/compat/analytics';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  constructor(
    private afAuth: AngularFireAuth,
    private analytics: AngularFireAnalytics
  ) {
    // 监听用户登录状态
    this.afAuth.authState.subscribe(user => {
      if (user) {
        // 设置用户ID为Firebase的uid
        this.analytics.setUserId(user.uid);
        // 也可以额外设置用户属性，比如用户名、邮箱
        this.analytics.setUserProperties({
          display_name: user.displayName,
          email: user.email
        });
      } else {
        // 用户登出时清空用户ID
        this.analytics.setUserId(null);
      }
    });
  }
}

三、跟踪页面加载（单页应用路由切换） #

因为Angular是单页应用，默认的Google Analytics不会自动跟踪路由切换的页面，所以我们需要手动监听路由事件，在每次导航完成后发送页面视图事件。

在app.component.ts里这么做：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { AngularFireAnalytics } from '@angular/fire/compat/analytics';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private analytics: AngularFireAnalytics
  ) {}

  ngOnInit(): void {
    // 监听路由导航完成事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // 发送页面视图事件，带上当前路径和页面标题
      this.analytics.logEvent('page_view', {
        page_path: event.urlAfterRedirects,
        page_title: document.title
      });
    });
  }
}

这样每次用户切换路由，Analytics都会记录对应的页面访问记录。

四、记录自定义事件 #

不管是用户点击按钮、提交表单还是其他自定义行为，都可以用logEvent方法来记录。比如用户点击了“提交表单”按钮：

在组件里：

import { Component } from '@angular/core';
import { AngularFireAnalytics } from '@angular/fire/compat/analytics';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html'
})
export class FormComponent {
  constructor(private analytics: AngularFireAnalytics) {}

  onSubmitForm(): void {
    // 处理表单提交逻辑...
    // 记录自定义事件，参数可以根据业务需求自定义
    this.analytics.logEvent('form_submitted', {
      form_name: 'user_registration',
      form_step: 'final'
    });
  }
}

事件名称建议用小写字母加下划线的命名规范，参数要尽量有业务意义，方便后续在Analytics后台做数据分析。

验证方法 #

你可以打开Chrome的DevTools，在Network标签里过滤collect请求，就能看到Analytics发送的事件数据；或者直接去Firebase控制台的Analytics板块，等个几分钟就能看到实时的用户行为数据了。

内容的提问来源于stack exchange，提问作者Alexander Zhidkov