GA4：自定义<-返回链接与浏览器原生返回按钮点击追踪问询

一、追踪两类返回行为 #

1. 自定义<-返回链接的追踪（两种方案任选） #

方案A：通过GTM监听点击事件

• 步骤1：在GTM里创建点击触发器，选择“所有元素”，然后加过滤规则——比如匹配元素文本为“<-返回”，或者匹配你给自定义返回链接加的CSS类（比如.custom-back-link）。
• 步骤2：创建GA4事件标签，事件名设为custom_back_click，还可以加自定义参数，比如from_page记录用户点击时所在的页面。
• 步骤3：发布GTM容器，测试点击自定义链接时，GA4实时报告里能收到这个事件就算成了。

方案B：在React里直接写事件处理函数

如果不想依赖GTM，直接在组件里埋事件逻辑：

import { useNavigate } from 'react-router-dom'; // React Router v6用这个，v5用useHistory

const CustomBackLink = () => {
  const navigate = useNavigate();

  const handleBackClick = () => {
    // 给GA4发事件
    window.gtag('event', 'custom_back_click', {
      from_page: window.location.href,
      // 还能加其他参数，比如链接所在的组件名称
    });
    navigate(-1); // 执行返回操作
  };

  return <button onClick={handleBackClick}><-返回</button>;
};

要是还是想通过GTM管理事件，也可以在React里触发自定义事件让GTM捕获：

const handleBackClick = () => {
  window.dispatchEvent(new CustomEvent('custom_back_click', {
    detail: { from_page: window.location.href }
  }));
  navigate(-1);
};

之后在GTM里创建“自定义事件触发器”监听custom_back_click，再绑定GA4标签就行。

2. 浏览器原生返回按钮的追踪 #

浏览器原生返回会触发popstate事件，但页面首次加载也会触发一次，得做过滤。在React里用useEffect监听最精准：

import { useEffect, useRef } from 'react';

const useNativeBackTracking = () => {
  const isFirstLoad = useRef(true);

  useEffect(() => {
    const handlePopState = () => {
      // 跳过首次加载的popstate
      if (isFirstLoad.current) {
        isFirstLoad.current = false;
        return;
      }
      // 确认是用户点了原生返回按钮，给GA4发事件
      window.gtag('event', 'native_back_click', {
        from_page: window.location.href,
        to_page: document.referrer // 记录返回后的页面
      });
    };

    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);
};

// 在根组件或者需要监测的页面组件里调用这个Hook
const App = () => {
  useNativeBackTracking();
  // 其他组件逻辑...
};

如果想用GTM实现，得创建“自定义事件触发器”监听popstate，但要加过滤条件跳过首次加载的触发——比如用自定义JS变量判断是否是首次触发，不过React里直接监听逻辑更可控。

二、关联两类事件做对比分析 #

1. 统一事件参数维度 #

给两类返回事件设置相同的自定义参数，方便后续对比：

• 比如都加from_page（用户点击返回时的页面）、ga_session_id（GA4自带的会话ID）。
• 这样在GA4里就能按事件名分组，看不同页面上两种返回行为的占比。

2. GA4里的分析操作 #

• 探索功能：创建“自由形式”探索，把event_name设为行维度，from_page设为列维度，指标选event_count，就能直观看到每个页面上自定义返回和原生返回的点击次数对比。
• 自定义报告：在GA4“报告”模块建自定义报告，把event_name作为维度，event_count作为指标，筛选出custom_back_click和native_back_click这两个事件，看整体的点击占比。
• 漏斗分析：如果要追踪用户从某页面出发，通过两种返回方式回到上一页的路径，可以建漏斗——第一步设为“页面浏览”（目标页面），后面两步分别设为两类返回事件，看转化差异。

3. 避坑提醒 #

• 防止重复计数：自定义返回链接点击后如果调用了navigate(-1)，也会触发popstate事件，这时候要加标记跳过原生事件的发送：

const isCustomBack = useRef(false);

const handleBackClick = () => {
  isCustomBack.current = true;
  window.gtag('event', 'custom_back_click', { /* 参数 */ });
  navigate(-1);
};

const handlePopState = () => {
  if (isFirstLoad.current) {
    isFirstLoad.current = false;
    return;
  }
  if (isCustomBack.current) {
    isCustomBack.current = false;
    return;
  }
  // 发送native_back_click事件
};

• 测试验证：在GA4实时报告里，分别点击自定义返回和原生返回，确认两类事件都能正常显示，参数也没问题。

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