Microsoft Clarity无法解析CSS及上传背景图至热力图，如何修复？

API 探路者

2026-7-22

修复Microsoft Clarity无法解析CSS及背景图片的问题

排查与修复步骤

调整Clarity脚本加载时机
确保脚本在页面CSS加载完成后初始化。若脚本过早加载（比如放在<head>顶部且未等待资源就绪），会导致无法抓取完整样式和背景图。可以将脚本移至</body>标签前，或添加DOM就绪监听：

document.addEventListener('DOMContentLoaded', function() {
  (function(c,l,a,r,i,t,y){
    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", "YOUR_PROJECT_ID");
});

验证资源可访问性
Clarity需要直接访问CSS文件和背景图资源，检查以下项：
- 确认资源未被防盗链拦截，需允许Clarity爬虫IP访问资源。
- 背景图使用绝对路径，避免路径解析错误。
- 若CSS是通过JS动态生成的，Clarity可能无法抓取，建议将核心样式放在静态CSS文件中。
清除缓存并重新采集
进入Clarity后台对应项目的「设置」-「数据采集」，手动触发页面重新抓取；同时清除浏览器本地Clarity存储（通过开发者工具Application面板操作），再重新生成会话记录。
更新Clarity脚本版本
旧版本可能存在样式解析bug，前往Clarity官网复制最新嵌入脚本替换现有代码。
检查内容安全策略(CSP)
若网站设置了CSP，需允许Clarity域名加载脚本并读取资源，在CSP规则中添加：
```
script-src 'self' https://www.clarity.ms;
img-src 'self' data: https://www.clarity.ms;
style-src 'self' 'unsafe-inline' https://www.clarity.ms;
```
注：unsafe-inline仅必要时添加，优先使用哈希或nonce值替代。