如何使用ga()函数适配G-开头的新版谷歌分析代码

首先明确核心限制：原生analytics.js（ga()函数的底层依赖）没有原生支持GA4（G-开头）测量ID的能力，谷歌官方仅推荐gtag.js对接GA4。如果必须保留现有ga()调用逻辑不改动，可以采用以下两种兼容方案：

方案1：UA资源关联GA4（无代码改动，适合仍有有效UA资源的场景） #

如果你的业务仍保留生效中的UA媒体资源，可以在GA4后台完成UA与GA4测量ID的关联，开启数据自动同步功能，原有ga()发往UA-ID的所有数据会自动同步到绑定的GA4资源中，无需修改任何前端代码。

注意：该方案仅适用于仍在生效的UA资源，2023年7月之后谷歌已停止普通UA资源的数据收集，如果你的UA已经失效，需要采用方案2。

方案2：自定义ga()任务转发请求到GA4 #

通过给ga()注册自定义发送任务，拦截所有原有ga()生成的上报数据，按照GA4测量协议的格式转换后发送到G-对应的GA4端点，无需改动原有业务逻辑。

首先初始化ga()的时候新增自定义转发任务逻辑，替换示例中的G-XXXXXXX为你的GA4测量ID：

// 原有ga初始化逻辑不变
ga('create', "UA-XXX", {name: 'companyname'});

// 新增自定义转发任务
ga('companyname.set', 'customTask', function(model) {
  // 构建GA4测量协议参数
  const ga4Params = new URLSearchParams({
    'v': '2', // GA4测量协议固定版本号
    'tid': 'G-XXXXXXX', // 你的GA4测量ID
    'cid': model.get('clientId'), // 复用原有ga的客户端ID，保证用户标识统一
    'en': 'page_view', // 事件名，对应原有pageview类型
    'ep.page_title': model.get('title') || document.title,
    'dl': model.get('location') || window.location.href,
    'dr': model.get('referrer') || document.referrer
    // 其他需要上报的参数可按照GA4测量协议规则在此补充
  });

  // 发送请求到GA4上报端点
  navigator.sendBeacon('https://www.google-analytics.com/g/collect', ga4Params.toString());
});

原有发送页面浏览的代码完全不需要改动：

ga('companyname.send', {
    hitType: 'pageview',
    title: "some-title",
});

说明：该方案不需要引入gtag.js，完全基于原有ga()的能力实现，自定义事件也可以通过扩展customTask里的参数映射规则完成适配。

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