基于uni-app的埋点sdk设计

一、统计app激活状态

在App.vue 中 利用onShow生命周期验证 或者操作

onShow: function () {

uni.showToast({

title: 'onShow'

})

},

二、页面级别的统计 （进入页面、停留时长、手机系统信息、网络状态、页面路径、标题）

需要收集的数据

{

"pageType": "leavePage",

"networkType": "wifi",

"pageInfo": {

"pageUrl": "pages/index/newIndex",

"title": ""

},

"entryTime": "2024-04-10 13:18:50",

"leaveTime": "2024-04-10 13:18:51",

"nowTime": "2024-04-10 13:18:51",

"stayTime": 279,

"sysTemInfo": {

"appName": "某某app",

"appVersion": "2.1.4",

"brand": "apple",

"platform": "ios",

"system": "iOS 17.3.1"

},

"pageLoadTime": 873

}

通过混入mixins 每个页面生命周期埋点统计、编写逻辑方法

三、页面内部事件级别的统计 （各种事件信息集合eventTrack（点击、复制、下载、来源某个特定页面的操作）、 手机系统信息、网络状态、页面路径、标题）

需要收集的数据

{

"networkType": "unknown",

"pageInfo": {

"pageUrl": "pages/order/index",

"title": "订单"

},

"sysTemInfo": {

"appName": "某某app",

"appVersion": "2.1.4",

"brand": "xiaomi",

"platform": "android",

"system": "Android 12"

},

"eventTrack": { // 事件所需要的埋点字段

"eventCode": "B0004"

}

}

通过混入mixins 每个页面生命周期埋点统计、编写逻辑方法

四、具体的设计流程

1、创建 埋点sdk方法 pointCom.js

主要三个方法

myPointPage, 页面级别触发的

toDateDetail, 时间转化函数

myPointEvent, 页面内部事件触发的

详细编码

import { pagesObj } from '@/uni-config/pages.js' // 页面路由和标题的映射map

console.log(pagesObj, 'uni-config')

async function myPointPage(pageType = "", pageUrl = "") {

console.log("埋点", pageType, pageUrl);

let entryTime, leaveTime, stayTime, nowTime;

if (!pageType) return;

if (pageType == "entryPage") {

entryTime = new Date().getTime();

nowTime = new Date().getTime();

leaveTime = null;

uni.setStorageSync("entryTime", entryTime);

} else {

entryTime = uni.getStorageSync("entryTime");

leaveTime = new Date().getTime();

stayTime = leaveTime - entryTime;

nowTime = new Date().getTime();

}

uni.getNetworkType({

success: function (res) {

let networkType = res.networkType;

try {

uni.getSystemInfo({

success: function (res) {

let { appName,

appWgtVersion,

brand,

platform,

system } = res

let data = {

pageType: pageType,

networkType: networkType,

pageInfo: {

pageUrl: pageUrl,

title: pagesObj[pageUrl]

},

entryTime: toDateDetail(entryTime),

leaveTime: toDateDetail(leaveTime),

nowTime: toDateDetail(nowTime),

stayTime: stayTime,

sysTemInfo: {

appName,

appVersion: appWgtVersion,

brand,

platform,

system

},

};

if (pageType === "leavePage") {

data.pageLoadTime = uni.getStorageSync("pageLoadTime");

}

console.log('发送调用埋点接口', data)

},

fail(error) {

sysTemInfo = "null";

},

});

} catch (e) { }

},

});

}

async function myPointEvent(eventTrack = {}, pageUrl = "") {

uni.getNetworkType({

success: function (res) {

let networkType = res.networkType;

try {

uni.getSystemInfo({

success: function (res) {

let { appName,

appWgtVersion,

brand,

platform,

system } = res

let data = {

networkType: networkType,

pageInfo: {

pageUrl: pageUrl,

title: pagesObj[pageUrl]

},

sysTemInfo: {

appName,

appVersion: appWgtVersion,

brand,

platform,

system

},

eventTrack

};

console.log('myPointEvent发送调用埋点接口', data)

},

fail(error) {

sysTemInfo = "null";

},

});

} catch (e) { }

},

});

}

function toDateDetail(number) {

if (!number) return undefined;

// var n = number * 1000

var 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;

}

export default {

myPointPage,

toDateDetail,

myPointEvent,

};

2、创建 埋点混入的方法和生命周期 pointMixin.js

主要四个方法

eventTrack, 页面事件调用的函数

entryTrack, 页面进入调用的函数

leaveTrack, 页面离开调用的函数

pageLoadTime 页面onReady调用的函数

详细编码

import pointCom from "@/utils/pointCom.js";

export default {

data() {

return {

pointPageUrl: "", //跳转url

pageType: "", //事件类型 进入、离开

loadStartTime: "", //页面加载开始时间

};

},

onLoad() {

this.entryTrack();

},

onReady() {

this.pageLoadTime();

},

onHide() {

this.leaveTrack();

},

onUnload() {

this.leaveTrack();

},

methods: {

eventTrack(eventTrack = {}) {

console.log('eventTrack', eventTrack, this.pointPageUrl)

let pointPageUrl = getCurrentPages()[getCurrentPages().length - 1].route;

this.pointPageUrl = pointPageUrl;

pointCom.myPointEvent(eventTrack, this.pointPageUrl);

},

entryTrack() {

let loadStartTime = pointCom.toDateDetail(Number(new Date()));

let pointPageUrl = getCurrentPages()[getCurrentPages().length - 1].route;

this.pointPageUrl = pointPageUrl;

this.pageType = "entryPage";

this.loadStartTime = loadStartTime;

pointCom.myPointPage("entryPage", this.pointPageUrl);

},

pageLoadTime() {

let pageLoadTime = Number(new Date()) - new Date(this.loadStartTime).getTime()

console.log("pageLoadTime", pageLoadTime, this.loadStartTime)

uni.setStorageSync("pageLoadTime", pageLoadTime);

},

leaveTrack() {

if (this.pageType === "leavePage") return;

this.pageType = "leavePage";

pointCom.myPointPage("leavePage", this.pointPageUrl);

},

},

};

3、main.js 引入 pointMixin.js

详细编码

import pointMixin from "@/utils/pointMixin"; //配合埋点的mixin

Vue.mixin(pointMixin);

4、得到页面路由和标题的映射map

h5中可以得到标题等数据，但是app中无法获取

// 获取当前页面链接和参数

function getCurrentPageUrlWithArgs() {

const pages = getCurrentPages();

const currentPage = pages[pages.length - 1];

const route = currentPage?.route;

const options = currentPage?.options || {};

const title = currentPage?.$holder?.navigationBarTitleText || ''

console.log(title)

let urlWithArgs = /${route}?;

for (let key in options) {

const value = options[key];

urlWithArgs += ${key}=${value}&;

}

urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1);

return {

options, //当前页面的参数

urlWithArgs, //当前页面的参数

route,

title,

};

}

app获取相关数据需要另辟蹊径

通过文件的读取和写入来实现
具体编码

const fs = require("fs-extra")

let path = require("path")

let Hjson = require("hjson")

const chokidar = require("chokidar")

let rootPath = (function () {

let e = path.resolve(__dirname, "./")

return e

})()

function creatPagesJs() {

try {

const fileContent = fs.readFileSync('./pages.json', 'utf8');

const jsonObj = Hjson.rt.parse(fileContent);

let pages = jsonObj.pages

let pagesObj = {}

pages.map(item => {

let path = item.path

let title = item?.style?.navigationBarTitleText || ''

pagesObj[path] = title

})

console.log(pagesObj, 'pagesObj')

let pstr = "export const pagesObj = " + JSON.stringify(pagesObj, null, 2);

fs.outputFileSync(

path.resolve(rootPath, "uni-config", "pages.js"),

pstr

);

} catch (err) {

console.log(err);

}

}

const watcherPagesJson = chokidar

.watch(path.resolve(__dirname, "./pages.json"))

watcherPagesJson.on("all", (event, path) => {

console.log(event, path, 'pages.json')

if (event == "change") {

creatPagesJs()

}

})

creatPagesJs();

如何调用 package.json 配置调用命令

"scripts": {

"getPages": "node getPages.js"

},

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/805900.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

8.信号量的使用

8.信号量的使用

信号量 ​ 注意信号量和信号没有关系&#xff0c;信号是用来通知的&#xff0c;信号量则表示资源的数量&#xff0c;支持的动作&#xff1a;"give"给出资源&#xff0c;计数值加 1&#xff1b;"take"获得资源&#xff0c;计数值减 1。 ​ 在rtt中&#x…
阅读更多...
2024年，国产大模型的变革与突破

2024年，国产大模型的变革与突破

在今年两会上&#xff0c;“人工智能&#xff08;AI&#xff09;”成为热议焦点。政府工作报告不仅多次提及&#xff0c;还首次提出“人工智能”创新行动&#xff0c;彰显了对科技发展的深刻洞察和前瞻性布局。 回顾历年报告&#xff0c;从“互联网”到“智能”&#xff0c;每…
阅读更多...
c++子类和父类成员函数重名

c++子类和父类成员函数重名

子类和父类返回值参数相同&#xff0c;函数名相同&#xff0c;有virtual关键字&#xff0c;则由对象的类型决定调用哪个函数。子类和父类只要函数名相同&#xff0c;没有virtual关键字&#xff0c;则子类的对象没有办法调用到父类的同名函数,父类的同名函数被隐藏了&#xff0c…
阅读更多...
Pinctrl子系统、GPIO子系统概念

Pinctrl子系统、GPIO子系统概念

Pinctrl概念&#xff1a; 无论是哪种芯片&#xff0c;都有类似图 16.1 的结构&#xff1a; 要想让 pinA 、 B 用于 GPIO &#xff0c;需要设置 IOMUX 让它们连接到 GPIO 模块&#xff1b; 要想让 pinA 、 B 用于 I2C &#xff0c;需要设置 IOMUX 让它们连接到 …
阅读更多...
go语言学习--4.方法和接口

go语言学习--4.方法和接口

目录 1.方法 2.接口 2.1结构体类型 2.2具体类型向接口类型赋值 2.3获取接口类型数据的具体类型信息 3.channel 3.1阻塞式读写channel操作 2.3非阻塞式读写channel操作 4.map 4.1插入数据 4.2删除数据 4.3查找数据 4.4扩容 1.方法 方法一般是面向对象编程(OOP)的一…
阅读更多...
《由浅入深学习SAP财务》：第2章 总账模块 - 2.6 定期处理 - 2.6.2 月末操作：GR/IR重组

《由浅入深学习SAP财务》：第2章 总账模块 - 2.6 定期处理 - 2.6.2 月末操作：GR/IR重组

2.6.2 月末操作&#xff1a;GR/IR重组 SAP在采购订单收货和发票校验时分别产生凭证&#xff0c;中间采用GR/IR过渡。GR即为收货&#xff0c;IR即为收票。月末&#xff0c;GR/IR的余额根据收货和收票的情况进行判断&#xff0c;转入“应付暂估”或“在途物资”&#xff0c;次月自…
阅读更多...
C++ 数据类型

C++ 数据类型

数据类型介绍 数据类型的作用&#xff1a;编译器预算数据分配的内存空间大小。 ps&#xff1a;可以通俗理解为&#xff1a;数据类型是用来规范内存的开销&#xff0c;约定数据在内存中的格式&#xff0c;便于存储。 变量 变量的语法 在计算机程序中&#xff0c;变量是用来存…
阅读更多...
Visual Studio 2022 快速注释代码

Visual Studio 2022 快速注释代码

在 Visual Studio 2022 中&#xff0c;可以使用快捷键来快速注释或取消注释代码。以下是如何进行操作的步骤&#xff1a; 注释 1. 单行注释&#xff1a; 对于当前行或选定的多行代码&#xff0c;按下 Ctrl /&#xff08;斜杠&#xff09;可以添加单行注释符号&#xff08;在…
阅读更多...
Testng测试框架（4）-数据驱动

Testng测试框架（4）-数据驱动

​数据驱动 Testng使用 Parameters注释传递任意参数给测试用例 There are three ways to set these parameters 有三种方法设置参数&#xff1a; 1、testng.xml文件 2、Programmatically 3、Java system properties testng.xml文件中的参数 Parameters({ "first-name&q…
阅读更多...
Vue3实践之全局请求URL配置和请求参数说明

Vue3实践之全局请求URL配置和请求参数说明

Vue3实践之全局请求URL配置和请求参数说明 全局请求URL配置 1、首先需要导入router和axios import router from "/router";2、创建app&#xff0c;将router挂载到app上 const app createApp(App) app.use(router).use(elementIcons).mount(#app)3、设置全局请求…
阅读更多...
安装苹果ipa的方法

安装苹果ipa的方法

1、如何生成udid udid获取工具 https://www.betaqr.com/tools 提示下载后 2、爱思助手安装苹果app mac下载爱思助手&#xff0c;数据线连接手机&#xff0c;把ipa包拖到爱思助手app应用选项里 3、新手机调试需要先选中设备&#xff0c;再注册
阅读更多...
VMwear桥接网络正确配置+静态IP设置

VMwear桥接网络正确配置+静态IP设置

1.桥接网络配置 很多时候在VMware安装完虚拟机之后&#xff0c;会发现配置的桥接网络没有起作用&#xff0c;如果是Linux下输入ifconfig发现只有ipv6的地址而没有ipv4&#xff0c;说明没有桥接没有启用成功&#xff0c;需要按照以下方式来设置 在VMware的左上角打开编辑&#…
阅读更多...
Redis(持久化 -- RDB AOF)

Redis(持久化 -- RDB AOF)

持久化 通常我们认为持久化为: 重启进程/重启主机之后, 数据仍然存在不丢失 把数据存储在硬盘上 – 持久 把数据存储在内存中 – 不持久 Redis 持久化 redis 是一个内存数据库, 也就是说本身是不持久的(但是快[效率高]), 于是 Redis 提供了持久化机制 — RDB 和 AOF 二者都是对…
阅读更多...
H.265网页无插件播放EasyPlayer.js流媒体播放器常见问题及解答

H.265网页无插件播放EasyPlayer.js流媒体播放器常见问题及解答

EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;无须安装任何插件&#xff0c;起播快、延迟低、兼容性强&#xff0c;使用非常便捷。 今天我们来汇总下用户常见的几个问题及解答。 1、EasyPlayer.js播放多路H.265视…
阅读更多...
Android 输入法框架

Android 输入法框架

输入法属于输入系统的一部分&#xff0c;区别于输入系统只能向系统产生时间&#xff0c;输入法能向系统输入具体的内容&#xff0c;下面来认识输入法的大体框架&#xff0c;以下内容参考清华大学出版社出版的《Android图形显示系统》。 输入法框架包含3个组件&#xff0c;各组件…
阅读更多...
python画图Matplotlib和Seaborn

python画图Matplotlib和Seaborn

python画图Matplotlib和Season 一、Matplotlib1、介绍2、安装3、内容二、Seaborn1、介绍2、安装3、内容一、Matplotlib Matplotlib官网 1、介绍 Matplotlib 是一个 Python 的绘图库，用于创建高质量的二维图表和一些基本的三维图表。它广泛应用于科学计算、数据分析、工程学和…
阅读更多...
基于springboot+vue实现的的成人教育教务系统

基于springboot+vue实现的的成人教育教务系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;spring…
阅读更多...
uview2 表单Form校验validate不生效处理方法

uview2 表单Form校验validate不生效处理方法

先贴官网实例&#xff1a; <template><view class""><u-form :model"form" ref"uForm"><u-form-item label"姓名" prop"name"><u-input v-model"form.name" /></u-form-item&g…
阅读更多...
AI时代，搜索引擎的巨头地位恐怕不保了

AI时代，搜索引擎的巨头地位恐怕不保了

兄弟们&#xff0c;你们使用搜索网站的频率有降低吗&#xff1f; ChatGPT 已经流行了一年多了&#xff0c;这期间数个大模型都发展了起来。 搜索引擎本质上也属于问答系统&#xff0c;所以&#xff0c;在大模型成熟之后&#xff0c;我使用搜索的频率越来越低了。 主要是因为…
阅读更多...
python实现pdf的页面替换

python实现pdf的页面替换

利用第三方库PyPDF2&#xff0c;下面例子中进行的是将 origin.pdf 的第17页替换为 s17.pdf 的第1页&#xff1a; import PyPDF2def replace_pages(original_pdf_path, replacement_pages):with open(original_pdf_path, rb) as original_file:original_pdf PyPDF2.PdfReader(…
阅读更多...
最新文章

Copyright @ 2022~2023