首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >「大众点评点餐」小程序开发经验 06:解析开发工具

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

作者头像
知晓君
发布2018-08-01 14:21:43
5810
发布2018-08-01 14:21:43
举报
文章被收录于专栏:知晓程序知晓程序

文 | 邹弓一

邹弓一,美团点评前端工程师,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 方式,再发送到的统计所使用的数据库中,由公司自己的统计系统来接管对小程序的统计。

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-04-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 知晓程序 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档