因Cookie Consent横幅触发页面重载导致Google Analytics丢失初始流量来源

问题核心在于：页面重载后，浏览器的document.referrer会被重置为当前页面，URL中的UTM参数也不会自动保留（如果当前URL无这些参数），导致GA无法识别初始流量来源，全部归为DIRECT。下面提供两种可行的解决方案：

方案1：临时存储流量来源再恢复（适用于必须重载页面的场景） #

通过localStorage在重载前保存初始流量的referrer和UTM参数，页面重新加载后再手动将这些信息传递给GA，确保来源被正确记录。

代码实现 #

1. 监听Cookie同意事件并存储来源信息

// 监听OneTrust的Cookie同意完成事件（不同版本事件名可能为OptanonWrapper/OneTrustConsentChanged）
window.addEventListener('OptanonWrapper', function() {
  // 验证是否是首次授予Analytics类Cookie权限
  if (OneTrust?.IsAlertBoxClosed() && OneTrust.GetUserPreferenceForGroup('C0002') === 'Granted') {
    // 收集流量来源数据
    const trafficData = {
      referrer: document.referrer,
      utmParams: {
        source: getUrlParam('utm_source'),
        medium: getUrlParam('utm_medium'),
        campaign: getUrlParam('utm_campaign'),
        term: getUrlParam('utm_term'),
        content: getUrlParam('utm_content')
      },
      createdAt: Date.now()
    };

    // 存入localStorage，设置30分钟过期窗口
    localStorage.setItem('savedTrafficSource', JSON.stringify(trafficData));
    
    // 执行页面重载
    window.location.reload();
  }
});

// 辅助函数：解析URL参数
function getUrlParam(paramName) {
  return new URLSearchParams(window.location.search).get(paramName) || null;
}

2. 页面加载时恢复GA流量来源

document.addEventListener('DOMContentLoaded', function() {
  const savedSource = localStorage.getItem('savedTrafficSource');
  if (!savedSource) return;

  const { referrer, utmParams, createdAt } = JSON.parse(savedSource);
  const isExpired = Date.now() - createdAt > 30 * 60 * 1000; // 30分钟过期

  if (!isExpired) {
    // GA4 处理逻辑
    if (typeof gtag !== 'undefined') {
      const gaParams = {};
      if (referrer) gaParams.page_referrer = referrer;
      Object.entries(utmParams).forEach(([key, value]) => {
        if (value) gaParams[key] = value;
      });

      // 覆盖当前session的来源参数并发送页面视图
      gtag('set', 'session', gaParams);
      gtag('event', 'page_view');
    }

    // Universal Analytics（UA）处理逻辑（如果仍在使用）
    if (typeof ga !== 'undefined') {
      ga('set', {
        referrer: referrer,
        campaignName: utmParams.campaign,
        campaignSource: utmParams.source,
        campaignMedium: utmParams.medium,
        campaignTerm: utmParams.term,
        campaignContent: utmParams.content
      });
      ga('send', 'pageview');
    }
  }

  // 清除存储的临时数据，避免后续访问干扰
  localStorage.removeItem('savedTrafficSource');
});

方案2：避免全页面重载（优先推荐） #

如果不需要强制刷新整个页面，仅需重新初始化依赖Cookie的功能模块即可，从根本上避免流量来源丢失的问题：

window.addEventListener('OptanonWrapper', function() {
  if (OneTrust.GetUserPreferenceForGroup('C0002') === 'Granted') {
    // 重新初始化GA（确保Cookie已启用）
    if (typeof gtag !== 'undefined') {
      gtag('event', 'page_view');
    }
    // 其他需要重新初始化的功能模块（如广告脚本、个性化工具等）
    // initAdScripts();
    // initPersonalization();
  }
});

关键注意事项 #

• OneTrust事件名需匹配实际使用的版本，部分版本使用OneTrustConsentChanged替代OptanonWrapper
• 必须设置过期时间，防止用户后续访问时错误加载旧的流量来源数据
• 测试多种流量场景：外部链接跳转、带UTM参数的链接、直接访问，确保GA记录准确

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