微信小程序页面停留时间统计
发布于 4 年前 作者 pingmo 4182 次浏览 来自 分享

近来在研究微信小程用户是否在使用小程序或者查看用户在小程序停留的时间,无意中在git上找到了相关的解决问题方法,希望正在开发这个功能的的你,能帮助你解决!

但是好像有

收到一个需求,要统计一个用户在我们小程序的每个页面的停留时间。

看了下现成的API,除了这个好像也没有别的可以用:https://mp.weixin.qq.com/debug/wxadoc/dev/api/analysis-visit.html#访问趋势

这个里面貌似有页面停留时间的数据,

参数说明ref_date时间,如:"20170306-20170312"session_cnt打开次数(自然周内汇总)visit_pv访问次数(自然周内汇总)visit_uv访问人数(自然周内去重)visit_uv_new新用户数(自然周内去重)stay_time_uv人均停留时长 (浮点型,单位:秒)stay_time_session次均停留时长 (浮点型,单位:秒)visit_depth平均访问深度 (浮点型)

但是好像有查询时间限制,只能查询一天的数据。毕竟小程序数据很大,估计也是怕数据量太大查询慢吧。

算了,自己写一个吧,

初步想法,在页面的onShow事件里面,打一个开始的时间戳,然后在onHide里面再弄一个时间戳,两个一减,然后把得出来的数据,一提交,齐活。

BUT~,尼玛,onShowonHide不仅在页面切换的时候会触发,小程序切换到后台和回到前台,也会触发,这就有干扰了。

但是在app.js里面的onShowonHide事件只在小程序前后台切换的时候才会触发,不会在页面切换的时候触发,利用这点,把前后台切换排除掉,只在页面切换的时候,上报页面停留时间就好了

app.js里面,初始化以下三个状态,

globalData: { 
    firstIn:1,
    onShow: 0, 
    onHide: 0
}

onShowonHide的值默认为0,当小程序进入后台或者返回前台的时候,给这两个值变为1,用来告诉页面,刚才的切换是前后台切换,不是页面切换,不用上报页面停留时间。代码如下:

依旧是在app.js里面

onShow(){ 
    if(this.globalData.firstIn){
        this.globalData.firstIn = 0; 
    } else{ 
        this.globalData.onShow = 1; 
    } 
}, 
onHide(){ 
    this.globalData.onHide = 1; 
}

里面的firstIn表示是不是第一次进入小程,因为第一次进入的时候也会触发onShow(相当于从后台切换到前台了),要把这个也排除在外。默认是第一次进入,进入之后就把这个值置为0

OK,app.js准备好了,然后看下具体页面的,

在页面里面,先声明两个变量,一个startTime,一个endTime分别来存储用户进入页面的时间和离开的时间

var startTime,
      endTime,
      app = getApp();
Page({
    onShow(){
        setTimeout(function () {
            if (app.globalData.onShow) {
                app.globalData.onShow = 0;
                console.log("demo前后台切换之切到前台")
            }
            else {
                console.log("demo页面被切换显示")
                startTime = +new Date();
            }
        }, 100)
    },
    onHide(){
        setTimeout(function () {
            if (app.globalData.onHide) {
                app.globalData.onHide = 0;
                console.log("还在当前页面活动")
            }
            else {
                endTime = +new Date();
                console.log("demo页面停留时间:" + (endTime - startTime))
                var stayTime = endTime - startTime;
               //这里获取到页面停留时间stayTime,然后了可以上报了
            }
        }, 100)
    }
})

有几个页面要统计的,就把这几个页面都加一下。

嫌麻烦的话,可以修改一下Page方法,默认自带onShowonHide,然后如果外面有传入的话,可以合并。页面在使用的时候,直接用这个心的Page,就不用每个页面都onHideonShow了,这里就不上具体的代码了。

关于setTimeout的说明:

页面的onShowonHide会在app.jsonShowonHide之前执行,加个延迟,放到后面执行,这样每次都可以先检测是页面切换还是前后台切换,然后再去做对应的逻辑,不然就反了。

参考地址:https://github.com/ireeoome/reeoome/issues/3

2 回复

这个确实不错,经常用到这个需求

欢迎使用友盟+小程序统计,支持页面停留时长等多种统计指标哦~只需集成SDK,所有数据即取即用~

回到顶部