如何阻止Angular网站Google Analytics实时数据因用户无活动过期？

首先得明确Google Analytics的实时会话规则：默认情况下，30分钟内没有用户互动（比如点击、滚动、页面跳转等），用户就会从实时统计中被移除。要解决这个问题，核心思路就是定期给GA发送一个"心跳"事件，模拟用户互动，从而延长会话时长。

下面是在Angular项目中实现这个方案的具体步骤：

1. 创建心跳服务 #

先生成一个Angular服务来统一管理心跳逻辑，方便在整个应用中复用：

import { Injectable, HostListener } from '@angular/core';
import { interval, Subscription } from 'rxjs';
import { gtag } from 'gtag.js'; // 假设你已经在项目中引入了GA的gtag脚本

@Injectable({ providedIn: 'root' })
export class GaHeartbeatService {
  private heartbeatSubscription?: Subscription;
  // 设置心跳间隔为25分钟（比30分钟超时短，留足缓冲时间）
  private readonly HEARTBEAT_INTERVAL = 25 * 60 * 1000;

  startHeartbeat() {
    // 避免重复创建定时器
    if (this.heartbeatSubscription) return;

    this.heartbeatSubscription = interval(this.HEARTBEAT_INTERVAL).subscribe(() => {
      // 发送自定义心跳事件到GA
      gtag('event', 'heartbeat', {
        event_category: 'Session Maintenance',
        event_label: 'Keep user in real-time report',
        non_interaction: false // 设为false才会被算作用户互动，延长会话时长
      });
    });
  }

  stopHeartbeat() {
    this.heartbeatSubscription?.unsubscribe();
    this.heartbeatSubscription = undefined;
  }

  // 监听页面可见性变化，切走标签页时停心跳，切回来重启
  @HostListener('window:visibilitychange')
  onVisibilityChange() {
    if (document.hidden) {
      this.stopHeartbeat();
    } else {
      this.startHeartbeat();
    }
  }

  // 页面卸载时停止心跳，避免无效请求
  @HostListener('window:beforeunload')
  onBeforeUnload() {
    this.stopHeartbeat();
  }
}

2. 在根组件中初始化心跳 #

在AppComponent中注入这个服务，并在组件初始化时启动心跳：

import { Component, OnInit } from '@angular/core';
import { GaHeartbeatService } from './services/ga-heartbeat.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private gaHeartbeatService: GaHeartbeatService) {}

  ngOnInit() {
    // 页面加载完成后启动心跳
    this.gaHeartbeatService.startHeartbeat();
  }
}

关键细节说明 #

• 心跳间隔设置：选25分钟是为了在GA默认的30分钟超时前触发心跳，确保用户不会被实时统计移除，你也可以根据自己的需求调整，但别超过30分钟。
• 事件配置注意：non_interaction一定要设为false，否则GA不会把这个事件算作用户互动，也就无法延长会话时长。
• 页面状态适配：监听visibilitychange是为了避免用户切走页面后还在发送无效心跳，既节省请求量，也更贴合真实的用户状态。
• 避免重复订阅：启动心跳前先检查是否已有订阅，防止多次创建定时器导致重复发送事件。

替代方案：更新页面浏览记录 #

如果你不想发送自定义事件，也可以定期重新上报当前页面的浏览信息，但这种方式会混在正常的页面浏览数据里，不如自定义心跳事件清晰：

// 在心跳定时器中执行
gtag('config', '你的GA测量ID', {
  page_path: window.location.pathname,
  page_title: document.title
});

不过更推荐用自定义心跳事件，这样你可以在GA的事件报告中单独看到这些维护性请求，不会干扰正常的用户行为数据分析。

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