前言
Microsoft Clarity 能够对访问网站的用户行为进行分析,此网站也接入了。
个人感觉挺好用的,没事的时候就可以看看网站的访问情况。
使用也非常简单,只要在<head>标签里添加后台提供的一行代码即可。

不过很多广告规则都会屏蔽 Clarity 的域名,因此会缺不少用户连接信息。但可以通过 nginx 反代到自己的域名上避免,这里给出具体操作步骤供大家参考。
分析请求
下面是一个在<head>标签中添加的代码示例。
或者打开浏览器的开发者工具进行抓包,能看到相关代码会首先请求 https://www.clarity.ms/tag/abcdefg ,下载下来后是一个js脚本:
其中有3个链接:
- https://c.clarity.ms/c.gif
- https://www.clarity.ms/s/0.8.13-beta/clarity.js
- https://z.clarity.ms/collect
需要将上述链接一一替换。
替换链接并反代
假设你的域名为 example.com ,可以新建一个子域名 clarity.example.com 并解析到你公网的一个 nginx 服务器上。
此时可以将 https://www.clarity.ms/tag/abcdefg 请求到的脚本保存到 /var/www/html/tag/abcdefg。
之后将上述3个链接依次替换如下:
- https://clarity.example.com/c.gif
- https://clarity.example.com/s/0.8.13-beta/clarity.js
- https://clarity.example.com/collect
之后还需下载 https://www.clarity.ms/s/0.8.13-beta/clarity.js 到 /var/www/html/s/0.8.13-beta/clarity.js,也许你看的时候版本已经不同了,对应地进行修改即可。上述/var/www/html目录也可自行修改,但需要注意权限避免nginx进程无法访问,此时目录结构如下:
nginx反代配置参考:
重新配置网站
将原来在网站 <head> 中添加的脚本中的 www.clarity.ms 替换为 clarity.example.com。至此大功告成,尝试访问你的网站并看看后台是否有在线的实时用户吧!
缺点
- 这样之后缺点就是后台显示所有访问的地理位置均来自于该nginx服务器了,如果微软能给就请求头判断地理位置就好了。
- 无法自动跟随微软升级
clarity.js,不过也可以自己写一个脚本实现自动,参考代码: