详解微信小程序（Taro）手动埋点和自动埋点的实现
每一个公司要想用户增长，都要收集和分析用户操作数据，因此埋点是必不可少的事情。
而对于前端职业发展来说，传统的手动埋点，无疑是繁琐又无聊的事情，能简化就简化。
一、手动埋点
手动埋点就是在每一处需要的地方，都加一段上报埋点的代码。影响代码的阅读体验，且散落的埋点代码不方便管理。
以页面pv为例，我们此前是在每一个页面中上报pv：
//src/manual/home/index.tsx
importtrackingfrom"./tracking";
//pageSn是前端和产品约定的「页面在埋点系统的唯一标识」，比如这个项目首页的标识符是数字11664
constpageSn=11111;
exportdefault()=>{
//useDidShow是Taro专有的Hook，等同于小程序原生componentDidShow生命周期，会在页面展示的时候调用。
useDidShow(()=>{
//通过统一封装的sendPv方法发送pv埋点
sendPv(pageSn);
});
return手动埋点页面 ;
};
二、自动埋点
自动埋点可分为全自动埋点和半自动埋点。全自动埋点则是不管需不需要，将所有的点都埋了。前端肯定开心了“以后埋点产品都不要不要找我啦”，可数据同学就哭唧唧了。
比如，腾讯和Taro团队共同推出腾讯有数自动化埋点，接入超级简单。比如配置proxyPage为true即可“上报所有页面的browse、leave、share等事件”，配置autoTrack为true即可“自动上报所有元素的tap、change、longpress、confirm事件”。
可从数据量和有效性来说，「全埋」等于「不埋」，因为「全埋」一方面对数据存储量要求很高，另一方面会给我们负责数据清洗的同学带来大量工作。
所以接下来，还是从中寻求平衡，着重看半自动埋点。
1、页面曝光（pv）
页面曝光（pv），理想的上报方式是：
在一个统一的地方（如trackingConf.ts），配置好每个要埋点的页面的标识符（即pageSn）
页面显示后，自动判断下是否需要上报（是否在trackingConf.ts配置文件中），要就直接上报。
具体实现
（1）统一配置埋点字段，pageSn表示页面在埋点系统中的标识符
//trackingConf.ts
exportdefault{
"auto/home/index":{
pageSn:11111,
},
};
当然，如果你的业务允许三七二十一，上报所有页面pv（带上path让产品自己筛选），那（1）这步可以省了，直接看（2），这种方式可称为「pv全自动埋点」。
（2）封装usePvhook，在页面展示时，获取当前页面pageSn、判断是否要埋pv、要的话发送pv
//usePv.ts
//获取当前页面path，借助Taro的getCurrentInstance
exportconstgetPath=()=>{
constpath=Taro.getCurrentInstance().router?.path||"";
//去掉开头的/，比如将'/auto/home/index'改为'auto/home/index'
returnpath.match(/^\/*/)?path.replace(/^\/*/,""):path;
};
//获取当前页面pageSn、判断是否要埋pv、要的话发送pv
//入参getExtra支持携带额外参数
constusePv=({
getExtra,
}:{
getExtra?:()=>any;
}={})=>{
//页面曝光
useDidShow(()=>{
constcurrentPath=getPath();
//从trackingConf中获取pageSn
constpageSn=trackingConf[currentPath]?.pageSn;
console.log("自动获取pageSn",currentPath,pageSn);
if(pageSn){
constextra=getExtra?.();
//通过统一封装的sendPv方法发送pv埋点
extra?sendPv(pageSn,extra):sendPv(pageSn);
}
});
};
（3）然后封装页面组件WrapPage，使用上述的usePv()：
importReactfrom"react";
import{View}from"@tarojs/components";
importusePvfrom"./usePv";
functionWrapPage(Comp){
returnfunctionMyPage(props){
usePv();
return(
);
};
}
exportdefaultWrapPage;
（4）最后在所有页面组件，包一层WrapPage即可实现「所有页面按需埋点」：
//src/auto/home/index.tsx
constIndex=WrapPage(()=>{
return自动埋点页面 ;
});
后续新开发一个页面，除了用WrapPage包裹外，只需要在第（1）步的trackingConf.ts中增加该页面的pageSn即可。
提问环节
好奇宝宝们可能要问了：
（1）WrapPage里这样封装了usePv()，应该如何支持上报自定义字段呢？
举个例子，产品希望src/auto/home/index.tsx这个页面上报pv的时候，额外上报一下当前页面URL查询参数即params。
很简单，就是这个页面不要用WrapPage包裹，而是拿到params后直接调用usePv函数：
//src/auto/home/index.tsx
constIndex=()=>{
usePv({
getExtra:()=>{
constparams=Taro.getCurrentInstance().router?.params;
return{params};
},
});
return自动埋点页面 ;
});
（2）这里每个页面组件，都要用WrapPage包裹一下，对业务还是有侵入型了，原生小程序可以改写Page，在Page中直接usePv()。Taro项目应该也可以这么做，实现0业务侵入吧？
Taro项目中，确实可以也可以和原生小程序一样，在App中统一拦截原生Page，但这样的话，上面「某些页面要计算额外参数并上报」就不好解决了。
2、页面分享
微信小程序中，存在两种分享：
- 分享给好友：useShareAppMessage。
- 分享到朋友圈：useShareTimeline。小程序基础库v2.11.3开始支持，目前只在Android平台可用。
具体实现
以useShareAppMessage为例（useShareTimeline同理）：
（1）仍在trackingConf.ts统一配置文件中，增加分享埋点的标识字段eleSn（及额外参数）
//trackingConf.ts
exportdefault{
"auto/home/index":{
pageSn:11111,
shareMessage:{eleSn:2222,destination:0},//增加shareMessage包含分享好友的eleSn、业务额外参数destination
}
};
（2）封装useShareAppMessage方法，业务调用Taro.useShareAppMessage的地方全局替换为这个useShareAppMessage。
//分享给好友，统一埋点
exportconstuseShareAppMessage=(
callback:(payload:ShareAppMessageObject)=>ShareAppMessageReturn
)=>{
letnewCallback=(payload:ShareAppMessageObject)=>{
constresult=callback(payload)
constcurrentPath=getPath();//getPath获取当前页面路径，可参考「1、页面曝光（pv）」中的getPath
//从trackingConf中获取pageSn、shareMessage等
const{pageSn,shareMessage}=trackingConf[currentPath]
const{eleSn,...extra}=shareMessage||{}
letpage_el_sn=eleSn
const{imageUrl:image_url,path:share_url}=result
const{from:from_ele}=payload
constreportInfo={
from_ele,
share_to:'friend',//'friend'表示分享给好友
image_url,
share_url,
...extra
}
console.log('...useShareAppMessagetracking',{pageSn,page_el_sn,reportInfo})
sendImpr(pageSn,page_el_sn,reportInfo)//可自行封装sendImpr方法，发送分享埋点信息
returnresult
}
Taro.useShareAppMessage(newCallback)
}
这样，如果有个页面需增加分享好友的埋点，直接在trackingConf.ts中增加shareMessage的eleSn即可，useShareTimeline同理。
提问环节
好奇宝宝们可能要问了：页面需要增加分享好友/朋友圈的埋点，可否0配置（即不用修改上述的 trackingConf.ts文件）？
与前文中「pv全自动埋点」类似，只要和产品约定好捞数据的方式也可以，比如笔者和产品约定了：
每个页面分享好友/朋友圈，eleSn都是444444，然后产品通过pageSn判断是哪个页面，通过share_to判断是分享好友/朋友圈，对于分享好友的场景，再通过from_ele判断通过右上角分享还是点击页面中的按钮分享。
这样页面分享也可以全自动埋点了。
3、元素埋点
元素自动埋点的调研遇到阻力，尚未落地。下文主要谈不同思路遇到的问题，有好的建议欢迎评论区沟通。
我们元素埋点，较高频的有曝光、点击事件，中低频的有滚动、悬停等事件。
手动埋点的方式就是在元素指定事件触发的时候，手动执行sendImpr上报埋点（带上页面唯一标识符pageSn、元素唯一标识符eleSn）。
那这个环节是否可以省事一些呢？对业务无侵入，大概的做法还是：
在Component指定事件触发增加个hook->判断是否要上报埋点->满足条件则上报
问题一分为二：
（1）拦截元素事件回调
可以拦截并遍历小程序Component接收到的options.methods，如果是一个自定义函数，则在函数被调用的时候判断第一个参数（假设命名为e）的type是否等于tap等事件。这时候可以根据e等信息决定是否满足埋点上报条件了。
原生小程序中的实现，大致如下：
//App.js
App({
onLaunch(){
letold=Component
Component=function(config){
//拦截业务传入的config
constnewConf=proxyConfig(config)
old(newConf)
}
}
})
constproxyConfig=function(conf){
constmethods=conf.methods
//获取自定义方法（按需排除一些不埋点的方法）
letdiyMethods=Object.entries(methods).filter(function(method){
letmethodName=method[0]
return![
"onLoad",
"onShow",
"onReady",
"onHide",
"onUnload",
"onPullDownRefresh",
"onReachBottom",
"onPageScroll",
"onShareAppMessage",
"onResize",
"onTabItemTap",
"observer",
].includes(methodName);
})
diyMethods.forEach(function(method){
const[methodName,methodFn]=method
//修改conf中的methods
methods[methodName]=function(...args){
conste=args&&args[0]
if(e&&e.type==='tap'){
console.log('...tapping',methodName,args)//触发点击事件的时候，按需上报埋点
}
methodFn.call(this,...args)
}
});
//返回修改后的conf
returnconf
}
Taro项目中，不能直接在组件代码里用Component，但可以迂回一些的方式实现相同目的，比如：
//myProxy.js
module.exports=(function(){
letOriginPage=Page
letOriginComponent=Component
return(Page=function(conf){
conf.forEach(function(e){
let[methodName,methodFn]=e
if(typeofmethodFn==='function'){
conf[methodName]=function(...args){
//做你想做的事，如改写conf等
methodFn.call(this,...args)
}
}
})
returnOriginPage(conf)
})(
(Component=function(conf){
constmethods=conf.methods
methods.forEach(function(e){
//做你想做的事，如改写conf等
})
OriginComponent(conf)
})
)
})()
然后在app.tsx中直接引入myProxy.js即可
（2）如何自动生成元素唯一标识符
目前是通过埋点系统中申请下来的eleSn来唯一标识元素的，如果想要自动标识，可细分为：
- XPath：在pc/mobile中还可以，但在小程序中不支持直接获取节点的XPath/根据XPath获取节点。微信小程序可否支持通过XPath获取DOM元素？
- 自动获取组件方法名：原生小程序中，因为直接拦截了Componentoptions中的methods，所以在事件触发时可以获取到原始的方法名，但Taro项目中不行，因为methods被代理了一道，事件触发后，你看到的方法名都是eh。
- AST解析源码分析出页面名、方法名和方法对应的注释来标识元素：Taro项目中目测只能用这个方法，但成本较大，且「在代码不断迭代后，存量数据是否还能用」也是个问题，所以笔者未做尝试。
三、总结
本文概述了一下微信小程序（Taro）从手动埋点到自动埋点的思路。并按照页面埋点（pv、分享）以及元素埋点，分析了实现方式：
- 页面pv：
- 封装usePv，根据当前页面path从配置文件中读取出pageSn
- 封装页面组件WrapPage调用usePv()
- 分享好友/朋友圈：自定义useShareAppMessage、useShareTimeline，根据当前页面path从配置文件中读取出pageSn和分享eleSn，然后获取传入参数后埋点上报
- 元素埋点：提供了改写Component方法来拦截事件回调的思路，但因元素唯一标识符不能自动获取，所以不大适合自动化埋点。
到此这篇关于详解微信小程序（Taro）手动埋点和自动埋点的实现的文章就介绍到这了,更多相关小程序手动埋点和自动埋点内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。