作者介紹：鄒弓一，美團點評前端工程師，4年 Web 前端開發經驗，現在是美團點評點餐團隊的一員。
關於小程式開發的經驗以及過程中遇到的“坑”在我們團隊之前的小程式開發經驗系列文章中已經介紹的差不多了，大資料時代，一個產品成敗的背後需要用大量的資料去分析驗證。本期就和大家一起探索下，微信小程式是如何進行資料採集與分析的，當然還有過程中的“坑”。
本文部分示例來自於「大眾點評點餐」小程式的選單頁面。
所有內容基於2017年3月2日為止的官方api
微信官方採集平臺介紹
微信小程式公眾平臺目前提供了一套官方的資料採集分析平臺。
官方api：mp.weixin.qq.com/debug/wxado…
就目前小程式公測版官方提供了以下幾種資料分析：
- 概況：提供小程式關鍵指標趨勢以及top頁面訪問資料，快速瞭解小程式發展概況；(不需要手動配置，官方預設採集)
- 訪問分析：提供小程式使用者訪問來源、規模、頻次、時長、深度以及頁面詳情等資料，具體分析使用者新增和活躍情況；(不需要手動配置，官方預設採集)
- 實時統計：提供小程式實時訪問資料，滿足實時監控需求；(不需要手動配置，官方預設採集)
- 自定義分析：配置自定義上報，精細跟蹤使用者在小程式內的行為，結合使用者屬性、系統屬性、事件屬性進行靈活多維的事件分析和漏斗分析，滿足小程式的個性化分析需求；(內側中，需要單獨申請開通許可權才能使用)
具體資料可通過mp.weixin.qq.com 使用小程式管理員賬號登入之後檢視。
前3種方式都是小程式自動採集，不需要開發者任何的人為操作，在微信官方文件中都有詳細說明了，這邊就不再闡述
本文主要結合「大眾點評點餐」小程式來看下第4種-自定義分析能做什麼
自定義分析
自定義分析就是傳統意義上的埋點，使用者可以自行設定希望上報的資料，通過這些資料來分析你希望得到的結果。
微信官方的自定義分析使用了當下比較流行的無埋點技術，通過微信後臺配置錨點並實時下發到客戶端生效，無需在程式碼中手動加入埋點程式碼，並且由於小程式發版有稽核機制，如果手動埋一次點就需要重新提審，成本將會非常高，所以採用無埋點技術是非常適合於小程式的場景。
但從目前「大眾點評點餐」小程式中測試下來，目前內測版本的自定義分析（截止2017年3月2日）對程式碼本身設計與書寫的要求比較苛刻，資料採集需要與頁面page的data做到關聯，在某些場景下會出現比較難以滿足的情況。
接下來讓我們看看實現一個自定義事件的步驟：
1. 首先使用管理員賬號登入公眾平臺後臺，找到自定義分析(前面提到，需要單獨申請，否則看不到入口)
2. 如果第一次使用的話，事件列表為空，點選新增事件，填入打點事件的中英文名稱
3. 接下來是最關鍵的事件配置
動作的各項含義如下：(轉自微信小程式官方api)
trigger，觸發條件:
click 點選時觸發，必須指定page和element
enterPage 進入頁面時觸發，必須指定page
leavePage 離開頁面時觸發，必須指定page
pullDownRefresh 下拉重新整理時觸發，必須指定page
launch 載入小程式時觸發
background 切換到後臺觸發
foreground 切換到前臺觸發
share 分享時觸發
action trigger發生時的動作，預設會收集資料，包括系統預設資料和使用者自定義資料（data中定義）
空 只收集資料；
start 初始化並收集資料；
report 收集資料並上報事件資料
start_and_report 初始化，收集資料後上報；
注：每次report之前必須有start操作，未經過start操作是不會上報的。
對於一個動作，如果設定了start_and_report，且指定了click觸發條件，則時序如下：
click event -> start -> 收集資料 ->report
page 觸發的頁面, 如pages/index/index, pages/list/list，此規則與小程式app.json的pages欄位保持一致， 如果需要任意頁面觸發，則填寫ANY_PAGE。
element 觸發的元素，支援一層級的css的id和class選擇器，即必須以’.’或者’#’開頭
data 收集的自定義資料，為0到多項， 每一項都是以 “欄位名 欄位值”的方式；如果不填，則只收集系統資料。
欄位名：事件裡的欄位名
欄位值：事件這個欄位的資料值，填寫頁面上的變數名（即page例項的data欄位），可以蒐集頁面上的變數；如果data收集的是陣列裡的某一項資料（如list[].id），則根據當前觸發元素是由class得到的NodeList的第幾個來決定陣列下標。
除此之外，還可以填寫一些提供的系統屬性，以“$”開頭，目前支援以下屬性：
$PAGE_TIME 使用者從進入本頁面到當前的時間(觸發action的時間點)
$APP_TIME 使用者進入小程式到當前的時間(觸發action的時間點)
$CURRENT_PAGE 當前使用者所在的頁面
$LAST_PAGE 上一頁
注：data可以為空，為空時該事件上報僅收集系統預設欄位的資料
——————————————————————————————————
注意下我標紅的關於data的value的解釋，這個value就是之前說的「大眾點評點餐」小程式中某些場景下難以滿足採集需求的原因
我們先來繼續完成這個事件，等下再來回頭說說這個data的坑。
4. 全部配置完之後，就可以點選檢查欄位，然後填入一些欄位說明，然後點選儲存並測試，然後選擇一個開發人員點下一步，這時候這個開發人員可以用微信進入小程式，在小程式中click剛才我們配置的.add這個class對應的dom，然後回到剛才點選下一步的頁面中就可以看到打點的資料（下圖中kid和id就是之前配置的欄位）。
5. OK，到這裡為止一個事件的建立算完成了。
“坑”
接下來，回到剛才提到的data的value這個值，認真閱讀這行文字你會發現幾個重點：
- value只能是page例項的data欄位，也就是說不在page.data中的值不能用
- 如果是陣列，那該dom在class選擇器中的索引index就必須和page.data的陣列對應的索引index相等，否則會取錯！
其中第二點舉個例子：
我們選單頁中的加菜按鈕就是剛才配置的.add，假定列表陣列在page.data.menuList中，那這個紅框應該是page.data.menuList[2]，索引index就是2
那通過$(`.add`)的class選擇器獲取到的索引index=0(前面2個都是已售完，沒有.add)；
這時候使用自定義分析時，點選加號，上報的其實是page.data.menuList[0]的資料，而不是page.data.menuList[2]，所以就會上報了錯誤的資料
不足：
- 上報內容和page.data直接掛鉤，不靈活
- dom的index必須和page的data中陣列的index對齊，某些複雜情況下無法滿足需求（往往實際業務中，就會像我們的menu頁一樣，加號的出現條件是在沒有售完的情況下，無法對齊索引）
所以就目前自定義分析-內測階段來說，能採集到的資料比較有限，希望等全面開放之後能更加靈活於使用者配置
在小程式中自己實現埋點需求方案思考：
由於小程式中不支援cookie，而公司的統計系統有部分資料的傳送是通過cookie來實現的，後續可以考慮將所有資料手動在程式碼中埋點，然後通過ajax方式來傳送到公司的統計datebase中，由公司自己的統計系統來完全對小程式的統計。
本文對你有幫助？歡迎掃碼加入前端學習小組微信群：
