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

前言

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

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

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

展示

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

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

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

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

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

js 复制代码
import Clarity from '@microsoft/clarity';
const projectId = 'xxxxxxxx';
Clarity.init(projectId);

完整接入流程

  1. 添加一个项目

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

  1. 选一种方案接入,一般就 npm 了
js 复制代码
// 接入到起始文件中,index.js / main.js 等
import Clarity from '@microsoft/clarity';
const projectId = 'xxxxxxxx';
Clarity.init(projectId);
  1. 在设置中找到项目id,替换掉刚才的 projectId
  1. 到这就完工了,不过检查一下项目运行时有没有正常触发埋点(埋点为 collect)

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

略微配置

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

也就是调用了一下 setTag 方法

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

over,今天的分享很简单,下班!

相关推荐
二川bro1 分钟前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹11 分钟前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风15 分钟前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱22 分钟前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年22 分钟前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵32 分钟前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_36 分钟前
分片上传-
前端·javascript·状态模式
东北南西40 分钟前
手写React状态hook
前端·javascript·react.js
诗书画唱41 分钟前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript
lypzcgf42 分钟前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台