埋点功能说明
方案应用于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;
eventAnalyse.analyse('hide', {url: link})
let _url = typeof url == 'object' ? url.url : url
uni.switchTab({
url: _url,
success: function(res) {
// eventAnalyse.analyse('show', _url)
}
});
}
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' || 'click' || 'response' || 'quit' || '自定义事件'
* @param params 事件参数
*/
const analyse = (triggerType = "", params = {}) => {
let startTime, // startTime 进入页面时间
leaveTime, // leaveTime 离开页面时间
stayTime, // stayTime 停留时长
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
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
url = getUrl()
break
case 'quit':
startTime = db.get('startTime')
leaveTime = new Date().getTime()
url = getUrl()
//标记用户已经跳出
isQuit = true
console.log('跳出')
break
case 'click':
startTime = new Date().getTime()
url = getUrl()
case 'response':
startTime = new Date().getTime()
url = getUrl()
}
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页面onHide触发两次事件上报
if (triggerType == 'hide' && tabBar.indexOf(params.url) != -1) {
return false
}
const logData = {
logVersion: "0.1.0",
joinEvents: triggerType,
client: db.constParams.platform,
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),
pageUrl: url,
pageId: pageCode[url],
pageParams: page_params,
...params
}
let userLog = db.get('userLog') ? db.get('userLog') : []
userLog.push(logData)
db.set('userLog',userLog)
if ((stayTime && stayTime > 5*1000*60) || userLog.length > 100) {
console.log('埋点数据提交')
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.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:'')
