uniapp 小程序接入友盟 ,自定义事件携带参数


在根目录新建 track.js 和uma.js 文件

track.js 文件

/**

  • 全局事件统计,

  • 通过重写Component,实现监听onShow勾子函数,通过统一重写onShow函数

  • 用来统计哪个租户打开过哪个些页面

*/

import uma from ‘umtrack-wx’;

import Vue from ‘vue’

var track = (function(){

// var uma = 1;

var tenantid = null;

/**

  • onShow重写方法,类似于代理,先执行此方法,再执行真实的方法

  • @param {Object} e

*/

function show(e){

try{

//这里配置自定义事件

var pages = getCurrentPages()

uma.trackEvent(‘eventID’,{tenantid:track.tenantid,page:pages[pages.length-1].route})

//eventID是在友盟后台你自己创建的

}catch(e){

console.error(e)

}

}

/**

  • 设置重写方法(部署代理方法)

  • @param {Object} e 重写方法的对象

  • @param {Obj

### 如何在 UniApp 小程序中实现自定义埋点 #### 1. 数据结构设计 为了实现自定义埋点,首先需要明确要采集的数据字段及其含义。通常情况下,埋点数据会包含以下字段: - `timeStamp`:时间戳,用于记录事件发生的时间。 - `uuid`:设备的唯一标识符,用来区分不同用户或设备。 - `appChannel`:应用程序的下载渠道,帮助分析流量来源。 - `eventType`:事件类型(页面访问/按钮点击等)。 - `path`:当前页面路径,表示触发事件所在的界面。 - `loginType`:登录状态(0 表示未登录,1 表示已登录)。 - `userId`:用户的唯一标识符,在用户登录状态下有效。 - `appVersion`:应用版本号,便于追踪特定版本中的行为模式。 - `netType`:网络类型(Wi-Fi、4G 等),有助于优化用户体验。 这些字段可以根据实际业务需求调整[^4]。 --- #### 2. 埋点分类与实现方式 埋点主要分为 **事件埋点** 和 **停留时间上报** 两种形式。 ##### (1) 事件埋点 事件埋点是指当某个操作被触发时(如按钮点击、表单提交等),向服务器发送一条日志消息。以下是具体实现方法: -UniApp 的组件生命周期钩子函数中捕获事件,例如 `onLoad` 或 `onClick` 方法。 - 定义一个通用的日志上传接口,通过 HTTP 请求将埋点数据发送至后台服务端。 代码示例: ```javascript // 日志上传工具函数 function logEvent(data) { const url = 'https://your-server.com/log'; // 替换为您的服务器地址 uni.request({ url, method: 'POST', data, success(res) { console.log('日志上传成功', res); }, fail(err) { console.error('日志上传失败', err); } }); } // 页面加载时自动触发埋点 export default { onLoad(options) { const eventData = { timeStamp: Date.now(), uuid: this.getUUID(), // 获取设备唯一标识 appChannel: 'official_website', // 下载渠道 eventType: 'page_view', path: '/pages/index/index', // 当前页面路径 loginType: this.getLoginStatus() ? 1 : 0, // 登录状态判断 userId: this.getUserId(), // 用户 ID appVersion: plus.runtime.version || '', // 应用版本号 netType: uni.getNetworkTypeSync().networkType // 网络类型 }; logEvent(eventData); // 调用日志上传函数 }, methods: { onButtonClick() { // 按钮点击事件 const eventData = { timeStamp: Date.now(), uuid: this.getUUID(), appChannel: 'official_website', eventType: 'button_click', path: '/pages/index/index', loginType: this.getLoginStatus() ? 1 : 0, userId: this.getUserId(), appVersion: plus.runtime.version || '', netType: uni.getNetworkTypeSync().networkType }; logEvent(eventData); } } }; ``` 上述代码展示了如何在页面加载和按钮点击场景下分别完成埋点[^3]。 --- ##### (2) 停留时间上报 对于某些功能模块,除了关注用户的行为外,还需要计算其停留在某页面上的总时长。可以通过监听页面的 `onShow` 和 `onHide` 生命周期来实现这一目标。 代码示例: ```javascript let startTime; export default { onShow() { startTime = Date.now(); // 记录进入页面的时间 }, onHide() { if (!startTime) return; // 如果没有记录开始时间,则跳过 const duration = Date.now() - startTime; // 计算停留时长 const eventData = { timeStamp: Date.now(), uuid: this.getUUID(), appChannel: 'official_website', eventType: 'stay_duration', path: '/pages/index/index', stayTime: duration / 1000, // 单位转换成秒 loginType: this.getLoginStatus() ? 1 : 0, userId: this.getUserId(), appVersion: plus.runtime.version || '', netType: uni.getNetworkTypeSync().networkType }; logEvent(eventData); // 上报停留时长数据 } }; ``` 此部分实现了基于页面显示隐藏周期的停留时间统计。 --- #### 3. 集成第三方 SDK(可选) 如果不想完全依赖手动编码的方式实现埋点,也可以考虑引入成熟的第三方统计 SDK,比如友盟+ 提供的小程序插件支持。只需按照官方文档配置好 AppID 和 SecretKey 后即可快速启用基础功能[^1]。 需要注意的是,即使使用了第三方解决方案,仍需保留一定的灵活性以应对特殊定制化需求[^2]。 --- #### 总结 综上所述,UniApp 小程序中的自定义埋点可通过组合 JavaScript API 来捕捉各类交互动作并将其转化为标准化 JSON 格式的请求体传递给远程服务器存储解析;同时借助框架本身强大的跨平台特性还能进一步简化多终端适配工作量。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值