微信小程序数据分析之自定义分析的实现


Posted in Javascript onAugust 17, 2018

在小程序后台,微信已经提供了强大的数据分析功能,包括实时统计、访问分析、来源分析和用户画像功能,可以说对一般的数据分析已经完全足够了,但有时应用需要做一些更加精准的数据分析,比如具体到某一个页面的分享,页面中某一个button的点击等,这时候就需要用到自定义分析功能。

什么是自定义分析?

引用下官方文档:

自定义分析支持灵活多维和近实时的用户行为分析,可以通过自定义上报,对用户在小程序内的行为做精细化跟踪,满足页面访问等标准统计以外的个性化分析需求。

创建自定义事件

微信小程序数据分析之自定义分析的实现

  • 事件英文名称和事件中文名称按照说明要求填写,这两个名称都是唯一的,不能设置成已经设置过的,而且设置的时候尽量简洁、还要见名知意
  • 配置方式有:填写配置、API上报。
  • 配置模版:官方已经提供了一些自定义事件模版,直接使用就可以,包括有:进入页面、离开页面、小程序内分享,不过这些事件的分析粒度都比较粗,针对整个应用,可以自己修改只针对某一页
  • 填写配置的方式支持以下几种统计触发器,有:

click 点击时触发
enterPage 进入页面时触发,包括新开、后退、切换到前台都属于进入页面
leavePage 离开页面时触发,包括离开、切换到后台都属于离开页面
pageLoad 新开页面时触发,即第一次进入页面
pageUnload 回收页面时触发
pullDownRefresh 下拉刷新时触发
launch 加载小程序时触发
background 切换到后台触发
foreground 切换到前台触发
share 右上角菜单分享
switchTab 调用switchTab接口切换页面时触发

微信小程序数据分析之自定义分析的实现

  • action指出发时的动作,一次性上报,表示在每一次 click 中,收集数据并上报一条数据;分步骤上报我也还没搞懂 ?
  • page指要触发该事件的页面,这里填写的内容必须要和app.json中配置的页面路径一样
  • data是选填的,是用来给事件触发时传递一些数据的,其中,字段值就是当前page的data中的数据名称

举个例子?

电商类小程序中,用户会有一个点击商品添加到购物车的动作,我们可以对这个动作进行数据分析,以下是填写配置的方式:

1、填写事件英文和中文名称:

微信小程序数据分析之自定义分析的实现

2、填写事件配置,定义如何收集数据:

微信小程序数据分析之自定义分析的实现

这个例子中,用一个动作上报“加入购物车”事件。

  • trigger:触发条件,click,表示点击操作触发;
  • action:触发时动作,一次性上报,表示在每一次 click 中,收集数据并上报一条数据;
  • page:触发页面,填 viewProduct(viewProduct 是商品详情页);
  • element:触发元素,填 .addToCart(.addToCart 是一个“加入购物车”的按钮);
  • data:事件的数据及其来源,用“字段名 字段值”来表示,其中字段值是页面上的一个变量。

详细说一下字段值,他有如下规则:

  • 填写的变量名,默认从page实例的data字段中获取
  • 若想收集由list变量渲染的列表中的某一项数据,则可用list[].*表示,这里会根据当前填写的element(只能是class)得到的NodeList的第几个来决定数组下标。
  • 若列表是二维的,则可用list[](file:///Users/wanghui/Blog/source/_posts/WeChat-miniprogram-data-analysis-custom-analysis.md#).*表示,这里element需填写两个class(空格隔开)分别表示父列表与子列表。
  • 若想取得数组的下标,则可用list[].$INDEX表示
  • 若想取得wxml中data-系列属性的值,则可用$DATASET.表示
  • 若想取得app实例的数据,则可用$APP.*表示,只支持获取基本类型的数据,如number、string、boolean。

除此之外,还可以填写一些提供的系统属性,以“$”开头,目前支持以下属性:

  • $PAGE_TIME 用户从进入本页面到当前的时间(触发action的时间点)
  • $APP_TIME 用户进入小程序到当前的时间(触发action的时间点)
  • $CURRENT_PAGE 当前用户所在的页面
  • $LAST_PAGE 上一页
注:data可以为空,为空时该事件上报仅收集系统默认字段的数据

这个例子中,data有四项:

product_id: itemID

product_name: itemName

product_price: price

product_category: category

即:

事件的product_id字段,收集viewProduct页面上page实例的data中的itemID字段;

事件的product_name字段,收集viewProduct页面上page实例的data中的itemName字段;

事件的product_price字段,收集viewProduct页面上page实例的data中的price字段;

事件的product_category字段,收集viewProduct页面上page实例的data中的category字段;

以上内容表示:当用户点击 viewProduct 页面上的 .addToCart 按钮时,上报一条记录到 add_to_cart 事件,事件的 product_id, product_name, product_price, product_category 字段, 取值分别是页面上的 itemID, itemName, price, category。

填写完配置后,还要点击检查字段

微信小程序数据分析之自定义分析的实现

此时会提示 add_to_cart 事件包含的具体字段,继续补充字段的名称、数据类型和备注信息。

关于API上报

API上报比填写配置的方式更加灵活,但这也涉及到一些代码的更改,需要发布新版本,而填写配置的方式几乎不需要更改代码,所以无需发布新版本。当我们选择API上报后,我们可以设置需要上报的一下参数:

微信小程序数据分析之自定义分析的实现

点击生成代码:

微信小程序数据分析之自定义分析的实现

时间创建完成后,点击保存,后台就生成了一条事件记录,并有唯一的ID与它对应:

微信小程序数据分析之自定义分析的实现

接着,我们在小程序代码中可以插入生成的代码,如下是我在转发成功后的success()回掉函数中提交API上报。

...
// 转发成功
success: function (res) {
   wx.reportAnalytics('click_share', {
    page_path: current_page_path,
    from: from,
   });
},
...

不管是填写配置还是API上报,都需要在填写完配置后保存并测试。

微信小程序数据分析之自定义分析的实现

微信小程序数据分析之自定义分析的实现

微信小程序数据分析之自定义分析的实现

微信小程序数据分析之自定义分析的实现

我们在测试事件的时候,往往要过一段时间才能接收到数据,大概1-2分钟,为了能够及时判断正确性,我们可以在手机上的小程序应用中,打开调试,这样,每次触发事件时,都会在控制台的Log中看到[自定义分析]上报成功的字样,点击查看还能看到更多数据,比如上报的参数等,里面的eventID就对应事件的英文名称,可以通过这种方式快速判断事件触发是否符合预期,如下截图:

微信小程序数据分析之自定义分析的实现

通过使用,我们发现小程序的自定义分析功能很强大,你可以在页面上分析任何元素、任何事件,使我们可以全方位的了解到小程序的使用情况,对数据加以分析总结,并以数据来驱动产品的迭代,提高用户留存。

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

Javascript 相关文章推荐
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
JS函数重载的解决方案
May 13 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
基于JavaScript实现瀑布流布局
Aug 15 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 #jQuery
layui的table中显示图片方法
Aug 17 #Javascript
layerUI下的绑定事件实例代码
Aug 17 #Javascript
JS实现的视频弹幕效果示例
Aug 17 #Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 #Javascript
jQuery实现轮播图及其原理详解
Apr 12 #jQuery
chosen实现省市区三级联动
Aug 16 #Javascript
You might like
php 魔术方法使用说明
2009/10/20 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
Pandas分组与排序的实现
2019/07/23 Python
python多进程并发demo实例解析
2019/12/13 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
python 实现图片批量压缩的示例
2020/12/18 Python
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
优秀教师事迹简介
2014/02/02 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
学校运动会简讯
2015/07/20 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript