如何制作个人网站?
摘要:天河网站建设制作,自己想做一个网站,wordpress 网络图片,企业 手机网站前文对前端监控进行了简单介绍,起因是因为当前做的一个需求,老板要看当前项目的uv、pv信息。其实这是
天河网站建设制作,自己想做一个网站,wordpress 网络图片,企业 手机网站前文对前端监控进行了简单介绍#xff0c;起因是因为当前做的一个需求#xff0c;老板要看当前项目的uv、pv信息。其实这是非常简单的统计。 但在最开始接到这个需求#xff0c;却难倒我了。 现在进行简单的复盘#xff0c;记录一下实现方法。
一、数据记录
用户行为从大…前文对前端监控进行了简单介绍起因是因为当前做的一个需求老板要看当前项目的uv、pv信息。其实这是非常简单的统计。 但在最开始接到这个需求却难倒我了。 现在进行简单的复盘记录一下实现方法。
一、数据记录
用户行为从大类上主要分为两个方面
① 页面浏览行为 ② 操作行为
统一埋点函数
基于此共识首先封装一个统一的埋点函数代码如下
export const captureMessage async (type: browse | action, content: string, title?: string) {// 省略了判断开发环境时在本地打印的代码const data { type, content, title };// 这里调用的是统一封装的请求函数await post(userlog, data, { Content-Type: application/json; charsetutf-8 });
};
然后采用的埋点方式是在上文中提到的前端监控简介_艾米栗写代码的博客-CSDN博客手动埋点。
页面浏览埋点
我们最初的埋点比较简单主要是对 url 的埋点。而在 vue 中url 的跳转主要是通过路由实现的因此只需要在全局检测路由的变化。代码如下 watch(() route.fullPath, () {const title (route.meta?.title ?? ) as stringconst url: string (route as any).fullPath || route.pathcaptureMessage(browse, url, title)})
操作行为埋点
而操作行为的埋点同理只需在需要监控的操作事件响应函数中插入captureMessage 函数即可。
二、打补丁
问题分析
以上是我们最开始的记录方式原则上这样记录是能够满足后续的分析需求的。
注意这也只是理论上可行。 但后续产品提出要分析某个页面下不同子页面的pv、uv 情况。但项目当前的情况是这个页面下的URL极其混乱无法进行统一分析。为了满足分析需要需要对这个页面下的 URL 进行统一化。
具体说来页面的URL 为 /report。
进来之后的初始页面默认为子页面 1这里我们设 子页面1名称为 table1.
在切换报表时其 URL 会响应为子页面名称 即 /report/tableName。
但除此之外该页面下还存在另外三种URL类型。
类型1ID 类的 URL 是报表最开始的迭代方式其ID 为 数字即 /report/numberID
类型2模板类的URL 记录的是某一子页面下的用户选择项。其模板ID通过MD5生成URL 为 /report/templateID。
类型3具体信息类从其他页面跳转到该子页面携带的是具体请求信息。其URL 为
/report?query***(query 为对象进行 encode 编码)
为了满足报表统计的需要需要对不同URL进行统一而统一的方式为在 当前URL 的后面加上 /table/tableName 。
即
/report -- /report/table1
/report/tableName -- /report/tableName (保持不变)
/report/numberID -- /report/numberID/table/tableName
/report/templateID -- /report/templateID/table/tableName
/report?query*** -- /report?query***/table/tableName
numberID和 templateID 对应的tableName在对应的数据库中可以查询到。
