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


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 相关文章推荐
Javascript 读书笔记索引贴
Jan 11 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
js实现网页随机验证码
Oct 19 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
PHP 类相关函数的使用详解
2013/05/10 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
php输入数据统一类实例
2015/02/23 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
工作会议主持词
2014/03/17 职场文书
2014年评职称工作总结
2014/11/20 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
旅游安全责任协议书
2016/03/22 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA