详解微信小程序(Taro)手动埋点和自动埋点的实(3)

// myProxy.js module.exports = (function() { let OriginPage = Page let OriginComponent = Component return (Page = function(conf) { conf.forEach(function(e) { let [methodName, methodFn] = e if (typeof methodFn === 'function') { conf[methodName] = function(...args) { // 做你想做的事,如改写 conf 等 methodFn.call(this, ...args) } } }) return OriginPage(conf) })( (Component = function(conf) { const methods = conf.methods methods.forEach(function(e) { // 做你想做的事,如改写 conf 等 }) OriginComponent(conf) }) ) })()

然后在 app.tsx 中直接引入 myProxy.js 即可

(2)如何自动生成元素唯一标识符

目前是通过埋点系统中申请下来的 eleSn 来唯一标识元素的,如果想要自动标识,可细分为:

XPath:在 pc / mobile 中还可以,但在小程序中不支持直接获取节点的 XPath / 根据 XPath 获取节点。

自动获取 组件方法名:原生小程序中,因为直接拦截了 Component options 中的 methods,所以在事件触发时可以获取到原始的方法名,但 Taro 项目中不行,因为 methods 被代理了一道,事件触发后,你看到的方法名都是 eh。

AST 解析源码分析出页面名、方法名和方法对应的注释来标识元素:Taro 项目中目测只能用这个方法,但成本较大,且「在代码不断迭代后,存量数据是否还能用」也是个问题,所以笔者未做尝试。

三、总结

本文概述了一下微信小程序(Taro)从手动埋点到自动埋点的思路。并按照页面埋点(pv、分享)以及元素埋点,分析了实现方式:

页面 pv:

封装 usePv,根据当前页面 path 从配置文件中读取出 pageSn

封装页面组件 WrapPage 调用 usePv()

分享好友/朋友圈:自定义 useShareAppMessage、useShareTimeline,根据当前页面 path 从配置文件中读取出 pageSn 和分享 eleSn,然后获取传入参数后埋点上报

元素埋点:提供了改写 Component 方法来拦截事件回调的思路,但因元素唯一标识符不能自动获取,所以不大适合自动化埋点。

到此这篇关于详解微信小程序(Taro)手动埋点和自动埋点的实现的文章就介绍到这了,更多相关小程序手动埋点和自动埋点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsgxxf.html