页面埋点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
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)