微信小程序 |
您所在的位置：网站首页 › 旅行足记小程序 › 微信小程序 |
微信小程序
|
记录页面停留时间、功能点击次数
// wxml
点我
// js
const { startToTrack, startByClick, startByBack } = require("../../utils/track");
Page({
// 点击 tab 时用此方法触发埋点
onTabItemTap: () => startToTrack(),
// 被跳转的页面用此方法触发埋点
onShow: () => startToTrack(),
// 返回上一页时调用此方法(tab切换时不需要)
onUnload: () => startByBack(),
// 点击节点时触发埋点
handlerClick(res) {
startByClick(res.currentTarget.id);
}
})
track.js：足迹文件
// 新建页面埋点
let newStorage = data => {
return {
time: data && data.time || 0,// 页面访问时间
click: data && data.click || [],// 点击事件次数
}
}
let route = "";// 当前页面路由
let storage = null;// 埋点信息
let TIME = null;// 当前页累计访问时间(秒)
// 计时器：记录当前页面停留时间
let buying = function () {
let func = () => storage.time++;
TIME = setInterval(func, 1000);
}
// 获取埋点数据
let getSession = () => {
wx.getStorage({
key: route,
success: res => storage = newStorage(res.data),// 已有当前页信息
fail: res => storage = newStorage(),// 没有当前页信息
complete: () => buying()// 开始计时
})
}
// 停止统计 && 保存埋点数据 && 初始化页面变量
let setSession = () => {
clearInterval(TIME);// 停止统计
wx.setStorage({ key: route, data: storage })// 保存埋点数据
initData();// 初始化
}
// 小程序切前台
wx.onAppShow( res => {
route = res.path;
getSession();
})
// 小程序切后台
wx.onAppHide( res => setSession() )
// 异常捕捉
wx.onError( error => console.error("捕获到异常错误：", error) )
// 初始化信息
let initData = () => {
route = "";
storage = null;
TIME = null;
}
module.exports = {
// 页面触发埋点
startToTrack() {
setSession();// 停止旧页面统计 && 保存旧页面信息
let arr = getCurrentPages();// 获取页面信息
route = arr[arr.length - 1].route;// 获取页面路由
getSession();// 获取新页面埋点信息 && 开始统计
},
// 返回按钮触发埋点
startByBack(){
setSession();// 停止旧页面统计 && 保存旧页面信息
let arr = getCurrentPages();// 获取页面信息
route = arr[arr.length - 2].route;// 获取页面路由
getSession();// 获取新页面埋点信息 && 开始统计
},
// 通过点击事件触发埋点 id--以dom的id属性作为storage里唯一的key值
startByClick(id){
let arr = storage.click.filter(item => item.id === id);// 查找元素历史足迹
if(arr.length) {
arr[0].num++;// 继续增长
storage.click.concat(arr);
}else{
storage.click.push({ id: id, num: 1 });// 新增
}
},
// 查询storage用量, 同一个小程序 storage最大限制10MB
getBalance(){
wx.getStorageInfo({
success: option => {
console.log("当前内存使用量：", option.currentSize, "KB");
console.log("剩余内存可用量：", `${option.limitSize - option.currentSize}KB(${100 - (option.currentSize / option.limitSize)}%)`)
}
})
}
}
2021年5月28日更新 工程demo及截图1、首页demo代码 如图在按钮上添加id标识，用于记录点击次数 |
js部分onshow添加startToTrack方法，用于记录页面停留时间。点击事件中添加startByClick事件记录点击次数。 
2、被跳转页demo代码 同上 
除了添加startToTrack和startByClick方法外，添加startByBack方法用于返回上一页时记录页面停留时间 
3、首页点击按钮跳转 图中首页点击按钮跳转page2页面后，session中存入了一条key为当前页面路径“pages/index/index”的字段，并存入了页面停留时间time，页面中点击事件的id及其点击次数。 
4、page2点击按钮跳转 图中page2点击按钮跳转了首页，session中存入了page2页面的停留时间及点击事件的点击次数 
【本文地址】
今日新闻 |
推荐新闻 |