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')
}
複製代碼