页面埋点H5 大数据uniapp 按需要更改代码就行

ゞ浴缸里的玫瑰 2023-10-09 14:28 7阅读 0赞

### 逻辑思路 跳转页面前，记录当前页面的信息停留的时长以及各种信息，然后等走的时候再将记录的信息发送出去 ###

### 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