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

本博文实现了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

const mtaUrl = 'https://cxxx.cn/commonapi/system/saveRecordLog'
const appId = 'test';//  埋点通用接口
// triggerType: 必传 类型 entryStr(进入) || leaveStr(离开) || String:自定义事件描述
// pageUrl：非必传，页面路径，不穿默认获取当前路径
async function myMta(triggerType = "", pageUrl = '') {console.log('埋点', triggerType, pageUrl)let entryTime, leaveTime,stayTime,sceneType,params;// entryTime 进入页面时间// leaveTime 离开页面时间// stayTime  停留时长// sceneType 渠道类型   1 线上渠道用户数    2 线下渠道用户数   3 非扫描二维码用户数if (!triggerType) returnif (triggerType == 'entryStr') {entryTime = new Date().getTime();leaveTime = null;uni.setStorageSync('entryTime',entryTime)} else {entryTime = uni.getStorageSync('entryTime');leaveTime = new Date().getTime();stayTime = leaveTime-entryTime;}// 获取页面路径及参数const urlArgs = getCurrentPageUrlWithArgs();if (!pageUrl) {leaveTime = new Date().getTime();if (urlArgs.indexOf("?") != -1) {let url, result, reqDataString;pageUrl = urlArgs.split("?")[0];url = urlArgs.split("?")[1];result = url.replace(/&/g, '","').replace(/=/g, '":"');reqDataString = '{"' + result + '"}';params = JSON.parse(reqDataString);} else {pageUrl = urlArgs;}}wx.getNetworkType({success: function(res) {let networkType = res.networkType;let token,openid;try {let scene = JSON.parse(wx.getStorageSync("userInfo")).scene;token = JSON.parse(wx.getStorageSync("userToken")).tk || "暂无:token";if (!scene) {sceneType = 3} else {sceneType = (scene !== '02be37d9cfbf45f9aa1013180c80bfe0') ? 1 : 2;}} catch (e) {}var data = {token: token,openid: token,scene: sceneType,triggerType: triggerType,networkType: networkType,pageInfo: {pageUrl: pageUrl,url: urlArgs,...params,},entryTime: toDateDetail(entryTime),leaveTime: toDateDetail(leaveTime),stayTime: stayTime,sysTemInfo: wx.getStorageSync("sysTemInfo"),}wx.request({url: mtaUrl,data: data,method: "POST",header: {"content-type": "application/json","appId": appId,// "appId": "const_wywplus","appToken": "mkgame?" + chars(),},success(res) {if (res.data.code == 200) {} else {console.error('请求失败')}},fail: (ret) => {console.error(ret);}})}})
}// 获取当前页面链接和参数
function getCurrentPageUrlWithArgs() {const pages = getCurrentPages();const currentPage = pages[pages.length - 1];const url = currentPage.route;const options = currentPage.options;let urlWithArgs = `/${url}?`;for (let key in options) {const value = options[key];urlWithArgs += `${key}=${value}&`;}urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1);return urlWithArgs;
}function chars() {let chars = "0123456789";/****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/let maxPos = chars.length;let code = "";for (let i = 0; i < 6; i++) {code += chars.charAt(Math.floor(Math.random() * maxPos));}return code;
}
function toDateDetail(number) {if(!number)return '';// var n = number * 1000var date = new Date(number);var Y = date.getFullYear() + "-";var M =(date.getMonth() + 1 < 10 ?"0" + (date.getMonth() + 1) :date.getMonth() + 1) + "-";var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();var h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();var mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();return Y + "" + M + "" + D + " " + h + ":" + mm + ":" + s;
}/***   appId            ->      小程序ID             类型:String*   appToken         ->      自定义               类型:String*   token            ->      当前用户token        类型:String*   openid           ->      当前用户openid       类型:String*   triggerType      ->      事件类型             类型:String*   pageInfo {       ->      当前页面信息         类型:Object*     pageUrl:       ->      不带参数             类型:String*     url:           ->      带参数               类型:String*     ...params      ->      当前页面所有参数       类型:Object*   }*   entryTime        ->      进入页面时间          类型:Number*   leaveTime        ->      离开当前页面时间      类型:Number*   stayTime         ->      停留时长             类型:Number   单位:ms*   sysTemInfo       ->      设备信息             类型:Object*/export default {myMta
};

uniapp 数据统计，数据埋点，自定义事件埋点封装相关推荐

【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用
文章目录一.本地存储 1.概念 2.接口 3.实际操作二.自定义事件绑定 1.自定义事件使用过程 2.绑定自定义事件的语法 3.其他注意事项三.全局事件总线 1.全局事件总线概念 2.全局事件总 ...
Vue电商项目—数据统计—数据报表模块-11
Vue电商项目-数据统计-数据报表模块-11 1.1 数据统计概述数据统计模块主要用于统计电商平台运营过程的中的各种统计数据, 并通过直观的可视化方式展示出来, 方便相关运营和管理人员查看. 1.2 ...
广东省高考信息数据统计数据（2018-2021年）
1.数据集名称:广东省高考信息数据统计数据 2.时间范围:2018-2021年 3.数据说明: 4.包含内容: 1638169816464广东省2021年高考普通类(历史)分数段统计表(含本.专科层次 ...
埋点数据mysql分析_用户行为分析-埋点实时数仓实践(附用户关联源码)
一.概述埋点采集.用户行为分析.实时数仓.IdMapping 此文重点讲述埋点的数据模型.数据格式.数据实时采集.加工.存储及用户关联.关于用户行为分析的概念.意义以及埋点相关的东西此文不作赘述二 ...
oracle stalestats_深入理解oracle优化器统计数据(Optimizer Statistics)
理解oracle优化器统计数据首先来介绍oracle数据库使用基于规则优化器(RBO)来决定如何执行一个sql语句.基于规则优化器顾名思义,它是遵循一组规则来判断一个sql语句的执行计划.这组规则是 ...
如何使用友盟统计（自定义事件）
1.登录友盟统计,并确保你有相应的权限(设置->事件) 右侧的"添加事件"就是为自己的event id添加事件 2.添加事件(确保你的event id 和你app的一致),并 ...
python数据清洗实战入门笔记（五）数据统计
数据清洗之数据统计数据分组方法练习 1.1在线杂货店订单数据 1.2 数据分组运算聚合函数使用练习分组对象与apply函数练习透视图与交叉表练习数据集地址: https://pan. ...
WEB数据库管理平台kb-dms:数据统计【十二】
数据统计数据统计页面主要用于统计用户对于数据库操作的执行记录,方便管理员及用户查看平台的使用情况. 统计页面如下图所示: 接入团队统计平台接入的团队数量. 数据源数量统计平台数据源的数量. 执行 ...
prop与自定义事件
prop与自定义事件 1. prop 1-1 什么是prop prop 是你可以在组件上注册的一些自定义属性.当一个值传递给一个 prop 属性的时候,它就变成了那个组件实例的一个属性组件中 pro ...

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

uniapp 数据统计，数据埋点，自定义事件埋点封装相关推荐

最新文章

热门文章