type
status
date
slug
summary
category
tags
create_time
May 8, 2025 05:33 PM
icon
password
my_create_time
✅ 什么是 Microsoft Clarity？
Microsoft Clarity 是一款免费的网站用户分析工具，提供以下功能：
- 热图分析（Heatmaps）
- 会话回放（Session Recordings）
- 点击与滚动跟踪（Click & Scroll Tracking）
- JavaScript 性能检测
- 隐私保护（自动模糊敏感信息）
Clarity 特别适合不想使用 Google Analytics（Google国内无法使用，而百度的太拉跨） 的站长，或是希望补充更多可视化行为数据的用户。
🧩 接入 Clarity 的前提条件
你需要：
- 一个已上线的个人网站（静态站或动态站均可）
- 能够访问和修改网站的
<head>段落（例如使用 HTML、Vue、React、WordPress 等）
- 一个 Microsoft 账户（Outlook、Hotmail 均可）
🔧 第一步：注册 Clarity 并创建项目
- 使用 Microsoft 账户登录
- 点击 左侧的 “新建项目”
- 填写以下信息：
- 名称：你的网站名称（可自定义）
- 网站 URL：你网站的完整 URL（例如 https://example.com）
- 网站行业：你网站服务的行业
- 创建完成后，Clarity 跳转到安装界面，可以选择安装方式，这里演示手动安装。
- 点击获取跟踪代码，会提供如下一段
js的集成代码：
🧾 第二步：将 Clarity 代码嵌入你的网站
将以上代码粘贴至你网站的
<head> 标签内，建议放在 <meta> 标签之后，</head> 之前。
如下：🧪 第三步：验证是否接入成功
- 回到 Clarity 项目后台
- 等待几分钟后刷新界面
- 若出现“记录会话中”，说明接入成功
- 浏览你的网站，几分钟后你就能看到点击热图与会话数据
PS：另外如果是用的第三方框架建站的接入会更容易些，如博主使用的是
NotionNext，只需要配置项目 ID（创建完项目进入详情可查看）到NEXT_PUBLIC_CLARITY_ID 环境变量即可。
🔍 实际效果演示：Clarity 接入后能看到什么？
Clarity 成功接入网站后，在后台可以查看到访客数量、用户在网站上的完整访问路径等各种信息。
有关文章的任何疑问，欢迎您在底部评论区留言，一起交流~
若您认可我的内容，欢迎 请我喝杯咖啡~
- 作者:lusyoe
- 链接:https://blog.lusyoe.com/article/how-to-integrate-clarity
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
