微信小程序-记录用户足迹

记录页面停留时间、功能点击次数

// wxml
<view id="btn1" bindtap="handlerClick">点我</view>// 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最大限制10MBgetBalance(){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页面的停留时间及点击事件的点击次数

微信小程序-记录用户足迹相关推荐

微信小程序记录用户行为浏览记录和停留时间以及小程序全局分享
微信小程序记录用户行为浏览记录和停留时间以及小程序全局分享项目需求 1.后台统计一个用户在我们小程序的每个页面的停留时间 2,前台用户可以在个人中心看到自己的分享记录以及多少人查看需求分析需求一 ...
小程序登录本地服务器,微信小程序实现用户登录模块服务器搭建
我选用的是node.js来搭建服务器,没有安装的小伙伴可以参考我的node.js其他博客. 服务器安装与配置初始化项目,将会自动创建package.json配置文件. npm init -y 安装E ...
java监听微信_一种基于java后台应用监控微信小程序的用户访问量的方法与流程...
本发明涉及java应用与微信小程序应用开发技术领域,具体涉及一种基于java后台应用监控微信小程序的用户访问量的方法. 背景技术: 微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了 ...
微信小程序python解析获取用户手机号_微信小程序获取用户手机号
获取微信用户绑定的手机号,需先调用wx.login接口. 小程序获取code. 后台得到session_key,openid. 组件触发getPhoneNumber 因为需要用户主动触发才能发起获取手 ...
微信小程序获取用户手机号码，Java后台servlet解密（微信小程序调用微信支付也是大致的流程）
本篇记录说明微信小程序获取用户手机号码,Java后台servlet解密(微信小程序调用微信支付也是大致的流程,详细内容可私信交流) (第一次写博客,写得不好的地方见谅,面向新手,大佬请无视,不喜勿喷 ...
微信小程序获取用户手机号--官方示例
微信小程序获取用户手机号–官方示例 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNu ...
微信小程序获取用户信息并保存登录状态
微信小程序获取用户信息并保存登录状态:http://www.360doc.com/content/18/0124/11/9200790_724662071.shtml 转载于:https://www ...
基于微信小程序的用户列表点赞功能
代码地址如下: http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4. ...
微信小程序获取用户信息
微信小程序获取用户信息微信小程序获取用户信息接口做了调整: 2021年4月28日24时后发布的小程序新版本,无法通过wx.getUserInfo与获取用户个人信息(头像.昵称.性别与地区),将直接获 ...

微信小程序-记录用户足迹

记录页面停留时间、功能点击次数

track.js：足迹文件

工程demo及截图

微信小程序-记录用户足迹相关推荐

最新文章

热门文章