如何在react-ga4中为子域名禁用Google Analytics增强型衡量事件？

问题场景 #

• 主域名（https://mywebsite.com）：需追踪GA4所有增强型衡量事件及自定义事件
• 子域名（https://app.mywebsite.com）：仅需追踪sign_up、login等自定义触发事件
• 使用react-ga4配置时，无法仅为子域名禁用增强型衡量事件，当前配置的参数（如send_page_view: false、scrolls: false）未生效

解决方案 #

可以通过JavaScript动态判断域名，并结合gtag原生命令实现差异化配置，具体步骤如下：

1. 域名判断逻辑

通过window.location.hostname识别当前访问的域名，区分主域名和子域名。

2. 差异化初始化配置

针对不同域名设置不同的react-ga4初始化参数，子域名需额外调用gtag原生命令禁用增强型衡量。

完整代码示例

import ReactGA from 'react-ga4';

// 获取当前域名
const currentHost = window.location.hostname;
const isMainDomain = currentHost === 'mywebsite.com';
const isSubDomain = currentHost === 'app.mywebsite.com';

// 基础通用配置
const baseGAConfig = {
  gaOptions: {
    transport_url: 'https://metrics.mywebsite.com',
  },
  gtagUrl: 'https://metrics.mywebsite.com/gtag/js',
};

// 主域名：启用全量追踪（页面浏览+增强型衡量+自定义事件）
if (isMainDomain) {
  ReactGA.initialize('G-XXXXXXX', {
    ...baseGAConfig,
    gaOptions: {
      ...baseGAConfig.gaOptions,
      send_page_view: true, // 启用自动页面浏览追踪
    },
  });
}

// 子域名：仅启用自定义事件追踪，禁用自动页面浏览和增强型衡量
if (isSubDomain) {
  ReactGA.initialize('G-XXXXXXX', {
    ...baseGAConfig,
    gaOptions: {
      ...baseGAConfig.gaOptions,
      send_page_view: false, // 禁用自动页面浏览追踪
    },
  });

  // 禁用所有增强型衡量事件（优先级高于GA后台设置）
  window.gtag('set', 'enhanced_measurement', false);

  // 若需精细化禁用单个事件，可替换为以下配置（按需选择）
  // window.gtag('set', 'enhanced_measurement_settings', {
  //   scrolls: false,
  //   page_views: false,
  //   outbound_clicks: false,
  //   site_search: false,
  //   file_downloads: false,
  //   video_engagement: false,
  //   form_interactions: false,
  // });
}

// 自定义事件触发工具函数（子域名仅调用此函数追踪事件）
export const trackCustomEvent = (eventName, eventParams = {}) => {
  ReactGA.event(eventName, eventParams);
};

为什么原配置未生效？ #

• react-ga4的gtagOptions封装层面对enhanced_measurement_settings的支持有限，直接调用原生gtag命令更可靠
• 增强型衡量事件默认由GA4自动触发，仅通过react-ga4初始化参数无法完全禁用，需通过gtag('set')命令覆盖配置

额外注意事项 #

• 确保GA4后台的增强型衡量设置未强制锁定（代码层面的禁用优先级更高）
• 子域名页面中仅调用trackCustomEvent触发自定义事件，避免调用ReactGA.pageview()等自动追踪方法

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