Angular SPA集成segment.io时analytics.page()的referrer属性问题咨询

1. referrer属性的覆盖范围 #

Segment的referrer属性定义与原生document.referrer完全一致，默认仅指代站外跳转的来源链接、或者站点整页刷新时的上一页地址，不会包含SPA应用内路由切换的上一个路由地址。
你遇到的取值为空、切换多页后值固定的问题是正常现象：Angular这类SPA应用的路由跳转是前端无刷新切换，不会触发浏览器更新document.referrer的值，所以该值会一直保留用户首次进入站点时的站外来源，用户直接输入地址进入站点时该值就为空。

2. 是否需要手动设置该属性 #

根据你的埋点统计需求决定：

• 若仅需要统计站外跳转来源，不需要手动设置，直接使用默认取值即可
• 若需要统计应用内不同页面跳转的来源路径，需要手动维护上一个路由的地址，在调用Segment的page上报事件时主动传入referrer参数。

Angular应用内手动维护referrer的示例代码 #

你可以通过监听Angular Router的路由事件来存储上一路由地址，示例如下：

import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter, pairwise } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AnalyticsService {
  // 存储上一路由地址
  private previousRouteUrl: string = '';

  constructor(private router: Router) {
    // 监听路由结束事件，成对获取前后路由
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      pairwise()
    ).subscribe(([prevEvent, currEvent]: [NavigationEnd, NavigationEnd]) => {
      this.previousRouteUrl = prevEvent.urlAfterRedirects;
    });
  }

  // 封装页面上报方法
  trackPage(pageName: string, extraProperties?: Record<string, any>) {
    window.analytics.page(pageName, {
      referrer: this.previousRouteUrl,
      ...(extraProperties || {})
    });
  }
}

在组件内页面初始化时调用trackPage方法即可正确上报应用内跳转的来源地址。

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