「大众点评点餐」小程序开发经验 06:解析开发工具

文 | 邹弓一

邹弓一,美团点评前端工程师,4年 Web 前端开发经验,现在是美团点评点餐团队的一员。

关于小程序开发的经验以及过程中遇到的「坑」,知晓程序(微信号 zxcx0101)之前发布的大众点评团队的文章里,已经介绍的差不多了。

大数据时代,一个产品成败,除了前台用户主观口碑可以决定之外,还需要用大量的客观数据去分析验证

本期就和大家一起探索下,微信小程序是如何进行数据采集与分析的,当然,本文还会阐述这个过程中,我们所遇到的「坑」。

微信官方采集平台介绍

微信小程序提供了一套官方的数据采集分析工具。就目前而言,这套工具提供了以下几种数据分析方式:

  • 概况:提供小程序关键指标趋势以及 Top 页面访问数据,快速了解小程序发展概况。
  • 访问分析:提供小程序用户访问来源、规模、频次、时长、深度以及页面详情等数据,具体分析用户新增和活跃情况。
  • 实时统计:提供小程序实时访问数据,满足实时监控需求。
  • 自定义分析:精细跟踪用户在小程序内的行为,结合用户、系统、事件等信息,进行灵活多维的事件分析和漏斗分析。

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

这里,我们主要结合「大众点评点餐」小程序,探讨「自定义分析」的具体功能和作用

自定义分析

所谓「自定义分析」,就是传统意义上的埋点。开发者可以自行设置希望上报的数据,通过这些数据来分析你希望得到的结果。

微信官方的自定义分析使用了当下比较流行的无埋点技术,通过微信后台配置锚点并实时下发到客户端生效,无需在代码中手动加入埋点代码。

并且,由于小程序发版有审核机制,如果希望在代码中加入可埋点的元素,就需要重新提审,时间成本非常高

相对而言,采用无埋点技术,更加适合于小程序的场景。

但从目前「大众点评点餐」小程序中测试与使用来说,目前内测版本的自定义分析(截止 2017 年 3 月 2 日)对代码本身设计与书写的要求比较苛刻。

特别是数据采集需要与页面 pagedata 做到关联,在某些场景下会出现比较难以满足的情况

接下来,让我们看看实现一个自定义事件的步骤吧。

首先,使用管理员账号登录公众平台后台,找到「数据分析」-「自定义分析」。

如果是第一次使用,那么事件列表应该为空。此时,我们点击新增事件,填入打点事件的中英文名称。

接下来,就是最关键的事件配置步骤了。

动作的各项含义如下:

  • trigger,触发条件
    • click 点击时触发,必须指定 pageelement
    • enterPage 进入页面时触发,必须指定 page
    • leavePage 离开页面时触发,必须指定 page
    • pullDownRefresh 下拉刷新时触发,必须指定 page
    • launch 加载小程序时触发
    • background 切换到后台触发
    • foreground 切换到前台触发
    • share 分享时触发
  • actiontrigger 发生时的动作,默认会收集数据,包括系统默认数据和用户自定义数据(data 中定义)
    • 留空代表只收集数据
    • start 初始化并收集数据
    • report 收集数据并上报事件数据,之前必须有 start 操作,未经过 start 操作是不会上报的
    • start_and_report 初始化,收集数据后上报
  • page,触发事件的页面。如 pages/index/indexpages/list/list,需要与小程序中 app.jsonpages 注册页面所用地址保持一致。如果需要任意页面触发,则填写 ANY_PAGE
  • element,触发事件的元素,支持一层级的 idclass 选择器,即必须以 . 或者 # 开头。
  • data,收集的自定义数据,为零到多项,每一项都是以「字段名 - 字段值」的格式交换。如果不填,则只收集系统数据。
    • 如果 data 收集的是数组里的某一项数据(如 list[].id),则根据当前触发元素是由 class 得到的 NodeList 的第几个来决定数组下标。
    • 除此之外,还可以填写一些提供的系统属性。目前支持以下属性:
    • data 可以为空,为空时该事件上报仅收集系统默认字段的数据
    • $PAGE_TIME,用户从进入本页面到当前的时间(触发动作的时间点)
    • $APP_TIME,用户进入小程序到当前的时间(触发动作的时间点)
    • $CURRENT_PAGE,当前用户所在的页面
    • $LAST_PAGE,上一页
    • 字段名:事件里的字段名
    • 字段值:事件这个字段的数据值,填写页面上的变量名(即 page 实例的 data 字段),可以搜集页面上的变量。

注意,关于 data 字段中 value 的解释,这个 value 就是之前说的「大众点评点餐」小程序中某些场景下难以满足采集需求的原因。稍后我们会提到它。

全部字段配置完之后,就可以进行检查字段的操作了。

填入一些字段说明,点击「保存并测试」,选择测试用的微信号,再点下一步。

这时候,我们可以用选中的微信号进入小程序,在小程序中执行追踪的操作。然后回到刚才的页面中,看看打点的数据是否被正确收集了。

OK,到这里为止,一个事件的创建算完成了。

埋点里的「坑」

接下来,回到刚才提到的 datavalue 这个值。

认真阅读这部分的说明,你会发现几个重点:

  • value 只能是 page 实例的 data 字段,也就是说,不在 page.data 中的值,不能被追踪。
  • 如果是数组,那这个元素在 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 必须和 pagedata 中数组的 index 对齐,某些复杂情况下无法满足需求(往往实际业务中,就会像我们的 menu 页一样,加号的出现条件是在没有售完的情况下,无法对齐索引)

所以就目前自定义分析来说,能采集到的数据比较有限,希望等全面开放之后能更加灵活于用户配置

由于小程序中不支持 Cookie,而公司的统计系统有部分数据的发送是通过 Cookie 来实现的,后续可能会考虑将所有数据手动在代码中埋点。

之后,再通过 Ajax 方式,再发送到的统计所使用的数据库中,由公司自己的统计系统来接管对小程序的统计。

如果你也有自己的数据统计工具,也可以选择将请求作为埋点,用原有的数据统计工具进行统计

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-04-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java编程技术

阿里之路(二)

从今年7月到现在转眼间转岗到淘宝部门已经有小半年了,最近刚刚经历人生中第一次双11实战,体验了一把系统经受高并发高流量的冲击的感觉,一个字爽,作为小白,在这小半...

11520
来自专栏SAP梦心的SAP分享

良好的用户体验的几条箴言

30、要认为:所有的用户都是小白,傻瓜,记忆力差,懒癌晚期,不耐烦,不懂电脑,不会用手机,网速差,会乱操作的人。以此前提去设计UE;

27770
来自专栏架构师之路

系统通知,居然有人使用拉取?

广义系统通知,有1对1的通知,以及一对多的通知,有相对实时的业务通知,以及能够容忍一定延时的系统通知。结合具体的场景来看下,这样的一些系统通知,究竟是推还是拉?

18130
来自专栏更流畅、简洁的软件开发方式

【自然框架】—— 全貌

补充:忘记了一件很重要的事情,我建立了一个小组 http://space.cnblogs.com/group/nature/ 欢迎大家加入。我们可以组织一些话...

24470
来自专栏小白课代表

软件分享 | C4D R14 安装教程

18920
来自专栏双十二技术哥

Android性能优化(八)之网络优化

移动互联网发展到现在,用户的联网方式已经完成了由流量依赖到Wifi依赖的转变。虽然网络环境在变好,但也对网络的应用提出了更高的要求,同时开发人员对网络的重视度却...

23330
来自专栏钱塘大数据

【干货】python玩转微信:微信好友统计信息全掌握

在过去的几个月中,由于在新生群中回答问题费时费力,同时又有许多重复而又有固定答案的回答,我受到一些知乎文章的启发,维护了一个基于itchat的群聊机器人。从刚开...

716120
来自专栏IT大咖说

前端老牌框架衰退,IMVC(同构 MVC)成未来趋势?

19120
来自专栏大数据挖掘DT机器学习

python玩微信:如何获得自己微信的好友统计信息

在过去的几个月中,由于在新生群中回答问题费时费力,同时又有许多重复而又有固定答案的回答,我受到一些知乎文章的启发,维护了一个基于itchat的群聊机器人。从刚开...

516160
来自专栏全华班

快乐方块消消乐

UI是自己独立完成比较简单,打包平台我设置的是webGL平台,有需要改成Android的可以自己修改打包设置。该项目供大家参考学习使用,希望大家支持,以...

25820

扫码关注云+社区

领取腾讯云代金券