Uniapp埋点事件，数据统计

埋点功能说明

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

路由跳转封装方法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
}

事件处理封装方法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
}

全局注册方法

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

页面浏览类事件

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

点击类事件

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

接口请求事件

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

App.vue监听程序后台切换

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