页面埋点H5 大数据uniapp 按需要更改代码就行

逻辑思路 跳转页面前,记录当前页面的信息停留的时长以及各种信息,然后等走的时候再将记录的信息发送出去

1.记录当前页面信息的函数

//  埋点通用接口
// triggerType: 必传 类型 entryStr(进入) || leaveStr(离开) || String:自定义事件描述
// pageUrl:非必传,页面路径,不穿默认获取当前路径
//再洗一个触发事件
async function myMta(triggerType = "", pageUrl = '') {console.log('埋点', triggerType, pageUrl)let entryTime, leaveTime, stayTime, nowTime;// entryTime 进入页面时间// leaveTime 离开页面时间// stayTime  停留时长// nowTime   进行当前函数的时间if (!triggerType) returnif (triggerType == 'entryStr') {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();}//异步请求当前网络信息是wifi还是啥uni.getNetworkType({success: function(res) {let networkType = res.networkType;let token, openid, sysTemInfo;try {uni.getStorage({key: 'storage_key',success: function(res) {token = res.data.tokenopenid = res.data.openIduni.getSystemInfo({success: function(res) {sysTemInfo = resconst urlArgs =getCurrentPageUrlWithArgs(); //通过这个函数获取当前页面的信息 如果想返回更多自己去函数里面更改var data = {token: token,openid: openid,triggerType: triggerType,networkType: networkType,pageInfo: {pageUrl: pageUrl,route: urlArgs.route,params: urlArgs.options,title: urlArgs.title,},entryTime: toDateDetail(entryTime),leaveTime: toDateDetail(leaveTime),nowTime: toDateDetail(nowTime),stayTime: stayTime,sysTemInfo: sysTemInfo,// ip: ip[0]}data = {token: token,openid: openid,triggerType: triggerType,networkType: networkType,pageInfo: JSON.stringify({pageUrl: pageUrl,route: urlArgs.route,params: urlArgs.options,title: urlArgs.title,}),entryTime: toDateDetail(entryTime),leaveTime: toDateDetail(leaveTime),nowTime: toDateDetail(nowTime),stayTime: stayTime,sysTemInfo: JSON.stringify(sysTemInfo),// ip: ip[0]}var headers = {};headers['X-Token'] = tokenuni.request({url: 'https://lingzhuang.gengduoke.com/adminapi/customtrajectory/save',data: data,header: headers,method: 'post',success: (res) => {console.log('res', res)},fail: (err) => {console.log('err', err)}})},fail(error) {sysTemInfo = 'null'}})},fail(error) {token = "null"}})} catch (e) {}}})
}// 获取当前页面链接和参数
function getCurrentPageUrlWithArgs() {const pages = getCurrentPages();const currentPage = pages[pages.length - 1]; //当前页面的全部信息const route = currentPage.route; //当前路由的路径 pages/login/loginconst options = currentPage.options; //url里面的参数json类型const title = currentPage.$holder.navigationBarTitleText //当前页面的navigationBarTitleText/拼接路由url字符串开始///let urlWithArgs = `/${route}?`; //将url里面的参数拼接成字符串  /pages/login/login?a=1for (let key in options) {const value = options[key];urlWithArgs += `${key}=${value}&`;}urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1);/拼接路由url字符串结束///return {options, //当前页面的参数urlWithArgs, //当前页面的参数route,title};
}function toDateDetail(number) {if (!number) number = new Date();// 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
};

2.跳转进行路由拦截然后让他进行第一个里面的函数的操作

import Mta from "./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});},share:()=>{Mta.myMta('share')}
}
export default {...nav
}

3.调用页面跳转以及函数监听和发送

this.nav.navigateTo({url:'/pages/login/login'
})

4.可以封装全局

页面埋点/
import nav from '@/utils/navRoute.js'
Vue.prototype.nav = nav
//1.navigateTo
//2.reLaunch
//3.switchTab
//4.navigateBack

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

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

相关文章

微信小程序支付教程

微信小程序支付教程 Person&#xff1a; 微信小程序支付有几种版本&#xff0c;分别是什么&#xff0c;写一个详细教程介绍下 ChatGPT&#xff1a; 微信小程序支付主要有两种版本&#xff0c;分别为&#xff1a;JSSDK版本&#xff08;v1.0&#xff09;和WeixinJSBridge版本&…

超宽输送带耐热性能怎么样

超宽输送带耐热性能解析 随着工业领域的不断发展和技术革新&#xff0c;超宽输送带的应用越来越广泛。这种输送带在冶金、建筑、化工等多个行业中发挥着至关重要的作用&#xff0c;特别是在高温环境下&#xff0c;其耐热性能更是备受关注。那么&#xff0c;超宽输送带的耐热性…

解释下泛型擦除

在Java中&#xff0c;泛型擦除&#xff08;Type Erasure&#xff09;是Java泛型实现的一个重要概念。由于Java的泛型是在编译时实现的&#xff08;称为编译时类型检查&#xff09;&#xff0c;而在运行时&#xff0c;Java虚拟机&#xff08;JVM&#xff09;并不支持泛型&#x…

HDFS小文件优化方法

1、HDFS小文件弊端 HDFS上每个文件都要在namenode上建立一个索引&#xff0c;这个索引的大小约为150byte&#xff0c;这样当小文件比较多的时 候 &#xff0c;就会产生很多的索引文件&#xff0c;一方面会大量占用namenode的内存空间 &#xff0c;另一方面就是索引文件过大是的…

Linux —— 线程控制

Linux —— 线程控制 创建多个线程线程的优缺点优点缺点 pthread_self进程和线程的关系pthread_exit 线程等待pthread_ join线程的返回值线程分离pthread_detach 线程取消pthread_cancel pthread_t 的理解 我们今天接着来学习线程&#xff1a; 创建多个线程 我们可以结合以前…

【离散数学】偏序关系中盖住关系的求取及格论中有补格的判定(c语言实现)

实验要求 求n的因子函数 我们将n的因子存入数组中&#xff0c;n的因子就是可以整除n的数&#xff0c;所以我们通过一个for循环来求。返回因子个数。 //求n的因子,返回因子个数 int factors(int arr[], int n) {int j 0;for (int i 1; i < n; i){if (n % i 0){arr[j] i…

C++反向迭代器

C反向迭代器 反向迭代器是用正向迭代器适配实现的&#xff0c;本质是写一个反向迭代器的类模板&#xff0c;给编译器传不同的容器的正向迭代器实例化&#xff0c;编译器去实例化出各种类模板对应的反向迭代器。 #pragma once namespace my_reverse_iterator {template<cla…

代码随想录算法训练营第五十三天| 1143.最长公共子序列,1035.不相交的线,53. 最大子序和

目录 题目链接&#xff1a;1143.最长公共子序列 思路 代码 题目链接&#xff1a; 1035.不相交的线 思路 代码 题目链接&#xff1a; 53. 最大子序和 思路 代码 总结 题目链接&#xff1a;1143.最长公共子序列 思路 ①dp数组&#xff0c;dp[i][j]表示[0,i-1]的text1和…

软件测试面试78问

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、问&#xff1a;你在测试中发现了一个bug&#xff0c;但是开发经理认为这不是一个bug&#xf…

关于使用git拉取gitlab仓库的步骤(解决公钥问题和pytho版本和repo版本不对应的问题)

先获取权限&#xff0c;提交ssh-key 虚拟机连接 GitLab并提交代码_gitlab提交mr-CSDN博客 配置完成上诉步骤之后&#xff0c;执行下列指令进行拉去仓库的内容 sudo apt install repo export PATHpwd/.repo/repo:$PATH python3 "实际路径"/repo init -u ssh://gitxx…

智能优化算法 | Matlab实现成长优化算法(Growth Optimizer,GO)(内含完整源码)

智能优化算法 | Matlab实现成长优化算法(Growth Optimizer,GO)(内含完整源码) 文章目录 智能优化算法 | Matlab实现成长优化算法(Growth Optimizer,GO)(内含完整源码)文章概述源码设计文章概述 智能优化算法 | Matlab实现成长优化算法(Growth Optimizer,GO)(内含…

Java的类和对象(一)—— 初始类和对象,this关键字,构造方法

前言 从这篇文章开始&#xff0c;我们就进入到了JavaSE的核心部分。这篇文章是Java类和对象的第一篇&#xff0c;主要介绍类和对象的概念&#xff0c;this关键字以及构造方法~~ 什么是类&#xff1f;什么是对象&#xff1f; 学过C语言的老铁们&#xff0c;可以类比struct自定义…

【哈希】Leetcode 383. 赎金信【简单】

赎金信 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。 magazine 中的每个字符只能在 ransomNote 中使用一次。 解题思路 可以使用哈希…

matlab进行滤波处理

在MATLAB中进行滤波处理&#xff0c;你可以使用内置的函数或自定义滤波器。以下是一些常见的方法&#xff1a; 1. 使用内置滤波器函数 MATLAB提供了多种内置滤波器函数&#xff0c;如filter&#xff0c;filtfilt&#xff0c;butter&#xff08;用于设计巴特沃斯滤波器&#x…

spark结课之tip2

spark常用方法总结&#xff1a; 一、从内部创建RDD (1).通过并行化集合&#xff08;Parallelized Collections&#xff09;&#xff1a; 可以使用SparkContext的parallelize方法将一个已有的集合转换为RDD。 基本语法&#xff1a; parallelize(collection, numSlicesNone)…

AI系列:大语言模型的RAG(检索增强生成)技术(下)-- 使用LlamaIndex

目录 前言什么是LlamaIndex?LlamaIndex代码设置embedding模型设置LLM模型索引查询机 验证使用感受参考资料 前言 继上一篇文章AI系列&#xff1a;大语言模型的RAG&#xff08;检索增强生成&#xff09;技术&#xff08;上&#xff09;&#xff0c;这篇文章主要以LlamaIndex为…

银行业数据运营场景下的数据埋点方案

1、引言 随着金融科技的快速发展&#xff0c;银行业的数据运营变得日益重要。数据埋点作为数据收集的重要手段&#xff0c;对于银行业务的精细化运营、风险管理和产品迭代等方面起着至关重要的作用。本方案将针对银行业数据运营场景&#xff0c;设计一套完整的数据埋点方案&am…

【生信技能树】GEO数据挖掘全流程

R包的安装&#xff0c;每次做分析的时候先运行这段代码把R包都安装好了&#xff0c;这段代码不需要任何改动&#xff0c;每次分析直接运行。 options("repos""https://mirrors.ustc.edu.cn/CRAN/") if(!require("BiocManager")) install.packag…

思源笔记如何结合群晖WebDav实现云同步数据

文章目录 1. 开启群晖WebDav 服务2. 本地局域网IP同步测试3. 群晖安装Cpolar4. 配置远程同步地址5. 笔记远程同步测试6. 固定公网地址7. 配置固定远程同步地址 在数字化时代&#xff0c;信息的同步与共享变得尤为重要。无论是个人用户还是企业团队&#xff0c;都渴望能够实现跨…