当前位置: 首页 > news >正文

基于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"

},

相关文章:

基于uni-app的埋点sdk设计

一、统计app激活状态 在App.vue 中 利用onShow生命周期验证 或者操作 onShow: function () { uni.showToast({ title: onShow }) }, 二、页面级别的统计 &#xff08;进入页面、停留时长、手机系统信息、网络状态、页面路径、标题&#xff09; 需要收集的数据 { &quo…...

Python学习笔记(三)

一、使用朴素贝叶斯制作鸢尾花数据模型 from sklearn.preprocessing import StandardScaler from sklearn.naive_bayes import MultinomialNB from sklearn.datasets import load_iris from sklearn.model_selection import train_test_split from sklearn.feature_extraction…...

Python办公自动化之Excel做表自动化:全网最全,看这一篇就够了!

0 Python Excel库对比 我们先来看一下python中能操作Excel的库对比&#xff08;一共九个库&#xff09;&#xff1a; 1 Python xlrd 读取 操作Excel 1.1 xlrd模块介绍 &#xff08;1&#xff09;什么是xlrd模块&#xff1f; python操作excel主要用到xlrd和xlwt这两个库&…...

【学习笔记】R语言入门与数据分析1

数据分析 数据分析的过程&#xff1a; 数据采集 数据存储 数据分析 数据挖掘 数据可视化 进行决策 数据挖掘 数据量大 复杂度高&#xff0c;容忍一定的误差限 追求相关性而非因果性 数据可视化 直观明了 R语言介绍 R是免费的&#xff08;开源软件、扩展性好&#xff09;…...

MyBatis-Spring整合

引入Spring之前需要了解mybatis-spring包中的一些重要类&#xff1b; http://www.mybatis.org/spring/zh/index.html 什么是 MyBatis-Spring&#xff1f; MyBatis-Spring 会帮助你将 MyBatis 代码无缝地整合到 Spring 中。 知识基础 在开始使用 MyBatis-Spring 之前&#x…...

资深亚马逊运营实战技巧:跨境电商6大选品法

1、工具选品法 比如店雷达&#xff0c; 通过大数据分析工具选出来利基产品或者通过工具选出来利基的市场&#xff0c;然后再通过分析市场来得到产品。 以女装为例&#xff0c;通过大数据分析&#xff0c;全方位对市场需求、款式、质量等进行多维度判断&#xff0c;其中SKU销量…...

bugku-web-需要管理员

页面源码 <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8"> <title>404 Not Found</title> </head> <body> <div idmain><i> <h2>Something error:</h2…...

STM32之FreeRTOS移植

1.FreeRTOS的移植过程是将系统需要的文件和代码进行移植和裁剪&#xff0c;其移植的主要过程为&#xff1a; &#xff08;1&#xff09;官网上下载FreeRTOS源码&#xff1a;https://www.freertos.org/ &#xff08;2&#xff09;移植文件夹&#xff0c;在portable文件夹中只需…...

SpringBoot实用开发(十四)-- 消息(Message)的简单认识

目录 1.消息的概念 2.Java处理消息的标准规范 3.JMS 4.AMQP 5.MQTT 1.消息的概念 广义角度来说,消息其实就是信息,但是和信息又有所不同。信息通常被定义为一组数据,而消息除了具有数据的特征之外,还有...

【Spring Boot 源码学习】SpringApplication 的 run 方法核心流程介绍

《Spring Boot 源码学习系列》 SpringApplication 的 run 方法核心流程介绍 一、引言二、往期内容三、主要内容3.1 run 方法源码初识3.2 引导上下文 BootstrapContext3.3 系统属性【java.awt.headless】3.4 早期启动阶段3.5 准备和配置应用环境3.6 打印 Banner 信息3.7 新建应用…...

如何保证消息不丢失?——使用rabbitmq的死信队列!

如何保证消息不丢失?——使用rabbitmq的死信队列&#xff01; 1、什么是死信 在 RabbitMQ 中充当主角的就是消息&#xff0c;在不同场景下&#xff0c;消息会有不同地表现。 死信就是消息在特定场景下的一种表现形式&#xff0c;这些场景包括&#xff1a; 消息被拒绝访问&am…...

html、css、京东移动端静态页面,资源免费分享,可作为参考,提供InsCode在线运行演示

CSDN将我上传的免费资源私自变成VIP专享资源&#xff0c;且作为作者的我不可修改为免费资源&#xff0c;不可删除&#xff0c;寻找客服无果&#xff0c;很愤怒&#xff0c;&#xff08;我发布免费资源就是希望大家能免费一起用、一起学习&#xff09;&#xff0c;接下来继续寻找…...

头歌-机器学习 第13次实验 特征工程——共享单车之租赁需求预估

第1关&#xff1a;数据探索与可视化 任务描述 本关任务&#xff1a;编写python代码&#xff0c;完成一天中不同时间段的平均租赁数量的可视化功能。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 读取数据数据探索与可视化 读取数据 数据保存在./step1/…...

Unity 2D让相机跟随角色移动

相机跟随移动 最简单的方式通过插件Cinemachine 在窗口/包管理器选择全部找到Cinemachine&#xff0c;导入。然后在游戏对象/Cinemachine创建2D Camera。此时层级中创建一个2D相机。选中人物拖入检查器Follow。此时相机跟随人物移动。 修改相机视口距离 在检查器中Lens下调正…...

【面试题】s += 1 和 s = s + 1的区别

文章目录 1.问题2.发现过程3.解析 1.问题 以下两个程序真的完全等同吗&#xff1f; short s 0; s 1; short s 0; s s 1; 2.发现过程 初看s 1 和 s s 1好像是等价的&#xff0c;没有什么区别。很长一段时间内我也是这么觉得&#xff0c;因为当时学习c语言的时候教科书…...

ARM的学习

点亮流水灯 .text .global _start _start: 使能GPIOE的外设时钟 RCC_MP_AHB4ENSETR 0x50000a28 [4]->1LDR R0,0X50000A28 指定基地址LDR R1,[R0] 将寄存器数据读取出来保存到R1中ORR R1,R1,#(0x3<<4) [4]设置为1ORR R1,R1,#(0x3<<5) [5]设置为1STR …...

Restful API接口规范(以Django为例)

Restful API接口规范(以Django为例) Restful API的接口架构风格中制定了一些规范&#xff0c;极大的简化了前后端对接的时间&#xff0c;以及增加了开发效率 安全性保证–使用https路径中带 api标识路径中带版本号数据即资源&#xff0c;通常使用名词操作请求方式决定操作资源…...

AI助力,程序员压力倍增?

讲动人的故事,写懂人的代码 你知道程序员现在在AI辅助编程时最头疼的事情是什么吗?就是怎么在改代码的时候保住小命。 大家都听过程序员因为工作太累导致过劳湿的事情。 无论是写新功能、修bug,还是更改系统配置,都得改代码。 现在有了AI的帮助,本应该轻松很多,为什么…...

LoRA微调

论文&#xff1a;LoRA: Low-Rank Adaptation of Large Language Models 实现&#xff1a;microsoft/LoRA: Code for loralib, an implementation of “LoRA: Low-Rank Adaptation of Large Language Models” (github.com) 摘要 自然语言处理的一个重要的开发范式包括&#…...

45.基于SpringBoot + Vue实现的前后端分离-驾校预约学习系统(项目 + 论文)

项目介绍 本站是一个B/S模式系统&#xff0c;采用SpringBoot Vue框架&#xff0c;MYSQL数据库设计开发&#xff0c;充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特点&#xff0c;使得基于SpringBoot Vue技术的驾校预约学习系统设计与实现管理工作…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...