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

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript