介绍
如何在微信小程序中实现一个手动埋点和自动埋点功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
一、手动埋点
手动埋点就是在每一处需要的地方,都加一段上报埋点的代码。影响代码的阅读体验,且散落的埋点代码不方便管理。
以页面pv为例,我们此前是在每一个页面中上报pv:
//, src/手册/home/index.tsx
import tracking 得到“。/tracking";//,pageSn 是前端和产品约定的”页面在埋点系统的唯一标识”,比如这个项目首页的标识符是数字,11664
const pageSn =, 11111;
export default (),=祝辞,{
,//useDidShow 是,Taro 专有的,钩,等同于小程序原生,componentDidShow 生命周期,会在页面展示的时候调用。
,useDidShow((),=祝辞,{
,//通过统一封装的,sendPv 方法发送,pv 埋点
,sendPv (pageSn);
,});
,return & lt; View>手动埋点页面& lt;/View>;
}; 二、自动埋点
自动埋点可分为全自动埋点和半自动埋点。全自动埋点则是不管需不需要,将所有的点都埋了。前端肯定开心了”以后埋点产品都不要不要找我啦”,可数据同学就哭唧唧了。
比如,腾讯和芋头团队共同推出腾讯有数自动化埋点,接入超级简单,比如配置proxyPage为真实即可“上报所有页面的浏览、离开,分享等事件”,配置自动跟踪为真实即可“自动上报所有元素的利用,改变,longpress,证实事件”。
可从数据量和有效性来说,“全埋”等于“不埋”,因为“全埋”一方面对数据存储量要求很高,另一方面会给我们负责数据清洗的同学带来大量工作。
所以接下来,还是从中寻求平衡,着重看半自动埋点。
1页面曝光(pv)
页面曝光(pv)、理想的上报方式是:
在一个统一的地方(如trackingConf。ts),配置好每个要埋点的页面的标识符(即pageSn)
页面显示后,自动判断下是否需要上报(是否在trackingConf。ts配置文件中),要就直接上报。
具体实现
(1)统一配置埋点字段,pageSn表示页面在埋点系统中的标识符
//, trackingConf.ts
export default {
,“汽车/home/index":, {
11111年,pageSn:
},
}; 当然,如果你的业务允许三七二十一,上报所有页面pv(带上路径让产品自己筛选),那(1)这步可以省了,直接看(2),这种方式可称为“光伏全自动埋点”。
(2)封装usePv钩,在页面展示时,获取当前页面pageSn,判断是否要埋pv,要的话发送pv
//, usePv.ts//,获取当前页面,道路,借助,Taro 的getCurrentInstance
export const getPath =,(),=祝辞,{
,const path =, Taro.getCurrentInstance () .router ? .path | |,““
,//去掉开头的,/,比如将,& # 39;/汽车/home/指数# 39;,改为,& # 39;汽车/home/指数# 39;
,return path.match (/^ \/*/), ?, path.replace(/^ \/*/,,,,),:,路径;
};//,获取当前页面,pageSn,判断是否要埋,pv,要的话发送,pv//,入参,getExtra 支持携带额外参数
const usePv =, ({
getExtra,
}:{
,getExtra吗?(),=祝辞,任何;
},=,{}),=祝辞,{
,//页面曝光
,useDidShow((),=祝辞,{
,const currentPath =, getPath ();
,//从,trackingConf 中获取,pageSn
,const pageSn =, trackingConf [currentPath] ? .pageSn;
,console.log(“自动获取,pageSn",, currentPath,, pageSn);
,if (pageSn), {
const 才能;extra =, getExtra ?。();//才能,通过统一封装的,sendPv 方法发送,pv 埋点
,,extra ? sendPv (pageSn,额外的),:,sendPv (pageSn);
,}
,});
}; (3)然后封装页面组件包装材料,使用上述的usePv ():
import React 得到“react";
{import View },得到“@tarojs/components";
import usePv 得到“。/usePv";
function 包装物(Comp), {
,return function MyPage(道具),{
,usePv ();
,return (
& lt;才能View>
& lt;才能Comp 道具{…},/比;
& lt;才能/View>
,);
,};
}
export default 包装材料; (4)最后在所有页面组件,包一层包装材料即可实现”所有页面按需埋点”:
//, src/汽车/home/index.tsx
const Index =,包装物((),=祝辞,{
,return & lt; View>自动埋点页面& lt;/View>;
});
