大衆點評點餐小程序開發經驗 - 數據採集

做者介紹：鄒弓一，美團點評前端工程師，4年 Web 前端開發經驗，如今是美團點評點餐團隊的一員。

關於小程序開發的經驗以及過程當中遇到的「坑」在咱們團隊以前的小程序開發經驗系列文章中已經介紹的差很少了，大數據時代，一個產品成敗的背後須要用大量的數據去分析驗證。本期就和你們一塊兒探索下，微信小程序是如何進行數據採集與分析的，固然還有過程當中的「坑」。

本文部分示例來自於「大衆點評點餐」小程序的菜單頁面。

全部內容基於2017年3月2日爲止的官方api

微信官方採集平臺介紹

微信小程序公衆平臺目前提供了一套官方的數據採集分析平臺。
官方api：mp.weixin.qq.com/debug/wxado…
就目前小程序公測版官方提供瞭如下幾種數據分析：

1. 概況：提供小程序關鍵指標趨勢以及top頁面訪問數據，快速瞭解小程序發展概況；(不須要手動配置，官方默認採集)
2. 訪問分析：提供小程序用戶訪問來源、規模、頻次、時長、深度以及頁面詳情等數據，具體分析用戶新增和活躍狀況；(不須要手動配置，官方默認採集)
3. 實時統計：提供小程序實時訪問數據，知足實時監控需求；(不須要手動配置，官方默認採集)
4. 自定義分析：配置自定義上報，精細跟蹤用戶在小程序內的行爲，結合用戶屬性、系統屬性、事件屬性進行靈活多維的事件分析和漏斗分析，知足小程序的個性化分析需求；(內側中，須要單獨申請開通權限才能使用)

具體數據可經過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這個值，認真閱讀這行文字你會發現幾個重點：

1. value只能是page實例的data字段，也就是說不在page.data中的值不能用
2. 若是是數組，那該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]，因此就會上報了錯誤的數據

不足：

1. 上報內容和page.data直接掛鉤，不靈活
2. dom的index必須和page的data中數組的index對齊，某些複雜狀況下沒法知足需求（每每實際業務中，就會像咱們的menu頁同樣，加號的出現條件是在沒有售完的狀況下，沒法對齊索引）
   
   因此就目前自定義分析-內測階段來講，能採集到的數據比較有限，但願等全面開放以後能更加靈活於用戶配置

在小程序中本身實現埋點需求方案思考：

因爲小程序中不支持cookie，而公司的統計系統有部分數據的發送是經過cookie來實現的，後續能夠考慮將全部數據手動在代碼中埋點，而後經過ajax方式來發送到公司的統計datebase中，由公司本身的統計系統來徹底對小程序的統計。

---

本文對你有幫助？歡迎掃碼加入前端學習小組微信羣：