十五、前端如何优雅地做数据埋点

1,220 阅读1分钟

1.背景

埋点可以获取用户的喜好和交互习惯,从而优化流程,进一步提升用户体验,提高转化率。

2.埋点上报的方式

手动埋点;
可视化埋点;
无痕埋点: 也叫自动埋点、全埋点;即对全局所有事件和页面加载周期进行拦截埋点。

3.一般对哪些数据做埋点?

点击埋点:统计用户在页面浏览过程中触发的点击事件;如按钮、导航或者图片的点击次数。
页面埋点: 统计用户进入或离开页面的信息,如页面浏览次数(pv),页面浏览人数(uv),页面停留时长,设备信息等。
曝光埋点: 统计具体元素是否得到有效曝光

4.需求分析

埋点与业务尽量分离,埋点逻辑更应是独立于业务的
尽量不对业务代码有侵入
约定规范,通过统一接口来处理埋点逻辑

5.实现按钮埋点

image.png

image.png

image.png

image.png

image.png

6 统计页面停留时长

image.png

router.beforeEach((to, from, next) => {
    countTime(to, from)
    next()
})

image.png

7 曝光埋点:

Intersection observer,用来检测元素是否则在视窗内

8 埋点数据的上传

image.png