用这个免费工具，我找到了用户流失的关键节点

今天分享一个网站分析工具，前面写过接入方式和怎么搭数据分析体系，推荐网站上线之后都去接入一下。用的工具叫 Microsoft Clarity，微软出的，完全免费。而且现在有了 AI 能力，更好用了！

上周认真分析了一下用户录屏，找到好几个可以优化的点。

一条录屏找到了注册漏洞

Clarity 能录下用户在网站上的所有操作，鼠标移到哪、点了什么、在哪里停了多久，全都有。看多了之后就能发现规律。

我发现很多用户在到了注册这一步就直接关掉了。一开始以为是表单太长，后来仔细看才发现问题出在时机上，用户还没选套餐，注册弹窗就跳出来了。他们不知道自己要买什么就被要求先注册，直接关掉很正常。

于是我的优化是：先让用户选套餐，选完了再弹登录窗，登录成功之后跳回他之前选择的订购页面。顺序调过来，摩擦少了很多。

这里有个新功能让我挺惊喜的，有两个层级的 AI 总结。

一个是跨所有录制的汇总，直接告诉你规律性的结论，比如"多个会话中用户在结账页面反复停留和返回"、"注册和登录过程中存在多次重试"，每条结论后面还跟着对应的会话数，点进去就能看到具体录制。不用自己一条条看，AI 帮你归纳好了。

Clarity AI 记录关键摘要

另一个是单条录制的摘要，打开具体一条录屏，左边会显示这个记录的关键纪要，基本都是和视频内容匹配的，所以参考性很高。

Clarity 录屏回放界面

热力图，用颜色看用户在意什么

Clarity 的热力图把点击数据渲染成色卡，红色是点击最多的区域，蓝色是点击少的地方。鼠标移到具体区块上会显示点击次数。

我用这个判断哪些功能是用户真的在用的，哪些区域基本没人关注。有些按钮我以为很重要，一看热力图才知道根本没人点，页面布局怎么调就有依据了。

image-20260408083302112

数字面板里的几个实用信息

智能事件会帮你捕捉关键操作的会话数，结账了多少、登录了多少、订购成功了多少，不用自己埋点，Clarity 自动识别。

流量来源能看到用户从哪来。我这里 Google 带来的最多，还有 Google HK、站内自跳转、accounts.google（登录跳转）、Stripe 结账页、GitHub，各渠道一眼就清楚了。浏览器分布也有，Chrome 占了 70%，Edge 16%，手机浏览器加起来不到 15%，说明我的用户主要是桌面端，移动端适配可以放低优先级。

Clarity 流量来源与浏览器分布

热门页面按访问量排下来，第一名 283 个会话，一眼就能看出哪些页面最有价值。每个页面后面都有录屏和热力图的快捷入口，点进去直接看那个页面的用户行为，省了再去筛选的时间。

Clarity 顶级页面访问数据

强烈点击，找 UI 问题最快的方式

热力图里有一个点击类型筛选，默认显示全部点击，切换到"强烈点击"就能看到用户在哪里反复猛点。出现这种情况，要么是页面响应慢、要么是用户以为能点结果没反应，总之说明那里有问题。

旁边还有"无效点击"，专门标记用户点了但没有任何反应的区域，用来找死链接或者样式像按钮但实际不可点的元素。

Clarity 强烈点击筛选

录制那边的筛选器也很实用，能按设备、来源、会话时长等条件过滤。里面有一个"购买"字段，选"是"就只看完成了购买的用户录屏，选"否"就看没买的。两边对比一下，差在哪里一目了然。

Clarity 购买筛选器

截图给 Claude Code，性能分数提上来了

Clarity 里有性能概述，按页面列出详细的评分，哪些需要改进、哪些已经不错，写得比较清楚。

我把这个截图扔给了 Claude Code，让它帮我分析哪里有问题、然后直接改。我当时的 LCP 是 4.5 秒，评级"差"，INP 210ms 需要改进，CLS 倒是 0.062 良好。整体性能分 75 分，将近一半的页面浏览量处于需要改进状态。

Claude 看完截图直接给了优化方案，跑完之后分数提上来了不少。

Clarity 性能概述评分

对独立开发者来说这个组合挺好用的，不用懂 Core Web Vitals 的细节，把截图给 Claude 就能搞定。

完全免费

Clarity 一直是免费的，没有付费套餐，所有功能都能用。微软做的，上线快五年了，还在持续更新。

今年还新出了一个 Bot 活动面板，能看到哪些 AI 爬虫在抓你的网站，GPTBot、Google Bot、Perplexity 都能看到，做 SEO 的话挺有参考价值的。

Clarity 还出了官方的 MCP Server，装到 Claude Code 里之后可以直接用自然语言查数据，比如"上周哪个页面跳出率最高"，Claude 直接给答案，不用自己去后台翻。配置也不复杂，三步搞定。

第一步：拿到 API Token

进入 Clarity 项目 → Settings → Data Export → Generate new API token，起个名字保存，token 只显示一次，保存好。

image-20260408165222418

第二步：配置到 Claude Code

终端运行这一行：

claude mcp add -s user clarity-mcp-server npx @microsoft/clarity-mcp-server --clarity_api_token=你的token

第三步：重启 Claude Code

重启后输入 /mcp，列表里看到 clarity-mcp-server 就配置成功了。

image-20260408165647160

配好之后就可以直接问 Claude，"帮我看看过去7天哪个页面跳出率最高"，Claude 直接去拉数据给你。

注意 token 是项目级别的，在哪个项目里生成的就只能查那个项目的数据。如果你有多个站，需要分别去每个项目生成对应的 token。

如果你有自己的网站，装 Clarity 很简单，一段 JS 搞定，分析数据很好用，推荐。