小程序从手动埋点到自动埋点的实现方法


Posted in Javascript onJanuary 24, 2019

前言

小程序由于封闭性较强,要像web应用一样实现灵活的数据收集,会有一定难度。目前开源的埋点SDK,一般采用手动埋点的方式,这种方式有较强的侵入型,为了解决这个问题就有了该文章。

手动埋点

以腾讯移动分析的SDK为例,如果要记录埋点信息,只要插入一句代码即可

// 例如,记录搜索行为
search(keyword) {
  if (keyword) {
    ...业务代码
  }
  mta.Event.stat("ico_search", {"query":keyword});
}

示例代码看起来是比较简洁的,但是埋点需要收集的数据往往不是单一的,复杂的埋点代码插入业务代码,会 影响代码的阅读体验 ,而且 埋点代码散落在各个地方,不方便管理 。

由于手动埋点必须插入到函数中,有时候我们为了获取页面某一元素点击信息,产生了一种叫无业务相关埋点,简单来说就是你的函数定义,就只有埋点代码,当这种埋点频繁出现, 代码会被严重污染 。

// wxml
<view bindtap="track">这只是一个展示view</view>
//js 
track() {
 mta.Event.stat("eleClick", {"name":xxxxx});
}

另外,由于PM会频繁调整埋点信息,而 埋点是一个繁琐又无聊的工作 ,基于Don't Repeat Yourself 原则,手动埋带要不得。

总结以上,手动埋点有下列问题

  • 影响代码的阅读体验
  • 埋点代码散落在各个地方,不方便管理
  • 代码会被污染
  • 埋点是一个繁琐又无聊的工作

自动埋点

实现思路:监听用户点击-->读取埋点配置JOSN,判断是否需要上报--> 上报数据

1、小程序监听用户点击行为

web应用监听用户点击行为是比较容易,但是小程序没有提供Dom的事件监听,不过我们可以通过事件冒泡的方式捕获。

// web监听页面点击
document.addEventListener('click',(e) => {console.log(e)})

// 小程序监听页面点击,用户的点击行为都会执行elementTracker方法
<view catchtap='elementTracker'>
 <view class='buy-now'>
   <button bindtap='buy' animation="{{scaleAnim}}">立即购票</button>
 </view>
</view>

2、判断点击位置是否落在监听元素中

假设需要监听用户是否点击class为buy-now元素,可以通过获取buy-now元素长宽,定位和点击位置坐标判断是否出现重叠,以判断是否被点击。

/**
 * 判断点击是否落在目标元素
 * @param {Object} clickInfo 用户点击坐标
 * @param {Object} boundingClientRect 目标元素信息
 * @param {Object} scrollOffset 页面位置信息
 * @returns {Boolean}
 */
export const isClickTrackArea = function (clickInfo, boundingClientRect, scrollOffset) {
  if (!boundingClientRect) return false;
  const { x, y } = clickInfo.detail; // 点击的x y坐标
  const { left, right, top, height } = boundingClientRect;
  const { scrollTop } = scrollOffset;
  if (left < x && x < right && scrollTop + top < y && y < scrollTop + top + height) {
    return true;
  }
  return false;
};

3、通过配置表声明埋点

为了解决代码入侵问题,可以将所有埋点信息统一管理,通过配置表的方式,除了方便管理,以后还可以做到动态配置,在服务端配置完毕下发到客户端。

const tracks = {
 path: 'pages/film/detail',
 elementTracks: [
  {
   element: '.buy-now', // 声明需要监听的元素
   dataKeys: ['film.filmId'], // 声明需要获取Data下的哪些数据
  },
 ]
};

4、对页面函数埋点

有些场景我们除了对页面元素点击埋点,还要对页面函数进行埋点,例如用户下拉刷新的时候,可以对原方法进行包装,插入埋点代码。

rewritePage() {
  const originPage = Page;
  Page = (page) => {
   Object.keys(page).forEach((methodName) => {
    // 执行埋点逻辑
    typeof page[methodName] === 'function' && this.recordPageFn(page, methodName);
   });
   // 执行原Page对象
   return originPage(page);
  };
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中关于String对象的replace使用详解
May 24 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
javascript检测两个数组是否相似
May 19 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 #Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 #jQuery
vue结合element-ui使用示例
Jan 24 #Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 #Javascript
JS实现带阴历的日历功能详解
Jan 24 #Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 #Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 #Javascript
You might like
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
python+opencv实现动态物体识别
2018/01/09 Python
python抽取指定url页面的title方法
2018/05/11 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
pytest中文文档之编写断言
2019/09/12 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
Android面试题附答案
2014/12/08 面试题
面向对象概念面试题(.NET)
2016/11/04 面试题
学校消防安全责任书
2014/07/23 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python