uniapp 数据统计，数据埋点，自定义事件埋点封装

分手后的思念是犯贱 2022-12-19 09:27 483阅读 0赞

本博文实现了uniapp的数据统计埋点的封装，可以自动统计页面的PV， UV，页面停留时长，不需要在每个页面的生命周期写统计（tabBar 的页面除外，tabBar 页面需要添加自定义事件）  
    使用说明:  
      1.需要在APP.vue 初始化进入时间缓存 ，示例：  
        onLaunch: function() \{  
            if (!uni.getStorageSync('entryTime')) \{  
                uni.setStorageSync('entryTime', new Date().getTime())  
            \}  
        \},  
          
      2.在 tabBar 页面加载和离开的生命周期手动统计  
        this.$common.Init.call(this);  
        // 统计自定义事件触发埋点  
        this.myMta('show')  
          
      3.修改mtaUrl 和 appId。

实现思路：重写unaipp的路由，在调用路由跳转的时候触发页面PV,UV,停留时长的信息统计，因为tabBar 不会触发路由跳转的API，所以需要在其中的页面用自定义事件手动添加上。

下面上代码：

main.js

import nav from "@/util/navRoute.js";
    Vue.prototype.$navTo = nav;

页面跳转统一用我封装的API，示例：

this.$navTo.navigateTo({
    	url: '/pages/test/test'
    })

common.js

import Mta from "@/util/myMta.js";
    
    function Init(e) {
    	this.myMta = (...ev) => {
    		Mta.myMta(...ev)
    	}
    }

navRoute.js

import Mta from "@/util/myMta.js";
    var nav = {
    	navigateTo: ({
    		url
    	}) => {
    		var link = getCurrentPages()[getCurrentPages().length - 1].route;
    		Mta.myMta('leaveStr', link)
    		console.log('navigateTo', link,'-',url)
    		uni.navigateTo({
    			url: url,
    			success: function(res) {
    				Mta.myMta('entryStr', url)
    			}
    		});
    	},
    	redirectTo: ({
    		url
    	}) => {
    		var link = getCurrentPages()[getCurrentPages().length - 1].route;
    		Mta.myMta('leaveStr', link)
    		console.log('redirectTo', link,'-',url)
    		uni.redirectTo({
    			url: url,
    			success: function(res) {
    				Mta.myMta('entryStr', url)
    			}
    		});
    	},
    	reLaunch: ({
    		url
    	}) => {
    		var link = getCurrentPages()[getCurrentPages().length - 1].route;
    		Mta.myMta('leaveStr', link)
    		console.log('reLaunch', link,'-',url)
    		uni.reLaunch({
    			url: url,
    			success: function(res) {
    				Mta.myMta('entryStr', url)
    			}
    		});
    	},
    	switchTab: ({
    		url
    	}) => {
    		var link = getCurrentPages()[getCurrentPages().length - 1].route;
    		Mta.myMta('leaveStr', link)
    		console.log('switchTab', link,'-',url)
    		uni.switchTab({
    			url: url,
    			success: function(res) {
    				Mta.myMta('entryStr', url)
    			}
    		});
    	},
    	navigateBack: ({
    		num
    	}) => {
    		var link = getCurrentPages()[getCurrentPages().length - 1].route;
    		Mta.myMta('leaveStr', link)
    		console.log('navigateBack', link,'-',num)
    		uni.navigateBack({
    			delta: num
    		});
    	}
    
    }
    export default { ...nav
    };

myMta.js