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


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 出生日期和身份证判断大全
Nov 13 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
动态加载js、css的实例代码
May 26 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
js Dom实现换肤效果
Oct 21 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 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
文件上传的实现
2006/10/09 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
php上传文件问题汇总
2015/01/30 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
Ruby元编程基础学习笔记整理
2016/07/02 Python
判断网页编码的方法python版
2016/08/12 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
上课看小说检讨书
2014/02/22 职场文书
农林环境专业求职信
2014/03/13 职场文书
对教师的评语
2014/04/28 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
行风评议整改报告
2014/11/06 职场文书
幼师求职自荐信
2015/03/26 职场文书
建党伟业电影观后感
2015/06/01 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
分享几种python 变量合并方法
2022/03/20 Python