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


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 HTML中的table
Apr 15 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
javascript类型转换示例
Apr 29 Javascript
JS解析XML实例分析
Jan 30 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
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
海贼王:最美的悬赏令!
2020/03/02 日漫
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
Vue关于组件化开发知识点详解
2020/05/13 Javascript
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
python之Socket网络编程详解
2016/09/29 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
利用aardio给python编写图形界面
2017/08/21 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
python怎么删除缓存文件
2020/07/19 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
基本款天堂:Everlane
2017/05/13 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
战马观后感
2015/06/08 职场文书
排球赛新闻稿
2015/07/17 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers