微信小程序全自动埋点（小程序埋点是什么意思）

微信小程序全自动埋点（小程序埋点是什么意思）

xbosstrack 小程序自动埋点

使用方法

1、App.js文件引入资源

// 引入埋点SDKimport Tracker from './xbosstrack.min.js';// 引入埋点配置信息，请自行参考tracks目录下埋点配置修改import trackConfig from './tracks/index';

2、初始化

new Tracker({ tracks: trackConfig });

3、加入你的埋点信息

/** * path 页面路径 * elementTracks 页面元素埋点 * methodTracks 执行函数埋点 * comMethodTracks: 执行组件内函数埋点 */const tracks = { path: 'pages/film/index', elementTracks: [ { element: '.playing-item', dataKeys: ['imgUrls', 'playingFilms[$INDEX].filmId', 'playingFilms[0]'], }, { element: '.more', dataKeys: ['imgUrls', 'playingFilms', '$DATASET.test'], } ], methodTracks: [ { method: 'getBanner', dataKeys: ['imgUrls'], }, { method: 'toBannerDetail', dataKeys: ['imgUrls'], }, ], comMethodTracks: [ { method: '_test1', dataKeys: ['name', '$DATASET.test'], }, ],};

4、在wxml最外层插入监听方法

打开控制台，查看是否成功收集

element： 触发埋点元素class

method：触发埋点函数

name：收集数据的key值

data：数据对应值

5、如果你要监听组件内元素

在elementTracks里加入

{ element: '.page >>> .sub-component', dataKeys: ['name', '$DATASET.test']}

.page表示包裹组件的元素class，或者你可以使用id或者任意选择器

.sub-component 表示监听组件内元素class名

核心还是利用了微信提供的选择器，可以参考文档

特殊前缀

$APP 表示读取App下定义的数据

需要获取$INDEX时，需要在wxml中加入data-index={{index}}标记

兼容插件模式

由于SDK会改写Page对象，如果使用了插件，微信会禁止改写，可以通过以下方式改造。

// 初始化插件模式const tracker = new Tracker({ tracks: trackConfig, isUsingPlugin: true });// 将原来的App包装tracker.createApp({ })// 将原Page包装tracker.createPage({ })// 将原Component包装tracker.createComponent({ })

方案实现说明

小程序从手动埋点到自动埋点

DEMO

License

996 License

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。