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
<think>好的,我现在需要帮用户理解在UniApp中埋点的定义和用法。根据用户提供的引用内容,首先得明确埋点的基本概念,然后结合UniApp的具体实现方法。 首先,用户可能不太清楚埋点是什么,所以应该先解释埋点的定义,引用[1]提到埋点是在应用中添加代码来收集用户行为数据,这对优化用户体验很重要。需要说明埋点的目的和常见类型,比如点击事件、页面浏览等。 接下来,用户想知道在UniApp中如何定义和使用埋点。引用[2]和[3]展示了两种不同的实现方式:全局变量保存埋点句柄和通过DOM元素绑定事件。需要区分前端埋点和后端埋点,根据引用[1]的说明,前端埋点是在客户端实现的,比如UniApp中的代码添加。 然后,引用[3]中的示例代码显示了如何通过DOM的id和事件处理函数来发送埋点数据,比如sendEventTagByDomId函数,这里需要解释代码的结构,比如如何绑定点击事件,如何传递参数如scope和data。同时,引用[4]提到了会话ID的重要性,说明在UniApp中可能需要自己实现会话跟踪,这对埋点的准确性很关键。 还要注意用户可能需要的实际步骤,比如如何添加全局变量,如何配置事件处理函数,以及埋点数据的收集和分析流程。需要确保回答覆盖了定义、用法、实现步骤和注意事项,同时结合引用中的代码示例,让用户更容易理解。 可能还需要提到不同埋点方法的优缺点,比如前端埋点简单但可能受客户端限制,后端埋点更可靠但需要服务器支持。此外,会话管理的实现,如引用[4]所述,是确保数据准确的重要部分,需要指导用户如何开启或配置会话ID。 最后,生成相关问题时要围绕用户可能进一步关心的点,比如实现步骤、优化方法、数据统计逻辑和第三方工具集成,这样能帮助用户深入学习和解决问题。</think>### UniApp埋点的定义与用法解析 #### 一、埋点的定义 在UniApp中,**埋点**指通过代码在应用程序中标记用户行为的关键节点,用于收集和分析用户操作数据。例如: - 点击按钮、页面跳转等交互行为 - 页面停留时长、滚动深度等浏览行为 - 表单提交、支付结果等业务关键事件 这类数据通过$...$前端埋点或$$...$$后端埋点实现,其中前端埋点更侧重客户端行为记录,后端埋点关注业务数据验证[^1][^4]。 #### 二、核心实现方法 1. **全局埋点句柄配置** ```javascript // 在App.vue中定义全局对象 export default { globalData: { VUE_APP_MD: null // 埋点控制器 }, onLaunch() { const wv = this.$scope.$getAppWebview().children()[0] getApp().globalData.VUE_APP_MD = wv // 绑定Webview实例[^2] } } ``` 2. **DOM事件埋点实践** ```html <!-- 在页面组件中绑定埋点 --> <view id="login_btn" @click.capture="track"> <button>立即登录</button> </view> <script> export default { methods: { track(e) { this.sendEventTagByDomId({ e, scope: &#39;LOGIN_BY_PHONE_BTN&#39;, // 事件分类标识 data: { btnName: &#39;立即登录&#39; } // 自定义参数[^3] }) } } } </script> ``` #### 三、关键技术要点 1. **会话追踪机制** - 需手动实现$event_session_id$生成逻辑 - 会话超时默认30分钟,可通过SDK插件调整[^4] - 示例代码: ```javascript // 生成会话ID const generateSessionID = () => Date.now().toString(36) + Math.random().toString(36).substr(2) ``` 2. **数据上报策略** | 策略类型 | 触发条件 | 优点 | 缺点 | |---|---|---|---| | 实时上报 | 事件触发立即发送 | 数据时效性强 | 网络消耗大 | | 批量上报 | 定时/定量触发 | 节省资源 | 可能丢失瞬时数据 | | 本地缓存 | 网络恢复后发送 | 保证数据完整性 | 存储空间占用 | #### 四、开发注意事项 1. **性能影响控制** - 避免在$...$高频操作(如滚动事件)中使用同步埋点 - 推荐使用$$...$$Web Worker处理复杂数据加工 2. **数据准确性验证** ```javascript // 示例验证函数 function validateEvent(event) { return event.hasOwnProperty(&#39;timestamp&#39;) && event.hasOwnProperty(&#39;event_type&#39;) && event.hasOwnProperty(&#39;session_id&#39;) } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值