大众点评点餐小程序开发经验 - 数据采集

做者介绍：邹弓一，美团点评前端工程师，4年 Web 前端开发经验，如今是美团点评点餐团队的一员。

关于小程序开发的经验以及过程当中遇到的“坑”在咱们团队以前的小程序开发经验系列文章中已经介绍的差很少了，大数据时代，一个产品成败的背后须要用大量的数据去分析验证。本期就和你们一块儿探索下，微信小程序是如何进行数据采集与分析的，固然还有过程当中的“坑”。

本文部分示例来自于「大众点评点餐」小程序的菜单页面。

全部内容基于2017年3月2日为止的官方api

微信官方采集平台介绍

微信小程序公众平台目前提供了一套官方的数据采集分析平台。
官方api：mp.weixin.qq.com/debug/wxado…
就目前小程序公测版官方提供了如下几种数据分析：

1. 概况：提供小程序关键指标趋势以及top页面访问数据，快速了解小程序发展概况；(不须要手动配置，官方默认采集)
2. 访问分析：提供小程序用户访问来源、规模、频次、时长、深度以及页面详情等数据，具体分析用户新增和活跃状况；(不须要手动配置，官方默认采集)
3. 实时统计：提供小程序实时访问数据，知足实时监控需求；(不须要手动配置，官方默认采集)
4. 自定义分析：配置自定义上报，精细跟踪用户在小程序内的行为，结合用户属性、系统属性、事件属性进行灵活多维的事件分析和漏斗分析，知足小程序的个性化分析需求；(内侧中，须要单独申请开通权限才能使用)

具体数据可经过mp.weixin.qq.com 使用小程序管理员帐号登陆以后查看。

前3种方式都是小程序自动采集，不须要开发者任何的人为操做，在微信官方文档中都有详细说明了，这边就再也不阐述

本文主要结合「大众点评点餐」小程序来看下第4种-自定义分析能作什么

自定义分析

自定义分析就是传统意义上的埋点，用户能够自行设置但愿上报的数据，经过这些数据来分析你但愿获得的结果。

微信官方的自定义分析使用了当下比较流行的无埋点技术，经过微信后台配置锚点并实时下发到客户端生效，无需在代码中手动加入埋点代码，而且因为小程序发版有审核机制，若是手动埋一次点就须要从新提审，成本将会很是高，因此采用无埋点技术是很是适合于小程序的场景。

但从目前「大众点评点餐」小程序中测试下来，目前内测版本的自定义分析（截止2017年3月2日）对代码自己设计与书写的要求比较苛刻，数据采集须要与页面page的data作到关联，在某些场景下会出现比较难以知足的状况。

接下来让咱们看看实现一个自定义事件的步骤：

1. 首先使用管理员帐号登陆公众平台后台，找到自定义分析(前面提到，须要单独申请，不然看不到入口)

2. 若是第一次使用的话，事件列表为空，点击新增事件，填入打点事件的中英文名称

3. 接下来是最关键的事件配置

动做的各项含义以下：(转自微信小程序官方api)
trigger，触发条件:

click 点击时触发，必须指定page和element
enterPage 进入页面时触发，必须指定page
leavePage 离开页面时触发，必须指定page
pullDownRefresh 下拉刷新时触发，必须指定page
launch 加载小程序时触发
background 切换到后台触发
foreground 切换到前台触发
share 分享时触发

action trigger发生时的动做，默认会收集数据，包括系统默认数据和用户自定义数据（data中定义）

空　只收集数据；
start 初始化并收集数据；
report 收集数据并上报事件数据
start_and_report 初始化，收集数据后上报；

注：每次report以前必须有start操做，未通过start操做是不会上报的。
对于一个动做，若是设置了start_and_report，且指定了click触发条件，则时序以下：

click event -> start -> 收集数据 ->report

page 触发的页面, 如pages/index/index, pages/list/list，此规则与小程序app.json的pages字段保持一致， 若是须要任意页面触发，则填写ANY_PAGE。
element 触发的元素，支持一层级的css的id和class选择器，即必须以’.’或者’#’开头
data 收集的自定义数据，为0到多项， 每一项都是以 “字段名 字段值”的方式；若是不填，则只收集系统数据。

字段名：事件里的字段名

字段值：事件这个字段的数据值，填写页面上的变量名（即page实例的data字段），能够搜集页面上的变量；若是data收集的是数组里的某一项数据（如list[].id），则根据当前触发元素是由class获得的NodeList的第几个来决定数组下标。

除此以外，还能够填写一些提供的系统属性，以“$”开头，目前支持如下属性：

$PAGE_TIME 用户从进入本页面到当前的时间(触发action的时间点)
$APP_TIME 用户进入小程序到当前的时间(触发action的时间点)
$CURRENT_PAGE 当前用户所在的页面
$LAST_PAGE 上一页

注：data能够为空，为空时该事件上报仅收集系统默认字段的数据

——————————————————————————————————

注意下我标红的关于data的value的解释，这个value就是以前说的「大众点评点餐」小程序中某些场景下难以知足采集需求的缘由

咱们先来继续完成这个事件，等下再来回头说说这个data的坑。

4. 所有配置完以后，就能够点击检查字段，而后填入一些字段说明，而后点击保存并测试，而后选择一个开发人员点下一步，这时候这个开发人员能够用微信进入小程序，在小程序中click刚才咱们配置的.add这个class对应的dom，而后回到刚才点击下一步的页面中就能够看到打点的数据（下图中kid和id就是以前配置的字段）。

5. OK，到这里为止一个事件的建立算完成了。

"坑"

接下来，回到刚才提到的data的value这个值，认真阅读这行文字你会发现几个重点：

1. value只能是page实例的data字段，也就是说不在page.data中的值不能用
2. 若是是数组，那该dom在class选择器中的索引index就必须和page.data的数组对应的索引index相等，不然会取错！

其中第二点举个例子：

咱们菜单页中的加菜按钮就是刚才配置的.add，假定列表数组在page.data.menuList中，那这个红框应该是page.data.menuList[2]，索引index就是2
那经过$('.add')的class选择器获取到的索引index=0(前面2个都是已售完，没有.add)；
这时候使用自定义分析时，点击加号，上报的实际上是page.data.menuList[0]的数据，而不是page.data.menuList[2]，因此就会上报了错误的数据

不足：

1. 上报内容和page.data直接挂钩，不灵活
2. dom的index必须和page的data中数组的index对齐，某些复杂状况下没法知足需求（每每实际业务中，就会像咱们的menu页同样，加号的出现条件是在没有售完的状况下，没法对齐索引）
   
   因此就目前自定义分析-内测阶段来讲，能采集到的数据比较有限，但愿等全面开放以后能更加灵活于用户配置

在小程序中本身实现埋点需求方案思考：

因为小程序中不支持cookie，而公司的统计系统有部分数据的发送是经过cookie来实现的，后续能够考虑将全部数据手动在代码中埋点，而后经过ajax方式来发送到公司的统计datebase中，由公司本身的统计系统来彻底对小程序的统计。

---

本文对你有帮助？欢迎扫码加入前端学习小组微信群：