如何通过gtag.js获取Google Analytics的Client ID

我懂你遇到的这个痛点——Google几个月前推出gtag.js作为Google Analytics的新追踪方案，现在新建账号默认都用它了，代码片段也从旧的analytics.js格式换成了更简洁的gtag版本：

旧的analytics.js代码：

<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-12345678-1', 'auto'); ga('send', 'pageview'); </script>

新的gtag.js代码：

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123456789-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-123456789-1'); </script>

之前用analytics.js的时候，你可以通过ga(function(tracker) { let clientId = tracker.get('clientId'); })轻松拿到Client ID，但换到gtag.js之后，这个方法就失效了——因为gtag.js虽然底层还是加载了analytics.js，全局的ga变量也存在，但它不会把tracker实例传递给这个回调，所以tracker参数会是undefined。而且你查gtag文档也没找到相关说明，还纠结要不要违规读cookie，对吧？

官方支持的正确解法：用gtag的get命令 #

其实官方是有提供API的，只是文档没放在最显眼的位置。你可以用gtag('get')方法来获取指定跟踪ID的Client ID，代码如下：

// 把UA-123456789-1替换成你自己的GA跟踪ID
gtag('get', 'UA-123456789-1', 'client_id', function(clientId) {
  // 在这里处理获取到的Client ID，比如打印或者存到变量里
  console.log('当前用户的Client ID:', clientId);
});

这个方法是完全合规的，它通过gtag的封装层去调用底层的analytics.js接口，既不需要直接操作ga对象，也不用碰cookie，完美避开了官方禁止的操作。

为什么旧方法行不通？ #

简单来说，gtag.js对analytics.js做了一层封装，它的初始化逻辑不会像旧版那样，在全局ga对象的回调里传入tracker实例。虽然你能访问到ga变量，但它已经不是旧版那个可以直接拿tracker的对象了，所以回调里的tracker自然是undefined。

关于读取cookie的提醒 #

虽然你可以从_ga cookie里提取Client ID（格式是GA1.2.xxxxxx.xxxxxx，中间的两段拼接起来就是Client ID），但官方明确禁止这种做法——Google随时可能调整cookie的格式、命名或者存储方式，这样你的代码很容易在未来失效，而且也违反了GA的使用规范，所以强烈不推荐这么做。

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