Uniapp evento enterrado, estadísticas de datos

Descripción de la función de punto enterrado

方案应用于uniapp小程序商城类项目
1. 页面浏览事件调用封装的跳转方法自动处理
2. 页面参数自动添加（页面url，页面参数，触发时间等），平台公共参数自动添加（用户信息，平台标识等）
3. 点击事件和接口请求事件需要各位自行在代码添加

Método de encapsulación de salto de enrutamiento eventRoute

import eventAnalyse from "@/common/eventAnalyse.js";
const navigateTo = (url) => {
    const link = getCurrentPages()[getCurrentPages().length - 1].route;
    eventAnalyse.analyse('hide', {url: link})
    let _url = typeof url == 'object' ? url.url : url
    uni.navigateTo({
        url: _url,
        animationType: 'pop-in',
        animationDuration: 300,
        success: function(res) {
            eventAnalyse.analyse('show', {url: _url})
        }
    });
}
const redirectTo = (url) => {
    const link = getCurrentPages()[getCurrentPages().length - 1].route;
    eventAnalyse.analyse('hide', {url: link})
    let _url = typeof url == 'object' ? url.url : url
    uni.redirectTo({
        url: _url,
        animationType: 'pop-in',
        animationDuration: 300,
        success: function(res) {
            eventAnalyse.analyse('show', {url: _url})
        }
    });
}
const reLaunch = (url) => {
    const link = getCurrentPages()[getCurrentPages().length - 1].route;
    eventAnalyse.analyse('hide', {url: link})
    let _url = typeof url == 'object' ? url.url : url
    uni.reLaunch({
        url: _url,
        success: function(res) {
            eventAnalyse.analyse('show', {url: _url})
        }
    });
}
const switchTab = (url) => {
    const link = getCurrentPages()[getCurrentPages().length - 1].route;
    uni.switchTab({
        url: _url,
        success: function(res) {
        }
    });
}
const navigateBack = (num) => {
    const link = getCurrentPages()[getCurrentPages().length - 1].route;
    eventAnalyse.analyse('hide', {url: link})
    uni.navigateBack({
        delta: num
    });
}

export default { 
    navigateTo,
    redirectTo,
    reLaunch,
    switchTab,
    navigateBack
}

Método de encapsulación de procesamiento de eventos eventAnalyse

import * as common from './common.js' //引入common
import * as db from './db.js' //引入db
import api from '@/apiConfig/api.js'
import { pageCode } from './pageCode.js' //页面编码字典
 
/**
   * @description 路由跳转行为分析
   * @param {*} triggerType 事件类型 ，必传 'show' || 'hide' || 'quit' || '自定义事件'
   * @param  params 事件参数 非必传
   */
const analyse = (triggerType = "", params = {}) => {
	let startTime, // startTime 进入页面时间
	leaveTime, // leaveTime 离开页面时间
	stayTime = null, // stayTime 停留时长
	isQuit,//是否跳出
	url, //当前页面url
	toUrl, //将要跳转的url
	page_params,  //页面参数
	cityObj = db.get('cityObj'),
	userInfo = db.get('userInfo');

	if (!triggerType) return
	switch (triggerType){
		case 'show':
			const _url = params.url
			startTime = new Date().getTime()
			leaveTime = ''
			db.set('startTime',startTime)
			page_params = params.url ? getArgs(params.url) : {}
			url = getUrl()
			toUrl = _url.indexOf('?') != -1 ? _url.split('?')[0] : _url
			break
		case 'hide':
			startTime = db.get('startTime')
			leaveTime = new Date().getTime()
			stayTime = leaveTime-startTime
			if (stayTime > 5*1000*60) {
				isQuit = true
			}
			url = getUrl()
			break
		case 'tabBarShow':
			startTime = new Date().getTime()
			leaveTime = ''
			db.set('startTime_tabBar',startTime)
			url = getUrl()
			break
		case 'tabBarHide':
			startTime = db.get('startTime_tabBar')
			leaveTime = new Date().getTime()
			stayTime = leaveTime-startTime
			if (stayTime > 5*1000*60) {
				isQuit = true
			}
			url = getUrl()
			break
		case 'appLaunch':
			startTime = new Date().getTime()
			leaveTime = ''
			db.set('startTime',startTime)
			url = getUrl()
			break
		case 'appShow': 
			startTime = new Date().getTime()
			leaveTime = ''
			db.set('startTime',startTime)
			url = getUrl()
			break
		case 'appHide':
			startTime = db.get('startTime')
			leaveTime = new Date().getTime()
			stayTime = leaveTime-startTime
			if (stayTime > 5*1000*60) {
				isQuit = true
			}
			url = getUrl()
			break
		case 'quit':
			//选择地址 弹出地图状态为 quit 需判断
			startTime = db.get('startTime')
			leaveTime = new Date().getTime()
			url = getUrl()
			//标记用户已经跳出
			isQuit = true
			// console.log('跳出')
			break
		case 'click':
			startTime = new Date().getTime()
			url = getUrl()
			break
		case 'response':
			startTime = new Date().getTime()
			url = getUrl()
			break
			
	}
	const tabBar = [
		'pages/index/index',
		'pages/class/index',
		'pages/welfare/index',
		'pages/goods-car/goods-car',
		'pages/ucenter/index'
	]
	
	if (triggerType == 'show') {
		return false
	}
	// 防止tabBar页面触发两次事件上报
	if (triggerType == 'hide' || triggerType == 'appShow' || triggerType == 'appHide') {
		if (tabBar.indexOf(url) != -1) {
			return false
		}
	}
	//判断客户端类型
	let _client = db.constParams.platform
	if(db.constParams.platform == 'web' || db.constParams.platform == 'wxweb') {
		_client = 'h5'
	}
	const logData = {
		logVersion: "0.1.0",
		joinEvents: triggerType,
		client: _client,
		userId: userInfo.uuid ? userInfo.uuid : '',
		sessionId: db.get('sessionId'),
		deviceId: db.get('deviceId'),
		city: cityObj.cityCode,
		area: cityObj.towncode,
		startTime: common.timeToDate(startTime),
		stayTimeStr: stayTime ? common.msToDate(stayTime) : 0,
		stayTime: stayTime ? parseInt(stayTime/1000) : 0,
		endTime: leaveTime ? common.timeToDate(leaveTime) : common.timeToDate(startTime),
		isQuit: isQuit,
		pageUrl: url,
		pageId: pageCode[url],
		pageParams: page_params,
		...params
	}
	let userLog = db.get('userLog') ? db.get('userLog') : []
	userLog.push(logData)
	// if (logData.stayTime < 5*60) {
	// 	userLog.push(logData)
	// }
	db.set('userLog',userLog)
	if (logData.stayTime > 5*60 || userLog.length > 100) {
		console.log('埋点数据提交')
		api.analysisData(userLog).then(()=> {
			db.del('userLog')
		})
	}
}

function getArgs(urlArgs) {
	let params,url,result,reqDataString
	if (urlArgs.indexOf("?") != -1) {
		url = urlArgs.split("?")[1]
		result = url.replace(/&/g, '","').replace(/=/g, '":"')
		reqDataString = '{"' + result + '"}'
		params = JSON.parse(reqDataString)
		return params
	} else {
		return params = {}
	}
}

function getUrl() {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const url = currentPage ? currentPage.route : ''
	return url
}
 
export default {
	analyse
}

Método de registro global

import eventRoute from "@/common/eventRoute.js";
import eventAnalyse from "@/common/eventAnalyse.js"
Vue.prototype.$eventRoute = eventRoute;
Vue.prototype.$eventAnalyse = eventAnalyse;

evento de vista de página

this.$eventRoute.navigateTo ({
  url: '/pages/index/index'
});

haga clic en evento

// 点击购物车事件，page_id 为事件名称 必传
this.$eventAnalyse.analyse('click', { page_id:'cart_btn',paramsA:'',paramsB:''})

Evento de solicitud de interfaz

// 加入购物车接口请求事件，page_id 为事件名称 必传
this.$eventAnalyse.analyse('response',{ page_id:'cart_add',paramsA:'',paramsB:'')

Cambio de fondo del oyente de App.vue

onShow: function() {
    this.$eventAnalyse.analyse('appShow')
},
onHide: function() {
    this.$eventAnalyse.analyse('appHide')
}