vue项目进行前端埋点，记录页面停留时间

数据埋点在现在的项目开发中都是不较比常见的，尤其是在电商公司，数据的统计分析尤为重要，通过数据分析可以提升用户的购买体验，方便运营和产品调整销售策略等等。埋点就是网站分析的一种常用的数据采集方法。

目前主流埋点方案

1. 代码埋点
2. 可视化埋点
3. 无埋点

注：关于埋点方式的详细介绍可以看我的另外一篇文章： 常见的数据埋点方式介绍

本文主要介绍了代码埋点的方案

代码埋点分为 命令式埋点 、声明式埋点

一、命令式埋点

命令式埋点，顾名思义，开发者需要手动在需要埋点的节点处进行埋点。如点击按钮或链接后的回调函数、页面ready时进行请求的发送。

// 页面加载时发送埋点请求
$(document).ready(function(){
   // ... 这里存在一些业务逻辑
   sendRequest(params);
});
// 按钮点击时发送埋点请求
$('button').click(function(){
   // ... 这里存在一些业务逻辑
   sendRequest(params);
});

可以很容易发现，这样的做法很有可能会将埋点代码侵入业务代码，这使整体业务代码变得繁琐，容易出错，且后续代码会愈加膨胀，难以维护。所以，我们需要让埋点的代码与具体的业务逻辑解耦，即 声明式埋点 ，从而提高埋点的效率和代码的可维护性。

二、声明式埋点

点击埋点：

自定义指令实现统计用户在应用内的每一次点击事件，如新闻的浏览次数、文件下载的次数、推荐商品的命中次数等。

在项目入口文件 main.js 中配置我们的自定义指令

Vue.directive('log', {
  bind(el, binding) {
    el.addEventListener('click', () => {
       Axios.post  //发送请求
    }, false);
  }
});

组件中配置使用v-log指令，加上详情参数就可以完成用户轨迹记录。

// caption表示埋点的模块；paras表示用户的行为
<button v-log="{caption:'登录页', paras: '用户点击验证码发送'}">发送验证码</button>

页面埋点：

统计用户进入或离开页面的各种维度信息，如页面浏览次数（PV）、浏览页面人数（UV）、页面停留时间、浏览器信息等。

使用 vue-router 的 beforeEach 或者 afterEach 钩子上报数据，具体使用哪个最好是根据业务逻辑来选择。

import router from './router'
let startTime = Date.now()
let currentTime
router.beforeEach((to, from, next) => {
  if (to) {
  	// 第一步：页面跳转后记录一下当前的时间 currentTime
  	currentTime = Date.now()
  	// 第二步：计算 currentTime - startTime 的 差值 
    console.log('用户由 ', from.name, ' 页面 跳转到 ', to.name, ' 页面，在 ', from.name, ' 页面停留了 ', currentTime - startTime, '毫秒。转换成秒数约为：', parseInt((currentTime - startTime) / 1000))
    // 通过计算currentTime - startTime 的 差值 之后，再上报数据
    ...
    // 第三步：每次都要初始化一下 startTime
    startTime = Date.now()
  }
});
export default router

更多文章__> >> 码砖猿的技术博客