聊聊前端埋点 clarity：我会一直视监你... 永远...

前言

最近想简单看一下项目的使用情况。做产品切忌自嗨，写了很久的模块，结果只有自己用，还更新的挺起劲，这就无意义了。

为了防止这种情况，我们一般会选择接入一个埋点平台，进行页面点击、曝光等操作的上报，最后对这些数据进行分析，就可以知道具体的情况了。

不过今天暂时不聊这种传统的埋点，介绍一下微软的埋点之作：clarity

展示

如图所示，这是一个正常的用户窗口，进行了一些简单的点击操作

与此同时，另外一边，我们在埋点 平台 ，居然能看到用户正在做什么？！

不是哥们？连轨迹都给你录下来了，看完这个功能，我脑子里只有这些表情包

同时也深深敬佩微软的工程师，如此复杂的监控页面，是怎么通过几个埋点事件就可以完美呈现的。只能想到个dom 快照，但深究起来真是半点不懂。

更夸张的是，接入只需要三行代码。是的，你只需要在项目里加入这三行代码，就可以视监你的用户了。

import Clarity from '@microsoft/clarity';
const projectId = 'xxxxxxxx';
Clarity.init(projectId);

完整接入流程

1. 添加一个项目

clarity.microsoft.com/projects?sn...

2. 选一种方案接入，一般就 npm 了

// 接入到起始文件中，index.js / main.js 等
import Clarity from '@microsoft/clarity';
const projectId = 'xxxxxxxx';
Clarity.init(projectId);

3. 在设置中找到项目id，替换掉刚才的 projectId

4. 到这就完工了，不过检查一下项目运行时有没有正常触发埋点（埋点为 collect）

搞定，非常简单，之后我们就可以直接在平台视监用户了

略微配置

更详细的笔者还没研究，且分享一个 case，我们在录制的时候往往需要用户的信息，来知道是谁进行了操作，我们可以通过设置标签来达成这一效果。

也就是调用了一下 setTag 方法

export const initClarity = (user: string) => {
  Clarity.init(projectId);
  Clarity.setTag('user', user);
};

over，今天的分享很简单，下班！