關(guān)于小程序開發(fā)的經(jīng)驗(yàn)以及過(guò)程中遇到的“坑”在我們團(tuán)隊(duì)之前的小程序開發(fā)經(jīng)驗(yàn)系列文章中已經(jīng)介紹的差不多了，大數(shù)據(jù)時(shí)代，一個(gè)產(chǎn)品成敗的背后需要用大量的數(shù)據(jù)去分析驗(yàn)證。本期就和大家一起探索下，微信小程序是如何進(jìn)行數(shù)據(jù)采集與分析的，當(dāng)然還有過(guò)程中的“坑”。

本文部分示例來(lái)自于「大眾點(diǎn)評(píng)點(diǎn)餐」小程序的菜單頁(yè)面。

所有內(nèi)容基于2017年3月2日為止的官方api

微信官方采集平臺(tái)介紹

微信小程序公眾平臺(tái)目前提供了一套官方的數(shù)據(jù)采集分析平臺(tái)。
官方api：https://mp.weixin.qq.com/debug/wxadoc/analysis/index.html?t=201726
就目前小程序公測(cè)版官方提供了以下幾種數(shù)據(jù)分析：

1. 概況：提供小程序關(guān)鍵指標(biāo)趨勢(shì)以及top頁(yè)面訪問(wèn)數(shù)據(jù)，快速了解小程序發(fā)展概況；(不需要手動(dòng)配置，官方默認(rèn)采集)
2. 訪問(wèn)分析：提供小程序用戶訪問(wèn)來(lái)源、規(guī)模、頻次、時(shí)長(zhǎng)、深度以及頁(yè)面詳情等數(shù)據(jù)，具體分析用戶新增和活躍情況；(不需要手動(dòng)配置，官方默認(rèn)采集)
3. 實(shí)時(shí)統(tǒng)計(jì)：提供小程序?qū)崟r(shí)訪問(wèn)數(shù)據(jù)，滿足實(shí)時(shí)監(jiān)控需求；(不需要手動(dòng)配置，官方默認(rèn)采集)
4. 自定義分析：配置自定義上報(bào)，精細(xì)跟蹤用戶在小程序內(nèi)的行為，結(jié)合用戶屬性、系統(tǒng)屬性、事件屬性進(jìn)行靈活多維的事件分析和漏斗分析，滿足小程序的個(gè)性化分析需求；(內(nèi)側(cè)中，需要單獨(dú)申請(qǐng)開通權(quán)限才能使用)

具體數(shù)據(jù)可通過(guò)https://mp.weixin.qq.com 使用小程序管理員賬號(hào)登錄之后查看。

前3種方式都是小程序自動(dòng)采集，不需要開發(fā)者任何的人為操作，在微信官方文檔中都有詳細(xì)說(shuō)明了，這邊就不再闡述

本文主要結(jié)合「大眾點(diǎn)評(píng)點(diǎn)餐」小程序來(lái)看下第4種-自定義分析能做什么

自定義分析

自定義分析就是傳統(tǒng)意義上的埋點(diǎn)，用戶可以自行設(shè)置希望上報(bào)的數(shù)據(jù)，通過(guò)這些數(shù)據(jù)來(lái)分析你希望得到的結(jié)果。

微信官方的自定義分析使用了當(dāng)下比較流行的無(wú)埋點(diǎn)技術(shù)，通過(guò)微信后臺(tái)配置錨點(diǎn)并實(shí)時(shí)下發(fā)到客戶端生效，無(wú)需在代碼中手動(dòng)加入埋點(diǎn)代碼，并且由于小程序發(fā)版有審核機(jī)制，如果手動(dòng)埋一次點(diǎn)就需要重新提審，成本將會(huì)非常高，所以采用無(wú)埋點(diǎn)技術(shù)是非常適合于小程序的場(chǎng)景。

但從目前「大眾點(diǎn)評(píng)點(diǎn)餐」小程序中測(cè)試下來(lái)，目前內(nèi)測(cè)版本的自定義分析（截止2017年3月2日）對(duì)代碼本身設(shè)計(jì)與書寫的要求比較苛刻，數(shù)據(jù)采集需要與頁(yè)面page的data做到關(guān)聯(lián)，在某些場(chǎng)景下會(huì)出現(xiàn)比較難以滿足的情況。

接下來(lái)讓我們看看實(shí)現(xiàn)一個(gè)自定義事件的步驟：

1. 首先使用管理員賬號(hào)登錄公眾平臺(tái)后臺(tái)，找到自定義分析(前面提到，需要單獨(dú)申請(qǐng)，否則看不到入口)

 

 

2. 如果第一次使用的話，事件列表為空，點(diǎn)擊新增事件，填入打點(diǎn)事件的中英文名稱

 

 

3. 接下來(lái)是最關(guān)鍵的事件配置

 

動(dòng)作的各項(xiàng)含義如下：(轉(zhuǎn)自微信小程序官方api)
trigger，觸發(fā)條件:

 

click 點(diǎn)擊時(shí)觸發(fā)，必須指定page和element
enterPage 進(jìn)入頁(yè)面時(shí)觸發(fā)，必須指定page
leavePage 離開頁(yè)面時(shí)觸發(fā)，必須指定page
pullDownRefresh 下拉刷新時(shí)觸發(fā)，必須指定page
launch 加載小程序時(shí)觸發(fā)
background 切換到后臺(tái)觸發(fā)
foreground 切換到前臺(tái)觸發(fā)
share 分享時(shí)觸發(fā)

action trigger發(fā)生時(shí)的動(dòng)作，默認(rèn)會(huì)收集數(shù)據(jù)，包括系統(tǒng)默認(rèn)數(shù)據(jù)和用戶自定義數(shù)據(jù)（data中定義）

空　只收集數(shù)據(jù)；
start 初始化并收集數(shù)據(jù)；
report 收集數(shù)據(jù)并上報(bào)事件數(shù)據(jù)
start_and_report 初始化，收集數(shù)據(jù)后上報(bào)；

注：每次report之前必須有start操作，未經(jīng)過(guò)start操作是不會(huì)上報(bào)的。
對(duì)于一個(gè)動(dòng)作，如果設(shè)置了start_and_report，且指定了click觸發(fā)條件，則時(shí)序如下：

click event -> start -> 收集數(shù)據(jù) ->report

page 觸發(fā)的頁(yè)面, 如pages/index/index, pages/list/list，此規(guī)則與小程序app.json的pages字段保持一致， 如果需要任意頁(yè)面觸發(fā)，則填寫ANY_PAGE。
element 觸發(fā)的元素，支持一層級(jí)的css的id和class選擇器，即必須以’.’或者’#’開頭
data 收集的自定義數(shù)據(jù)，為0到多項(xiàng)， 每一項(xiàng)都是以 “字段名 字段值”的方式；如果不填，則只收集系統(tǒng)數(shù)據(jù)。

字段名：事件里的字段名

字段值：事件這個(gè)字段的數(shù)據(jù)值，填寫頁(yè)面上的變量名（即page實(shí)例的data字段），可以搜集頁(yè)面上的變量；如果data收集的是數(shù)組里的某一項(xiàng)數(shù)據(jù)（如list[].id），則根據(jù)當(dāng)前觸發(fā)元素是由class得到的NodeList的第幾個(gè)來(lái)決定數(shù)組下標(biāo)。

除此之外，還可以填寫一些提供的系統(tǒng)屬性，以“$”開頭，目前支持以下屬性：

$PAGE_TIME 用戶從進(jìn)入本頁(yè)面到當(dāng)前的時(shí)間(觸發(fā)action的時(shí)間點(diǎn))
$APP_TIME 用戶進(jìn)入小程序到當(dāng)前的時(shí)間(觸發(fā)action的時(shí)間點(diǎn))
$CURRENT_PAGE 當(dāng)前用戶所在的頁(yè)面
$LAST_PAGE 上一頁(yè)

注：data可以為空，為空時(shí)該事件上報(bào)僅收集系統(tǒng)默認(rèn)字段的數(shù)據(jù)

——————————————————————————————————

注意下我標(biāo)紅的關(guān)于data的value的解釋，這個(gè)value就是之前說(shuō)的「大眾點(diǎn)評(píng)點(diǎn)餐」小程序中某些場(chǎng)景下難以滿足采集需求的原因

我們先來(lái)繼續(xù)完成這個(gè)事件，等下再來(lái)回頭說(shuō)說(shuō)這個(gè)data的坑。

4. 全部配置完之后，就可以點(diǎn)擊檢查字段，然后填入一些字段說(shuō)明，然后點(diǎn)擊保存并測(cè)試，然后選擇一個(gè)開發(fā)人員點(diǎn)下一步，這時(shí)候這個(gè)開發(fā)人員可以用微信進(jìn)入小程序，在小程序中click剛才我們配置的.add這個(gè)class對(duì)應(yīng)的dom，然后回到剛才點(diǎn)擊下一步的頁(yè)面中就可以看到打點(diǎn)的數(shù)據(jù)（下圖中kid和id就是之前配置的字段）。

 

 

5. OK，到這里為止一個(gè)事件的創(chuàng)建算完成了。

"坑"

接下來(lái)，回到剛才提到的data的value這個(gè)值，認(rèn)真閱讀這行文字你會(huì)發(fā)現(xiàn)幾個(gè)重點(diǎn)：

1. value只能是page實(shí)例的data字段，也就是說(shuō)不在page.data中的值不能用
2. 如果是數(shù)組，那該dom在class選擇器中的索引index就必須和page.data的數(shù)組對(duì)應(yīng)的索引index相等，否則會(huì)取錯(cuò)！

其中第二點(diǎn)舉個(gè)例子：

我們菜單頁(yè)中的加菜按鈕就是剛才配置的.add，假定列表數(shù)組在page.data.menuList中，那這個(gè)紅框應(yīng)該是page.data.menuList[2]，索引index就是2
那通過(guò)$('.add')的class選擇器獲取到的索引index=0(前面2個(gè)都是已售完，沒有.add)；
這時(shí)候使用自定義分析時(shí)，點(diǎn)擊加號(hào)，上報(bào)的其實(shí)是page.data.menuList[0]的數(shù)據(jù)，而不是page.data.menuList[2]，所以就會(huì)上報(bào)了錯(cuò)誤的數(shù)據(jù)

 

不足：

1. 上報(bào)內(nèi)容和page.data直接掛鉤，不靈活
2. dom的index必須和page的data中數(shù)組的index對(duì)齊，某些復(fù)雜情況下無(wú)法滿足需求（往往實(shí)際業(yè)務(wù)中，就會(huì)像我們的menu頁(yè)一樣，加號(hào)的出現(xiàn)條件是在沒有售完的情況下，無(wú)法對(duì)齊索引）
   
   所以就目前自定義分析-內(nèi)測(cè)階段來(lái)說(shuō)，能采集到的數(shù)據(jù)比較有限，希望等全面開放之后能更加靈活于用戶配置

在小程序中自己實(shí)現(xiàn)埋點(diǎn)需求方案思考：

由于小程序中不支持cookie，而公司的統(tǒng)計(jì)系統(tǒng)有部分?jǐn)?shù)據(jù)的發(fā)送是通過(guò)cookie來(lái)實(shí)現(xiàn)的，后續(xù)可以考慮將所有數(shù)據(jù)手動(dòng)在代碼中埋點(diǎn)，然后通過(guò)ajax方式來(lái)發(fā)送到公司的統(tǒng)計(jì)datebase中，由公司自己的統(tǒng)計(jì)系統(tǒng)來(lái)完全對(duì)小程序的統(tǒng)計(jì)。