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

目前主流埋点方案
  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

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

Logo

前往低代码交流专区

更多推荐