如何从GA4获取client_id并传入表单隐藏字段

不需要调用GA4 API即可在前端直接获取client_id，和Universal Analytics的使用场景类似，常用两种实现方式：

方式1：从GA4默认Cookie提取 #

GA4默认会在站点域名下生成名为_ga的Cookie，值格式为GA1.2.xxxxxx.yyyyyy，其中最后两段拼接的xxxxxx.yyyyyy就是目标client_id。
前端JS提取示例：

function getGa4ClientId() {
  const gaCookie = document.cookie
    .split('; ')
    .find(item => item.startsWith('_ga='))
    ?.split('=')[1];
  return gaCookie ? gaCookie.split('.').slice(2).join('.') : null;
}
// 提取后直接赋值给表单隐藏字段即可
document.querySelector('input[name="hidden_client_id"]').value = getGa4ClientId();

小提示：如果你配置了自定义GA4 Cookie前缀，或者站点有多个GA4媒体资源，会存在_ga_XXXXXX格式的专属Cookie，把上面代码里的Cookie名替换为对应名称即可，提取逻辑一致。

方式2：通过gtag.js官方方法获取 #

如果你的站点通过gtag.js接入GA4，更稳妥的方案是调用官方提供的取值接口，避免Cookie规则修改导致提取失效，示例代码如下：

// 请把G-XXXXXX替换为你自己的GA4媒体资源ID
gtag('get', 'G-XXXXXX', 'client_id', (clientId) => {
  // 拿到clientId后赋值给隐藏字段
  document.querySelector('input[name="hidden_client_id"]').value = clientId;
});

注意：该代码需要在gtag.js加载完成后执行，建议放在GA4埋点代码的下方，避免出现gtag is not defined的报错。

什么情况需要用到GA4 API？ #

只有你需要拉取历史用户的client_id、或者在服务端批量获取跨会话数据的时候，才需要调用GA4的Reporting API，前端表单传值、实时埋点的场景完全不需要调用API。

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