关于javascript: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;
    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:'')