近来在研究微信小程用户是否在使用小程序或者查看用户在小程序停留的时间,无意中在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~,尼玛,onShow
和onHide
不仅在页面切换的时候会触发,小程序切换到后台和回到前台,也会触发,这就有干扰了。
但是在app.js
里面的onShow
和onHide
事件只在小程序前后台切换的时候才会触发,不会在页面切换的时候触发,利用这点,把前后台切换排除掉,只在页面切换的时候,上报页面停留时间就好了
在app.js
里面,初始化以下三个状态,
globalData: {
firstIn:1,
onShow: 0,
onHide: 0
}
onShow
和onHide
的值默认为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
方法,默认自带onShow
和onHide
,然后如果外面有传入的话,可以合并。页面在使用的时候,直接用这个心的Page
,就不用每个页面都onHide
、onShow
了,这里就不上具体的代码了。
关于setTimeout
的说明:
页面的onShow
和onHide
会在app.js
的onShow
和onHide
之前执行,加个延迟,放到后面执行,这样每次都可以先检测是页面切换还是前后台切换,然后再去做对应的逻辑,不然就反了。
参考地址:https://github.com/ireeoome/reeoome/issues/3
作者:Ams
能实现对微信小程序直播的点赞\评论\送花\观看时长等互动监测吗?
赞一个 可以重新page方法 这样就不用每个页面都写这些逻辑了
let orgainPage = Page; // 保存原本的Page对象
let basePage = function (data) {
// 生成初始data,如果页面已经有该值不在重新赋值
if (typeof data.data.dataVal === 'undefined') {
data.data.dataVal = '具体值';
}
// 重写onLoad默认执行一些初始事件
let orgainOnLoad = data.onLoad;
data.onLoad = function (o) {
// 执行的初始事件 start
// 执行的初始事件 end
orgainOnLoad.call(this, o);
}
// 默认初始方法,如果页面已经有该方法不在重写该方法
if (typeof data.orgainFun !== 'function') {
data.orgainFun = function () {
// 执行具体函数 start
// 执行具体函数 end
}
}
return orgainPage(data);
};
//重写后的Page可以直接挂到App里面
App({
onLaunch() { },
// 直接挂到这边,新页面直接调用app.Base替换Page
Base: basePage,
globalData: {}
})
// 重写onLoad默认执行一些初始事件
//每个Page页面调用
const app = getApp();
app.Base({
data: {
}
})
// 重写onLoad默认执行一些初始事件
这个确实不错,经常用到这个需求
欢迎使用友盟+小程序统计,支持页面停留时长等多种统计指标哦~只需集成SDK,所有数据即取即用~