React项目GA自动添加URL参数问题及修复方法

问题重现 #

我有一个集成了Google Analytics的React项目，核心代码如下：

import ReactGA from "react-ga4";
import TagManager from "react-gtm-module";

useEffect(() => {
  ReactGA.initialize("G-xxxxx...");
  ReactGA.send("pageview");
  TagManager.initialize({
    gtmId: "GTM-xxxxx..."
  });
}, []);

链接代码：

<a
  href={`${window.location.protocol}//${domain}`}
  target="_blank"
  rel="noreferrer noopener"
>
  {`${window.location.protocol}//${domain}`}
</a>

实际渲染后，href被自动添加了_gl参数：

<a href="https://test.com&amp;amp;_gl=1*l68v33*_ga*ABRVALTRA.*_ga_1RTDSMNASHGFDTJSLJSNG.." target="_blank" rel="noreferrer noopener">https://test.com</a>

预期的href应为：

<a href="https://test.com" target="_blank" rel="noreferrer noopener">https://test.com</a>

问题原因 #

这个_gl参数是GA4的自动跨域链接装饰功能生成的，目的是在跨域跳转时传递用户的GA会话标识，保证用户在不同域名下的行为能被关联到同一个会话中。默认情况下，GA4会自动为所有外部链接添加这类参数。

修复方法 #

方法1：全局禁用自动链接装饰 #

在初始化ReactGA时，通过gaOptions配置关闭自动链接装饰，或者指定仅装饰特定域名：

useEffect(() => {
  ReactGA.initialize("G-xxxxx...", {
    gaOptions: {
      linker: {
        decorateForms: false, // 关闭表单装饰
        autoLink: [] // 空数组表示不自动装饰任何域名，如需指定允许装饰的域名可填入数组
      }
    }
  });
  ReactGA.send("pageview");
  TagManager.initialize({
    gtmId: "GTM-xxxxx..."
  });
}, []);

如果同时使用GTM，需在GTM的GA4配置标签中找到跨域测量设置，关闭"自动链接装饰"选项，或添加需要排除的域名。

方法2：针对单个链接禁用装饰 #

如果不想全局禁用，仅对特定链接生效，可以给a标签添加data-ga-no-linker属性：

<a
  href={`${window.location.protocol}//${domain}`}
  target="_blank"
  rel="noreferrer noopener"
  data-ga-no-linker
>
  {`${window.location.protocol}//${domain}`}
</a>

GA4会识别该属性，不对当前链接进行参数装饰。

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