vue埋点 记录页面停留时间

vue记录使用日志 页面停留时间

import API from '@/modules/system/api/api_userTime'
const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap
})
//   API   保存数据接口
let startTime = Date.now()
let currentTime
let standingTime = 0
let pageName = []
router.beforeEach((to, from, next) => {
    // 如果to存在,则说明路由发生了跳转
    if (to) {
        // 清空界面名
        pageName=[]
        // 离开界面
        // 第一步:页面跳转后记录一下当前的时间 currentTime
        currentTime = Date.now()
        standingTime = parseInt((currentTime - startTime) / 1000)
        from.matched.forEach(routeItem => {
            pageName.push(routeItem.meta.title)
        })  
        // ------------
        // 第二步:在这里把 currentTime - startTime 的 差值 发送给后端
        // ------------

        if(pageName.length > 0){
            const params = {
                // 界面
                pageName: pageName.join("-"),
                // 进入界面时间
                gmtCreate: '',
                // gmtCreate: new moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
                // 离开时间
                gmtLeave: '',
                // gmtLeave: new moment(currentTime).format('YYYY-MM-DD HH:mm:ss'),
                /**
                 * 进入或离开状态
                 * enter进入
                 * exit 离开
                 */
                type: 'exit',
                // 停留时长
                // duration: standingTime
            }
            API.add(params).then(function(result) {
                console.log(result)
            }).catch(function(result) {
                // console.log(result)
            })
        }
        // 第三步:每次都要初始化一下 startTime
        startTime = Date.now()
        pageName = []
        // console.log('======== 分割线 ========')
    }
    if(from){
        // 进入界面
        to.matched.forEach(routeItem => {
            pageName.push(routeItem.meta.title)
        })  
        if(pageName.length > 0){
            const param = {
                // 界面
                pageName: pageName.join("-"),
                // 进入界面时间
                gmtCreate: '',
                // gmtCreate: new moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
                // 离开时间
                gmtLeave: '',
                 /**
                 * 进入或离开状态
                 * enter进入
                 * exit 离开
                 */
                type: 'enter'
            }
            console.log(param);
            API.add(param).then(function(result) {
                console.log(result)
            }).catch(function(result) {
                // console.log(result)
            })
        }
    }
    next()
})
export default router
  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值