React SPA中GA4 page_view事件按需携带自定义维度的实现方案

现有实现问题 #

原本监听pathname变化触发GA4 page_view的通用路由埋点逻辑运行正常，但添加subscriptionsData相关自定义维度后，出现核心问题：

• 有subscriptionsData的页面需要等待数据就绪后触发事件（携带对应维度）
• 无subscriptionsData的页面会因等待数据一直无法触发事件

尝试过的方案均不可行：

• 逐个页面单独触发：应用规模庞大，重构成本极高
• 路由端点配置文件：维护性差，后续新增维度时扩展性不足

核心需求 #

• 通用逻辑适配所有页面，无需逐个修改
• 通过Redux Store判断当前页面是否发起了特定接口请求
• 对应接口请求完成（成功/失败）后，触发带对应维度的page_view；无对应请求的页面直接触发不带该维度的事件
• 支持后续新增更多来自不同接口的自定义维度

解决方案实现 #

1. 在Redux中追踪接口请求状态 #

首先在Redux Store中统一记录每个接口的请求状态（是否发起、是否完成）。如果使用RTK Query等API管理工具，可直接复用其自带的isLoading/isSuccess状态；自定义Redux逻辑则手动添加状态追踪：

// 示例：Redux reducer中添加接口请求状态追踪
interface ApiRequestState {
  [key: string]: {
    initiated: boolean;
    completed: boolean;
  };
}

const initialState: ApiRequestState = {};

const apiRequestReducer = (state = initialState, action: any) => {
  switch (action.type) {
    case 'API_REQUEST_INITIATED':
      return {
        ...state,
        [action.payload.endpoint]: { initiated: true, completed: false },
      };
    case 'API_REQUEST_COMPLETED':
      return {
        ...state,
        [action.payload.endpoint]: { ...state[action.payload.endpoint], completed: true },
      };
    // 路由切换时重置当前页面的请求状态
    case 'ROUTE_CHANGED':
      return initialState;
    default:
      return state;
  }
};

2. 改造usePageViewTracking钩子 #

实现双重触发逻辑：路由切换时先触发基础事件，接口请求完成后再触发带维度的事件：

import { useLocation, useEffect } from 'react';
import { useAppSelector, useAppDispatch } from './redux/hooks';
import { sendPageViewEvent } from './analytics';

const usePageViewTracking = () => {
  const { pathname } = useLocation();
  const dispatch = useAppDispatch();
  
  // 获取订阅接口的请求状态
  const subscriptionsRequest = useAppSelector(
    state => state.apiRequests[REDUX_API.SUBSCRIPTIONS]
  );
  // 后续新增其他接口状态，直接在此添加
  // const otherDataRequest = useAppSelector(state => state.apiRequests[REDUX_API.OTHER_ENDPOINT]);

  // 路由切换时，重置状态并触发基础page_view（不带接口维度）
  useEffect(() => {
    dispatch({ type: 'ROUTE_CHANGED' });
    sendPageViewEvent({});
  }, [pathname, dispatch]);

  // 订阅接口请求完成后，触发带维度的page_view
  useEffect(() => {
    if (subscriptionsRequest?.initiated && subscriptionsRequest?.completed) {
      const subscriptionsData = useAppSelector(
        state => state?.[REDUX_API.KEY]?.[REDUX_API.SUBSCRIPTIONS]?.successPayload?.data
      );
      sendPageViewEvent({ subscriptionsData });
    }
  }, [subscriptionsRequest]);

  // 后续新增其他接口，复制上述useEffect逻辑即可
  // useEffect(() => {
  //   if (otherDataRequest?.initiated && otherDataRequest?.completed) {
  //     const otherData = useAppSelector(...);
  //     sendPageViewEvent({ otherData });
  //   }
  // }, [otherDataRequest]);
};

export default usePageViewTracking;

3. 优化sendPageViewEvent函数 #

确保函数能按需处理多种数据参数，动态添加维度：

interface SendPageViewEventProps {
  subscriptionsData?: any;
  otherData?: any; // 预留后续新增数据参数
}

export const sendPageViewEvent = ({ subscriptionsData, otherData }: SendPageViewEventProps): void => {
  const { locale, ga } = window.appData;
  const events = {
    page_lang: locale || DEFAULT_LOCALE,
    experiment: ga.experiment,
    consent_status: Cookies.get(COOKIES.COOKIE_CONSENT) || 'ignore',
  };

  // 按需添加订阅相关维度
  if (subscriptionsData) {
    const { subscriptions, merchants, providers } = prepareSubscriptionsData({ subscriptionsData }) || {};
    Object.assign(events, {
      ucp_subscriptions: subscriptions,
      ucp_payment_providers: providers,
      ucp_merchants: merchants,
    });
  }

  // 后续新增其他维度，直接添加判断逻辑
  // if (otherData) {
  //   Object.assign(events, { custom_dimension: otherData.value });
  // }

  sendGA4Event({ eventType: GA4_EVENT_TYPE.PAGE_VIEW, ...events });
};

4. 接口请求时更新状态 #

在发起接口请求和请求完成时，分发对应的Redux action：

// 示例：订阅接口请求逻辑
const fetchSubscriptions = () => async (dispatch: any) => {
  dispatch({ type: 'API_REQUEST_INITIATED', payload: { endpoint: REDUX_API.SUBSCRIPTIONS } });
  try {
    const response = await api.get('/subscriptions');
    dispatch({ type: 'SUBSCRIPTIONS_SUCCESS', payload: response.data });
  } catch (error) {
    dispatch({ type: 'SUBSCRIPTIONS_ERROR', payload: error });
  } finally {
    dispatch({ type: 'API_REQUEST_COMPLETED', payload: { endpoint: REDUX_API.SUBSCRIPTIONS } });
  }
};

方案优势 #

• 通用适配：无需逐个页面修改，完美契合SPA架构
• 扩展性强：新增接口维度时，仅需添加状态追踪和对应useEffect逻辑
• 逻辑清晰：区分基础事件和带维度事件，确保无接口数据的页面正常触发
• 易于维护：通过Redux统一管理接口请求状态，便于调试和迭代

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