数据埋点

背景

实习开会的时候，说需要一些用户数据，提到埋点，此时我并不知道什么是埋点，故会后阅读了一些文章，这篇文章作为记录与总结。

为什么需要数据埋点

对于产品，我们需要关注用户的行为

用户在产品里主要做什么操作、停留多久、访问几次
用户点击率占比如何，会不会出现某些功能设计对于用户而言是无效的
用户在核心使用流程上是否顺畅，页面反馈是否正常友好
可能有哪些潜在的用户的功能需要更新

要收集这些数据就需要进行埋点。

总的来说：收集数据，分析数据，评估项目质量和重要性，指明产品优化方向。

前端埋点要考虑哪些方面

用户行为

用户行为就是在网页应用中进行的一系列操作，但用户的操作有很多种，都需要记录下来是不可能的，一般需要记录用户的以下几种行为：

用户浏览页面次数，PV（Page View）
- 用户每次访问网站中的一个页面就被记录为 1 个 PV，多次访问同一个页面，访问量就会累计
页面浏览用户数，UV（Unique visitor）
- 通过网络正常访问页面的使用者，通常一台电脑客户端或一个用户账号为一个访客，一般同一个客户端或用户账号在 24h 内多次访问只会被记录为 1 个 UV，计算策略视具体情况而定
用户点击按钮次数
- 以上两种可以认为是 **自动式触发埋点**，而点击按钮次数就属于是 **互动式触发埋点**，便于去了解这个功能按钮的使用情况

还有如停留时长（Time On Site）和跳出率（Bounce Rate）等

错误警告

页面中代码运行产生的错误，可能会导致用户核心操作流程被中断，为了避免大量用户受到影响，我们需要获取 生产环境的错误数据，这样才能便于开发者及时进行修复。

通常来讲代码中的错误会包含以下几大类：

全局错误，即未被捕获的错误
局部错误，即通过 try...catch、promise.then、promise.catch 等捕获的错误
接口请求错误，即在二次封装请求 API 中进行请求和接收响应时的错误
组件级错误，即使用 Vue/React 组件时发生的错误

页面性能

页面性能其实也是前端性能优化中一个需要考虑和优化的点，毕竟如果一个网站老是发生 白屏、交互卡顿、页面资源加载时间长 等问题，肯定是没办法留住用户的，特别是用户的真实环境各不相同，如 Windows x、MACOS、Android、iOS 等，更加需要统计和收集相关数据，便于进行集中优化处理，提升用户体验。

首次绘制（First Paint，FP）
- 在渲染进程确认要渲染当前响应资源后，渲染进程会先创建一个空白页面，通常把创建空白页面的这个时间点称为 First Paint，简称 FP
- 所谓的 白屏时间 其实指的就是创建这个空白页面到浏览器开始渲染非空白内容的时间，比如页面背景发生变化等
首次内容绘制（First Contentful Paint，FCP）
- 当用户看见一些 “内容” 元素被绘制在页面上的时间点，和白屏是不一样，它可以是 文本 首次绘制，或 SVG 首次出现，或 Canvas 首次绘制等，即当页面中绘制了第一个像素时，这个时间点称为 First Content Paint，简称 FCP
首屏时间 / 最大内容绘制（Largest Contentful Paint, LCP）
- LCP 是一种新的性能度量标准，LCP 侧重于用户体验的性能度量标准，与现有度量标准相比，更容易理解与推理，当首屏内容完全绘制完成时，这个时间点称为 Largest Content Paint，简称 LCP
- 最大内容绘制应在 2.5s 内完成
首次输入延迟（First Input Delay, FID）
- FID 测量的是当用户第一次在页面上交互的时候（点击链接、点击按钮 或 自定义基于 js 的事件），到浏览器实际开始处理这个事件的时间
- 首次输入延迟应在 100ms 内完成
累积布局偏移（Cumulative Layout Shift, CLS)
- CLS 是为了测量 视觉稳定性，以便提供良好的用户体验
- 累积布局偏移应保持在 0.1 或更少
首字节达到时间（Time to First Byte，TTFB）
- 指的是浏览器开始收到服务器响应数据的时间（后台处理时间 + 重定向时间），是反映服务端响应速度的重要指标
- TTFB 时间如果超过 500ms，用户在打开网页的时就会感觉到明显的等待

神策数据埋点

文档：https://www.sensorsdata.cn/2.0/manual/js_sdk_faq.html

安装依赖

1	`npm install --save sa-sdk-javascript`

项目配置

在 utils 文件夹下新建 sensors.js，配置单页应用的固定代码，（非单页应用不需要加上配置对象： is_track_single_page: true）。

import sensors from 'sa-sdk-javascript'
sensors.init({ // 神策系统配置
            server_url: 'http://shence.ap-ec.cn:8106/debug', // 数据接收地址
            is_track_single_page: true, // 单页应用页面浏览事件采集(url改变就触发)
            use_app_track: true,
            show_log: false, // 控制台显示数据开
            heatmap: { // 热图设置 default开启 not_collect关闭（详细配置解释看官方文档）
                clickmap: 'default', // 点击热图，收集点击事件
                scroll_notice_map: 'default', // 视区热图，收集页面区域停留时间
            }
        })
 
sensors.quick('autoTrack') // 首次触发页面加载事件 $pageview
export default sensors

全局注册神策埋点

在 main.js 文件中，将神策埋点信息挂载到 vue 实例下，操作如下：

// vue2 的挂载
import Vue from 'vue'
import sensors from '@/utils/sensors.js'
Vue.prototype.$sensors = sensors

// 使用
this.$sensors

// vue3 的挂载
import App from './App.vue'
import sensors from '@/utils/sensors.js'
const app = createApp(App)

app.config.globalProperties.$sensors = sensors

// 使用
const currentInstance = getCurrentInstance()
const { $sensors } = currentInstance.appContext.config.globalProperties

埋点操作

1.自动采集事件埋点

主要用于主动触发页面浏览事件，一般只在页面配置后调用一次即可。

1	`sensors.quick('autoTrack')`

2. 事件埋点（页面上事件用这个）

事件名+传递参数（必须是对象）+回调函数

1	`this.$sensors.track('ViewSupplyChainDetails'[, param][,callback])`

3.公共属性埋点

const param = {
    platform_type: 'WEB', // 平台类型：App，H5，Web
    app_name: '沐甜商城网站', // 应用名称
    product_line: '白糖',
}
 
sensors.registerPage(param) // 设置公共属性

4.给点击事件加触发埋点，使用vue的自定义指令

/**
 * 指令：v-saclick
 * 使用示例：v-saclick="{clickName:'XXX',clickData:{params1:'XXX',params2:'XX'}}"
 * clickName：埋点函数名
 * clickData | Object   params当前埋点函数所需参数
 */
const saclick = Vue.directive('saclick', {
  bind: (el, binding) => {
    el.addEventListener('click', () => {
      const clickName = binding.value.clickName // 携带的数据
      const data = binding.value.clickData || {} //接收传参
      sa.track(clickName, data)
    })
  }
})
 
export { preventReClick, saclick }