[2026-05-13] [功能] [Microsoft Clarity集成] - 论坛用户行为分析工具集成（废弃不再使用）

IsaacZ

1、问题缘起

为了深入了解用户在论坛中的实际使用行为，发现发帖、回帖、导航等环节的体验痛点，以及验证SEO改版效果，需要引入一款用户行为分析工具。

讨论过程中提出的相关问题：

问题	结论
是否需要注册账户？	是，需要微软账户登录Clarity官网创建项目，获取唯一的Project ID
集成到所有页面应修改哪个模板文件？	header_common.htm（全局公共头部），而非header.htm
手机模板是否需要单独处理？	是，手机版模板路径为template/default/touch/common/header_common.htm，需分别添加
header_common.htm中没有</head>标签，代码放哪里？	直接放在文件末尾即可（该文件内容最终输出在<head>内）
注释文字是否会在网页源码中呈现给用户？	是，HTML注释会完整暴露给用户查看源码，但无安全风险

---

2、解决方案

（1）简要技术分析

在论坛所有页面（PC端和手机端）的<head>区域内，异步加载Microsoft Clarity的跟踪脚本，通过Project ID关联到Clarity后台项目，实现用户会话录屏、热力图等数据采集。

（2）修改文件列表

操作	文件路径（完整路径）
新增代码	/template/default/common/header_common.htm
新增代码	/template/default/touch/common/header_common.htm

（3）关键作用代码段

文件：/template/default/common/header_common.htm（PC端）
文件：/template/default/touch/common/header_common.htm（手机端）

在文件末尾添加以下代码：

1. <!-- Clarity v1 -->
   
2. <script type="text/javascript">
   
3.     (function(c,l,a,r,i,t,y){
   
4.         c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
   
5.         t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
   
6.         y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
   
7.     })(window, document, "clarity", "script", "XXXXXXXXXXX");
   
8. </script>
   

复制代码

注：XXXXXXXXXXX需替换为Clarity后台获取的真实Project ID

---

3、最终实现效果

指标	效果
PC端覆盖	✅ 所有桌面端页面均已集成
手机端覆盖	✅ 所有移动端页面均已集成
数据上报	✅ 安装后约1-2小时内即捕获到用户访问录像
与WAF兼容性	✅ 雷池WAF未产生拦截，正常工作
性能影响	✅ 脚本异步加载，未感知到性能下降

可观测的数据类型：

• 用户会话录屏回放
• 点击热力图 / 滚动深度图
• AI智能洞察（Copilot）
• AI流量识别（ChatGPT/Claude等来源标记）
  

---

4、重要技术沉淀或踩坑点

需更新到固化摘要的内容：

无。Clarity为第三方分析工具，不影响论坛核心功能配置，无需纳入env-base固化摘要。

其他技术沉淀：

• 模板文件选择：Discuz!中要全局添加<head>内容，应修改header_common.htm而非header.htm
• 手机版模板路径：默认手机版位于template/default/touch/目录，需与PC端分别修改
• HTML注释暴露：添加的任何HTML注释（包括日期、功能说明）都会在网页源码中对用户可见，如不希望暴露可省略注释或使用精简版
  

---

5、进一步优化的可能性或尚未实现的构想

构想	说明	优先级
采样率调整	目前为100%录制，如流量增大后可调整为50%或更低以降低数据量	低
敏感数据脱敏配置	Clarity支持自定义脱敏规则（如特定CSS类名不录制），可进一步配置保护隐私	低
与论坛现有日志关联	将Clarity录屏ID与论坛访问日志关联，便于深度排查具体用户行为	中（需二次开发）