什么是网站用户行为分析工具 Microsoft Clarity？如何安装关联网站？

Clarity 无需付费，用户可免费使用，据微软介绍，将其免费提供的原因之一是 Clarity 使 Microsoft 能够处理大量有关用户行为的匿名数据以获取见解并改进为许多产品和服务提供支持的机器学习模型。

什么是 Microsoft Clarity？

Clarity 是微软 Microsoft 在 2020 年 10 月推出的一款用户行为分析工具，提供丰富的功能（如热图，会话录制和互动洞察等），支持所有执行 JavaScript 的浏览器，可帮助了解你网站/移动应用上的用户行为。安装设置完成后，Clarity 就会自动捕获视觉快照（Visual snapshots）和用户交互行为（User interactions）（例如鼠标移动、点击、滚动等），用于捕获此信息的代码是开源的，可在 GitHub 上获取。据 Microsoft Clarity 团队介绍，Clarity 每天处理数百万次用户会话（User sessions），这些数据随后被发送到 Clarity 的后端系统，经过复杂的处理流程后，最终存储在 ClickHouse 中，为 Clarity 的仪表盘和可视化报告提供支持。

Microsoft Clarity 最初是微软用于了解 Bing.com 用户行为的内部工具，2020 年刚推出的时候，Clarity 专注于网站分析，但不支持移动应用（Mobile apps），2023 年 4 月微软推出了 Clarity for Mobile Apps，将 Clarity 的功能扩展到了浏览器之外。使用适用于 iOS 和 Android 的轻量级 SDK，Clarity 现在能够提供统一的用户行为视图，跨设备统一查看用户行为。

Clarity 功能介绍

热度地图（Heatmap）

热度地图（Heatmap）是一种可视化工具，可帮助分析有关用户如何与网站交互的聚合信息（Aggregated information）。Clarity 追踪所有访问者在移动设备、台式电脑和平板电脑上的点击和滚动，并自动生成热图，直观地呈现用户行为。

Clarity 热图使用色阶表示来更好地了解用户与你网站的交互：

• 红色表示用户互动较多、最受欢迎的热门区域（Hot areas）
• 蓝色表示用户交互最少、最不受欢迎的冷门区域（Cold areas）
  
  

登录 Clarity 后台仪表板并点击热度地图后，Clarity 就会为热门页面生成热图。这些页面根据最高会话数进行排序，并显示其页面标题、URL 和访问计数。你也可以调整筛选器（Filters）和区段（Segments）以根据自己的需求进行查看。

热门页面列表有一个 URL 参数切换按钮，切换 URL 参数并选择 URL 时，可以查看与该 URL 及其参数完全匹配的热图。关闭后，则会看到一个以指定值开头的热图，带或不带参数。

Clarity 中有五种主要类型的热图：点击热图、滚动热图、注意力热图、区域热图和转化热图（仅 Shopify 可用）。每种热图都能从独特的角度展现用户在网站上的行为，热图数据最多可保留 13 个月。热图分析的屏幕截图是随机捕获的示例图像，可能因设备而异，每个热图的页面浏览量限制为 100,000 次，如果你的页面有更多浏览量，Clarity 会抽样 10 万次页面浏览。

Clarity 热图由聚合数据（Aggregated data）生成，据微软介绍，传统点击热图记录鼠标点击的 X 和 Y 坐标位置，所有在这些坐标上的点击都会累积热度强度（Heat intensity），然后将其叠加到静态网站呈现上。然而，这种方法对于不同的屏幕分辨率、动态 HTML 元素、单页应用或下拉菜单的扩展性不佳。

相比之下，Clarity 采用了一种基于网站 DOM 的智能 HTML 元素检测技术。对于点击热图，Clarity 可以识别特定标签、CSS 类和父节点上的点击行为，并按元素进行聚合。这种方法允许相对于这些元素而不是 X/Y 坐标绘制热图。对于滚动热力图，Clarity 会综合考虑页面长度和用户在多个页面上的滚动行为。

需要注意的是，Clarity 的热图是动态的，它根据不同时间点存在的元素呈现交互行为，这种灵活性可实现页面生命周期各阶段点击行为的可视化呈现。

点击热图（Click heatmaps）

点击热图能帮助你确定用户在页面上点击的位置（包括非链接区域），了解用户点击最多的是页面的哪些部分。在 PC 端，Clarity 追踪用户点击行为（User clicks）；在移动/平板设备上，Clarity 则追踪用户轻触操作（User taps）。

Clarity 点击热图有以下不同类型：

• 全部点击（All clicks）：

  显示页面上所有类型的用户点击，包括无效点击、强烈点击、首次点击和最后点击

• 无效点击（Dead clicks）：

  显示页面上没有响应的点击

• 强烈点击（Rage clicks）：

  显示用户在短时间内快速点击同一小区域的位置

• 错误点击（Error clicks）：

  显示紧接在 JavaScript 错误之前发生的点击

• 首次点击（First clicks）：

  显示用户在页面上的首次点击

• 最后点击（Last clicks）：

  显示用户在页面上的最后点击
  
  

左侧面板包含按点击次数排序的元素，点击热图显示了页面上点击次数最多的元素排名。选择任意点击的元素即可查看点击次数（点击百分比）。

滚动热图（Scroll heatmaps）

Clarity 滚动热图追踪用户在页面上向下滚动的程度，显示用户平均滚动的距离。提供以下信息：

• 滚动至网页特定区域的用户百分比。
• 平均首屏折线（Average fold）：表示在所有访客、所有屏幕尺寸下，用户开始滚动前页面首屏可见区域底部的平均位置。即该折线以上的内容，是平均情况下，用户无需滚动就能看到的内容；该折线以下的内容，需要用户滚动才能看到。通过计算平均首屏折线，可直观展示用户在向下滚动页面前平均能看到的内容范围（平均首屏内容）。
  
  

当将鼠标悬停在滚动地图上时，可以查看到达页面或页面组相应位置的用户的精确百分比。

借助 Clarity 滚动热图的数据，可直观了解用户滚动查看的深度，有助于确定用户是否看到了最重要的内容，以及辅助参考应该在何处放置重要的 CTA 行动号召元素等。

区域热图（Area heatmaps）

据 Clarity 团队介绍，由于区域热图在技术上属于“点击热图”的一种，因此经调整后，区域热图现在的新位置位于“点击热图”模块的左侧面板中，

将鼠标悬停在热图上即可选择一个区域，新区域的点击率是动态计算的，

在编辑模式下选择新区域时，它将显示在左侧面板中，你可以通过选择删除图标来取消选择此区域。

转化热图（Conversion heatmaps）

转化热图目前仅 Shopify 网站可用，

与显示用户点击、滚动或移动位置的传统热图不同，转化热图揭示了哪些元素直接促成了转化。例如，某个产品图片的转化率为 2.4%，这意味着点击该元素的会话中，有 2.4% 最终促成了购买，你可以直观了解哪些点击能带来最佳转化效果，以及页面哪些部分效果欠佳等。

注意力热图（Attention heatmaps）

注意力图可帮助你了解用户在页面哪些部分停留的时间最长，揭示哪些内容更能吸引用户的注意力，以及页面哪些区域需要改进。

将鼠标悬停在注意力热图上，可以查看页面特定位置的数据。平均用时是指用户通常在页面的特定部分停留的时长；会话时长百分比则表示该停留时间与整体平均会话时长的比较情况。

会话录制（Session Recordings）

会话录制功能以一种可视化的方式呈现用户在整个会话（Session）期间的行为。通过 Clarity 的内嵌播放器（Inline Player），会话录制允许你观看单个用户会话的录像，回放用户操作，从而直观地了解访客是如何浏览你的网站/应用程序，可帮助分析：

• 你的网站（Site）或应用程序（App）有哪些可以改进的地方
• 访客是否按预期浏览你的网站或应用程序
• 访客认为哪些内容是关键内容
• 访客遇到的挫折点在哪里，等等
  
  

会话录制控制面板分为 3 个部分：

• 会话列表（Session list）：

  位于左侧区域，默认按时间顺序最新排序。每张卡片代表一个录制会话，包含会话详情如会话入口页（Entry Page）和会话退出页（Exit Page）、引荐网址、点击次数、用户 ID、设备类型等信息。每个录制会话都有一个包含相关元数据的会话卡片，帮助你选择要查看的会话，选择卡片即可播放相应的会话录制内容。其他功能包括基于 AI 的摘要生成。

• 内嵌播放器（Inline player）：

  可以使用视频控件浏览录制内容。Clarity 还提供收藏、分享、添加标签和查看热图等功能，所有操作均可在同一屏幕上完成。

• 筛选器和区段（Filters and segments）：

  根据选择的筛选器和区段，自定义查看会话录制内容。
  
  

会话并非用户体验的实际录制，而是通过捕获 HTML 和用户操作实现的逐步可视化重构。Clarity 会记录用户在浏览网站时看到的所有页面信息（DOM 内容）以及其采取的操作（如鼠标移动、单击、滚动等）。

借助 AI 驱动的自然语言提示，用户也可以直接向 Clarity 询问需要了解的网站数据信息，

登录 Clarity 后台并选择相应的 Clarity 项目，然后点击页面右上角位置的 Copilot 图标，

接着页面会打开一个聊天窗口，用户可以选择任何预先填充的提示或使用 Copilot Chat 提问并查看即时回复，

Clarity 利用 ChatGPT 内置的相同技术，并将其应用于你的网站数据，输入你需了解的问题，Copilot 就会根据其对你 Clarity 项目仪表板分析的理解生成回复。

Clarity 注册及追踪代码安装

要开始使用 Clarity，需要先注册账户，

创建新项目后，接着还需要在网站上安装追踪代码才能开始使用 Clarity，

安装 Clarity 的方法有三种：

• 在第三方平台上安装
• 手动安装
• 使用 NPM 安装
  
  

首先，可以在第三方平台上安装 Clarity 追踪代码，例如 Shopify，SquareSpace，Wix 和 WordPress 等，在 Clarity 受支持的第三方平台集成列表中选择你网站当前使用的平台，然后按平台上的设置说明进行操作。

最后，也可以选择手动安装，获取 JavaScript 追踪代码，复制代码并将其粘贴到网站的 < head > 部分，

将代码正确添加至你的网站后，通常 2 小时内可在后台仪表盘中看到数据，

此外，项目设置完成后，向下滚动还会看到有一个 Clarity 导览（Clarity tour）清单，有助于你在完成设置时探索 Clarity 的功能。

验证 Clarity 是否正常运行

在网站设置追踪代码后，有两种方法可以验证 Clarity 是否已正确安装，

第二种方法是检查与站点交互时对 https://www.clarity.ms/collect 的 POST 请求，

访问已设置 Clarity 追踪代码的站点，鼠标右键单击网站并选择“检查”，转到 “网络” 选项卡，然后选择“collect” 便可以查看对应的 POST 请求。

以上便是网站用户行为分析工具 Microsoft Clarity 安装使用介绍。