聊聊前端埋点 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,今天的分享很简单,下班!

相关推荐
Zuckjet_15 分钟前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_8638014621 分钟前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店2 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown2 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip3 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿4 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.5 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰5 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息5 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
卷Java5 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot