页面埋点H5 大数据uniapp 按需要更改代码就行
逻辑思路 跳转页面前，记录当前页面的信息停留的时长以及各种信息，然后等走的时候再将记录的信息发送出去
1.记录当前页面信息的函数
// 埋点通用接口 // triggerType: 必传 类型 entryStr(进入) || leaveStr(离开) || String:自定义事件描述 // pageUrl：非必传，页面路径，不穿默认获取当前路径 //再洗一个触发事件 async function myMta(triggerType = "", pageUrl = '') { console.log('埋点', triggerType, pageUrl) let entryTime, leaveTime, stayTime, nowTime; // entryTime 进入页面时间 // leaveTime 离开页面时间 // stayTime 停留时长 // nowTime 进行当前函数的时间 if (!triggerType) return if (triggerType == 'entryStr') { entryTime = new Date().getTime(); nowTime = new Date().getTime(); leaveTime = null; uni.setStorageSync('entryTime', entryTime) } else { entryTime = uni.getStorageSync('entryTime'); leaveTime = new Date().getTime(); stayTime = leaveTime - entryTime; nowTime = new Date().getTime(); } //异步请求当前网络信息是wifi还是啥 uni.getNetworkType({ success: function(res) { let networkType = res.networkType; let token, openid, sysTemInfo; try { uni.getStorage({ key: 'storage_key', success: function(res) { token = res.data.token openid = res.data.openId uni.getSystemInfo({ success: function(res) { sysTemInfo = res const urlArgs = getCurrentPageUrlWithArgs(); //通过这个函数获取当前页面的信息 如果想返回更多自己去函数里面更改 var data = { token: token, openid: openid, triggerType: triggerType, networkType: networkType, pageInfo: { pageUrl: pageUrl, route: urlArgs.route, params: urlArgs.options, title: urlArgs.title, }, entryTime: toDateDetail(entryTime), leaveTime: toDateDetail(leaveTime), nowTime: toDateDetail(nowTime), stayTime: stayTime, sysTemInfo: sysTemInfo, // ip: ip[0] } data = { token: token, openid: openid, triggerType: triggerType, networkType: networkType, pageInfo: JSON.stringify({ pageUrl: pageUrl, route: urlArgs.route, params: urlArgs.options, title: urlArgs.title, }), entryTime: toDateDetail(entryTime), leaveTime: toDateDetail(leaveTime), nowTime: toDateDetail(nowTime), stayTime: stayTime, sysTemInfo: JSON.stringify(sysTemInfo), // ip: ip[0] } var headers = {}; headers['X-Token'] = token uni.request({ url: 'https://lingzhuang.gengduoke.com/adminapi/customtrajectory/save', data: data, header: headers, method: 'post', success: (res) => { console.log('res', res) }, fail: (err) => { console.log('err', err) } }) }, fail(error) { sysTemInfo = 'null' } }) }, fail(error) { token = "null" } }) } catch (e) {} } }) } // 获取当前页面链接和参数 function getCurrentPageUrlWithArgs() { const pages = getCurrentPages(); const currentPage = pages[pages.length - 1]; //当前页面的全部信息 const route = currentPage.route; //当前路由的路径 pages/login/login const options = currentPage.options; //url里面的参数json类型 const title = currentPage.$holder.navigationBarTitleText //当前页面的navigationBarTitleText /拼接路由url字符串开始/// let urlWithArgs = `/${route}?`; //将url里面的参数拼接成字符串 /pages/login/login?a=1 for (let key in options) { const value = options[key]; urlWithArgs += `${key}=${value}&`; } urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1); /拼接路由url字符串结束/// return { options, //当前页面的参数 urlWithArgs, //当前页面的参数 route, title }; } function toDateDetail(number) { if (!number) number = new Date(); // var n = number * 1000 var date = new Date(number); var Y = date.getFullYear() + "-"; var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-"; var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); var h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); var mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); return Y + "" + M + "" + D + " " + h + ":" + mm + ":" + s; } /** * appId -> 小程序ID 类型:String * appToken -> 自定义 类型:String * token -> 当前用户token 类型:String * openid -> 当前用户openid 类型:String * triggerType -> 事件类型 类型:String * pageInfo { -> 当前页面信息 类型:Object * pageUrl: -> 不带参数 类型:String * url: -> 带参数 类型:String * ...params -> 当前页面所有参数 类型:Object * } * entryTime -> 进入页面时间 类型:Number * leaveTime -> 离开当前页面时间 类型:Number * stayTime -> 停留时长 类型:Number 单位:ms * sysTemInfo -> 设备信息 类型:Object */ export default { myMta };
2.跳转进行路由拦截然后让他进行第一个里面的函数的操作
import Mta from "./myMta.js"; var nav = { navigateTo: ({ url }) => { var link = getCurrentPages()[getCurrentPages().length - 1].route; Mta.myMta('leaveStr', link) console.log('navigateTo', link, '-', url) uni.navigateTo({ url: url, success: function(res) { Mta.myMta('entryStr', url) } }); }, redirectTo: ({ url }) => { var link = getCurrentPages()[getCurrentPages().length - 1].route; Mta.myMta('leaveStr', link) console.log('redirectTo', link, '-', url) uni.redirectTo({ url: url, success: function(res) { Mta.myMta('entryStr', url) } }); }, reLaunch: ({ url }) => { var link = getCurrentPages()[getCurrentPages().length - 1].route; Mta.myMta('leaveStr', link) console.log('reLaunch', link, '-', url) uni.reLaunch({ url: url, success: function(res) { Mta.myMta('entryStr', url) } }); }, switchTab: ({ url }) => { var link = getCurrentPages()[getCurrentPages().length - 1].route; Mta.myMta('leaveStr', link) console.log('switchTab', link, '-', url) uni.switchTab({ url: url, success: function(res) { Mta.myMta('entryStr', url) } }); }, navigateBack: ({ num }) => { var link = getCurrentPages()[getCurrentPages().length - 1].route; Mta.myMta('leaveStr', link) console.log('navigateBack', link, '-', num) uni.navigateBack({ delta: num }); }, share:()=>{ Mta.myMta('share') } } export default { ...nav }
3.调用页面跳转以及函数监听和发送
this.nav.navigateTo({ url:'/pages/login/login' })
4.可以封装全局
页面埋点/ import nav from '@/utils/navRoute.js' Vue.prototype.nav = nav //1.navigateTo //2.reLaunch //3.switchTab //4.navigateBack
