vue实现页面停留时间统计

前言

在实际业务中，埋点需求是前端开发中非常重要的数据指标获取的方式之一。今天，主要聊一下页面停留时间的统计。

简略版

每个页面独自实现相关统计，并上报数据。

export default {
	  data() {
		    return {
		      	startTime: 0,
		    }
	  },
	  created() {
	    	this.startTime = Date.now()
	  },
	  beforeRouteLeave(to, from, next) {
		    let stayTime = Date.now() - this.startTime
		    console.log(`停留时间：${stayTime}ms`)
		    next()
	  }
}

完整版

虽然每个页面自己统计可以实现需求。但是，由于每个页面计算逻辑等大体一致，所以会有大量的代码冗余。借助vue-router，我们可以封装一套相对完整的上报逻辑代码，提高开发效率。

window.pageViewStartTime = null;
router.beforeEach((to, from, next) => {
	  if (from.name && window.pageViewStartTime) {
		    const pageViewTime = new Date() - window.pageViewStartTime;
		    console.log(`Page view time for ${from.name}: ${pageViewTime}ms`);
	  }
	  window.pageViewStartTime = new Date();
	  next();
});
window.addEventListen('unload', () => {
	if (window.pageViewStartTime) {
		 	const pageViewTime = new Date() - window.pageViewStartTime;
		    console.log(`Page view time for ${from.name}: ${pageViewTime}ms`);
	}
})

结论

由于页面的前进、后退可以用vue-router的路由守卫来处理，页面刷新可以用unload事件来处理，这样就简洁地实现了页面停留时间的统计。