支付宝小程序从手动埋点到自动埋点的实现过程
更新时间:2022年3月25日 14:46 点击:640 作者:shuaiB
手动埋点
现在小程序埋点需要手动添加埋点事件触发,
// axml <view onTap="track" data-ilog="xxx">这只是一个展示view</view> //js track(e) { ...业务代码 // 埋点代码 app.sentEventCustom("click", this, this.query, e.target.dataset.ilog); }
会有以下几个问题:
- 业务代码和埋点代码写在一起,影响代码的阅读体验
- 埋点代码散落在各个地方,不方便管理。比如运营要增加删除埋点时,统一管理会更方便
需要埋点的场景
1.普通点击事件
// axml <view onTap="track" class="ilog" data-ilog="xxx">这只是一个展示view</view> //js track(e) { // 埋点代码 report() }
- 下拉刷新时,没有触发点击,可以选择对该事件进行埋点
/** * @description: 下拉刷新 * @param {*} * @return {*} */ onPullDownRefresh() { // 埋点代码 report() },
- 埋点要在promise事件上
//js async onAuthPhone() { await app.getUserPhone() // 埋点代码 report() }
总结:我们要实现页面元素点击时触发埋点,也要能在事件执行后触发埋点
自动埋点
1、通过事件冒泡监听元素是否被点击
方案一:在axml最外层绑定catchTap事件,获取点击元素的ilog信息
- 缺点:捕获的目标元素为最里层,该层不一定添加了ilog
方案二:在需要发送埋点的元素增加样式类'.ilog',点击时最外层catchTap获取点击位置的X,Y轴值,同时通过queryselectAll获取'.ilog'元素的位置,判断点击位置是否在'.ilog'内,如果是的话,发送埋点信息。如下图:
2、扩展Page方法
由于最外层绑定catchTap事件方法需要在Page中定义以供wxml调用,如果每个页面手动编写就过于繁琐了,可以通过改写Page来实现自动扩展,代码如下
// 记录原Page方法 const originPage = Page; // 重写Page方法 Page = (page) => { // 给page对象注入三个方法 page.elementTracker = function() {} page.methodTracker = function() {} page.isClickTrackArea = function() {} return originPage(page); };
3、对页面函数埋点
有些场景我们除了对页面元素点击埋点,还要对页面函数进行埋点,例如用户下拉刷新的时候,可以对原方法进行包装,插入埋点代码,方案和第二点差不多。
const originPage = Page; // 重写Page方法 Page = (page) => { // 给onShow方法插入埋点 const originMethod = page['onShow']; page['onShow'] = function() { report() // 记录埋点 return originMethod(); } return originPage(page); };
4、通过配置表设置埋点
上面介绍了页面元素和函数的埋点方式,下面讲一下如何管理埋点信息解决代码入侵问题,可以把埋点信息以配置表的方式声明,以后还可以做到动态配置,在服务端配置完毕下发到客户端。
const tracks = { path: 'pages/film/detail', elementTracks: [ { element: '.buy-now', // 声明需要监听的元素 dataKeys: ['film.filmId'], // 声明需要获取Data下的film对象下的filmId字段 }, ], methodTracks: [ { method: 'toBannerDetail', // 声明需要监听的函数 dataKeys: ['imgUrls'], // 声明需要获取Data下的imgUrls数据 }, ], };
总结
到此这篇关于支付宝小程序从手动埋点到自动埋点的文章就介绍到这了,更多相关支付宝小程序自动埋点内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7078498526761582605
相关文章
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- 这篇文章主要介绍了uniapp微信小程序:key失效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-20
- 本文实例讲述了PHP常用的小程序代码段。分享给大家供大家参考,具体如下:1.计算两个时间的相差几天$startdate=strtotime("2009-12-09");$enddate=strtotime("2009-12-05");上面的php时间日期函数strtotime已经把字符串...2015-11-24
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 为公司系统业务需要,这几天了解了一下微信和支付宝扫码支付的接口,并用c#实现了微信和支付宝扫码支付的功能。需要的朋友跟随小编一起看看吧...2020-06-25
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-19
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要介绍了Python爬取微信小程序通用方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-29
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要介绍了微信小程序自定义底部弹出框动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-16
- 微信小程序目前的火热程度相信不用多言,最近利用空余时间用小程序实现了个动态的登录页效果,所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-05-09
- 这篇文章主要给大家介绍了关于微信小程序页面间传值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-09
- 这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 本文主要介绍了手把手教你uniapp和小程序分包,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-02