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

2024-07-11 00:57| 来源: 网络整理| 查看: 265

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

目前主流埋点方案代码埋点可视化埋点无埋点

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

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

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

一、命令式埋点

命令式埋点，顾名思义，开发者需要手动在需要埋点的节点处进行埋点。如点击按钮或链接后的回调函数、页面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表示用户的行为发送验证码页面埋点：

统计用户进入或离开页面的各种维度信息，如页面浏览次数（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

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

【本文地址】

公司简介

联系我们