### [微信小程序中数据的自定义分析过程](https://www.prosaas.cn/article/17095)

**Published:** 2018-08-17T06:48:43

**Author:** 5201314

**Excerpt:** 本篇文章给大家带来的内容是关于微信小程序中数据的自定义分析过程，有一定的参考价值，有需要的朋友可以参考一下，希…

本篇文章给大家带来的内容是关于微信小程序中数据的自定义分析过程，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

### 什么是自定义分析？

引用下官方文档：

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

### 创建自定义事件

![](https://img.php.cn//upload/image/872/645/733/1534487863582459.jpg)

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

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

![](https://img.php.cn//upload/image/480/875/873/1534488044866097.jpg)

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

举个例子

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

填写事件英文和中文名称：

![](https://img.php.cn//upload/image/679/150/729/1534488704219114.jpg)

填写事件配置，定义如何收集数据：

![](https://img.php.cn//upload/image/484/933/186/1534488758805828.jpg)

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

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。

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

![](https://img.php.cn//upload/image/568/574/702/1534488810398575.jpg)

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

关于API上报

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

![](https://img.php.cn//upload/image/267/826/311/1534488860142538.jpg)

![](https://img.php.cn//upload/image/641/320/181/1534488871938635.jpg)

![](https://img.php.cn//upload/image/481/462/469/1534488888282550.jpg)

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

...
// 转发成功
success: function (res) {
      wx.reportAnalytics('click\_share', {
        page\_path: current\_page\_path,
        from: from,
      });
},
...

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

![](https://img.php.cn//upload/image/877/138/805/1534488949999591.jpg)

![](https://img.php.cn//upload/image/185/667/903/1534488956117310.jpg)

![](https://img.php.cn//upload/image/378/766/651/1534488967602847.jpg)

![](https://img.php.cn//upload/image/929/616/280/1534488977600915.jpg)

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

![](https://img.php.cn//upload/image/305/146/739/1534488997485813.jpg)

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

相关推荐：

微信小程序 - 自定义创建

JavaScript中自定义事件用法分析\_javascript技巧

微信小程序自定义toast实现方法详解

以上就是微信小程序中数据的自定义分析过程的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** background, Boolean, class, JavaScript, json, number, String, 事件, 微信小程序, 接口

**Categories:** 后端开发

---