uniapp数据统计，数据埋点，⾃定义事件埋点封装
本博⽂实现了uniapp的数据统计埋点的封装，可以⾃动统计页⾯的PV， UV，页⾯停留时长，不需要在每个页⾯的⽣命周期写统计（tabBar 的页⾯除外，tabBar 页⾯需要添加⾃定义事件）
使⽤说明:
1.需要在APP.vue 初始化进⼊时间缓存 ，⽰例：
onLaunch: function() {
if (!StorageSync('entryTime')) {
uni.setStorageSync('entryTime', new Date().getTime())
}
},
2.在 tabBar 页⾯加载和离开的⽣命周期⼿动统计
this.$common.Init.call(this);
// 统计⾃定义事件触发埋点
3.修改mtaUrl 和 appId。
实现思路：重写unaipp的路由，在调⽤路由跳转的时候触发页⾯PV,UV，停留时长的信息统计，因为tabBar 不会触发路由跳转的API，所以需要在其中的页⾯⽤⾃定义事件⼿动添加上。
下⾯上代码：
main.js
import nav from "@/util/navRoute.js";
Vue.prototype.$navTo = nav;
页⾯跳转统⼀⽤我封装的API，⽰例：
this.$navTo.navigateTo({
url: '/pages/test/test'
})
common.js
import Mta from "@/util/myMta.js";
function Init(e) {
}
}
navRoute.js
import Mta from "@/util/myMta.js";
var nav = {
navigateTo: ({
url
}) => {
var link = getCurrentPages()[getCurrentPages().length - 1].route; Mta('leaveStr', link)
console.log('navigateTo', link,'-',url)
uni.navigateTo({
url: url,
success: function(res) {
}
});
},
redirectTo: ({
url
}) => {
var link = getCurrentPages()[getCurrentPages().length - 1].route; Mta('leaveStr', link)
console.log('redirectTo', link,'-',url)
url: url,
success: function(res) {
}
});
},
reLaunch: ({
url
}) => {
var link = getCurrentPages()[getCurrentPages().length - 1].route; Mta('leaveStr', link)
console.log('reLaunch', link,'-',url)
url: url,
success: function(res) {
}
});
},
switchTab: ({
url
}) => {
var link = getCurrentPages()[getCurrentPages().length - 1].route; Mta('leaveStr', link)
console.log('switchTab', link,'-',url)
uni.switchTab({
url: url,
success: function(res) {
}
});
},
navigateBack: ({
num
}) => {
var link = getCurrentPages()[getCurrentPages().length - 1].route; Mta('leaveStr', link)
console.log('navigateBack', link,'-',num)
uni.navigateBack({
delta: num
});
}
}
export default { ...nav
};
myMta.js
const mtaUrl = 'cxxx/commonapi/system/saveRecordLog'
const appId = 'test';
// 埋点通⽤接⼝
// triggerType: 必传类型 entryStr(进⼊) || leaveStr(离开) || String:⾃定义事件描述
// pageUrl：⾮必传，页⾯路径，不穿默认获取当前路径
async function myMta(triggerType = "", pageUrl = '') {
console.log('埋点', triggerType, pageUrl)
let entryTime, leaveTime,stayTime,sceneType,params;
// entryTime 进⼊页⾯时间
// leaveTime 离开页⾯时间
// stayTime 停留时长
// sceneType 渠道类型 1 线上渠道⽤户数 2 线下渠道⽤户数 3 ⾮扫描⼆维码⽤户数
if (!triggerType) return
if (triggerType == 'entryStr') {
entryTime = new Date().getTime();
leaveTime = null;
uni.setStorageSync('entryTime',entryTime)
} else {
entryTime = StorageSync('entryTime');
leaveTime = new Date().getTime();
stayTime = leaveTime-entryTime;
}
// 获取页⾯路径及参数
const urlArgs = getCurrentPageUrlWithArgs();
if (!pageUrl) {
leaveTime = new Date().getTime();
if (urlArgs.indexOf("?") != -1) {
let url, result, reqDataString;
pageUrl = urlArgs.split("?")[0];
url = urlArgs.split("?")[1];
result = place(/&/g, '","').replace(/=/g, '":"');
reqDataString = '{"' + result + '"}';
params = JSON.parse(reqDataString);
} else {
pageUrl = urlArgs;
}
}
success: function(res) {
let networkType = resworkType;
let token,openid;
try {
let scene = JSON.StorageSync("userInfo")).scene;
token = JSON.StorageSync("userToken")).tk || "暂⽆:token";
if (!scene) {
sceneType = 3
} else {
sceneType = (scene !== '02be37d9cfbf45f9aa1013180c80bfe0') ? 1 : 2;
}
} catch (e) {}
var data = {
token: token,
openid: token,
scene: sceneType,
triggerType: triggerType,
networkType: networkType,
networkType: networkType,
pageInfo: {
pageUrl: pageUrl,
url: urlArgs,
.
..params,
},
entryTime: toDateDetail(entryTime),
leaveTime: toDateDetail(leaveTime),
stayTime: stayTime,
sysTemInfo: wx.getStorageSync("sysTemInfo"),
}
url: mtaUrl,
data: data,
method: "POST",
header: {
"content-type": "application/json",
"appId": appId,
// "appId": "const_wywplus",
"appToken": "mkgame?" + chars(),
},
success(res) {
if (de == 200) {} else {
<('请求失败')
}
},
fail: (ret) => {
<(ret);
}
})
}
})
}
// 获取当前页⾯链接和参数
function getCurrentPageUrlWithArgs() {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const url = ute;
const options = currentPage.options;
let urlWithArgs = `/${url}?`;
for (let key in options) {
const value = options[key];
urlWithArgs += `${key}=${value}&`;
}
urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1); return urlWithArgs;
}
function chars() {
let chars = "0123456789";
/
****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
let maxPos = chars.length;
let code = "";
for (let i = 0; i < 6; i++) {
code += chars.charAt(Math.floor(Math.random() * maxPos)); }
return code;
}
function toDateDetail(number) {
if(!number)return '';
js获取json的key和value// var n = number * 1000
var date = new Date(number);
var date = new Date(number);
var Y = FullYear() + "-";
var M =
(Month() + 1 < 10 ?
"0" + (Month() + 1) :
var D = Date() < 10 ? "0" + Date() : Date();
var h = Hours() < 10 ? "0" + Hours() : Hours();
var mm = Minutes() < 10 ? "0" + Minutes() : Minutes(); var s = Seconds() < 10 ? "0" + Seconds() : Seconds(); 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
};
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论