關於大眾點評點餐小程式開發過程中的資料收集的經驗分享

#關於小程式開發的經驗以及過程中遇到的「坑」在我們團隊之前的小程式開發經驗系列文章中已經介紹的差不多了，大數據時代，一個產品成敗的背後需要用大量的數據去分析驗證。本期就和大家一起探索下，微信小程式是如何進行資料蒐集與分析的，當然還有過程中的「坑」。

本文部分範例來自「大眾點評點餐」小程式的選單頁面。

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

微信小程式公眾平台目前提供了一套官方的數據採集分析平台。
官方api：https://mp.weixin.qq.com/debug/wxadoc/analysis/index.html?t=201726
就目前小程式公測版官方提供了以下幾種數據分析：

• 概況：提供小程式關鍵指標趨勢以及top頁面存取數據，快速了解小程式發展概況；(不需要手動配置，官方預設採集)

• 存取分析：提供小程式使用者存取來源、規模、頻次、時長、深度以及頁面詳情等數據，具體分析使用者新增和活躍情況；(不需要手動配置，官方預設採集)

• 即時統計：提供小程式即時存取數據，滿足即時監控需求；(不需要手動配置，官方預設採集)

• 自訂分析：配置自訂上報，精細追蹤使用者在小程式內的行為，結合使用者屬性、系統屬性、事件屬性進行靈活多維的事件分析與漏斗分析，滿足小程式的個人化分析需求；(內側中，需要單獨申請開放權限才能使用)
  

具體數據可透過https://mp.weixin.qq.com 使用小程式管理員帳號登入之後查看。

前3種方式都是小程式自動採集，不需要開發者任何的人為操作，在微信官方文件中都有詳細說明了，這邊就不再闡述

本文主要結合「大眾點評點餐」小程式來看下第4種-自訂分析能做什麼

自訂分析就是傳統意義上的埋點，使用者可以自行設定希望回報的數據，透過這些數據來分析你希望得到的結果。

微信官方的自訂分析使用了當下比較流行的無埋點技術，透過微信後台配置錨點並即時下發到客戶端生效，無需在程式碼中手動加入埋點程式碼，而且由於小程式發版有審核機制，如果手動埋一次點就需要重新提審，成本將會非常高，所以採用無埋點技術是非常適合於小程式的場景。

但從目前「大眾點評點餐」小程式中測試下來，目前內測版本的自訂分析（截止2017年3月2日）對程式碼本身設計與書寫的要求比較苛刻，資料收集需要與頁面page的data做到關聯，在某些場景下會出現較難滿足的情況。

接下來讓我們來看看實作一個自訂事件的步驟：

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觸發條件，則時序如下：

page 觸發的頁面, 如pages/index/index, pages/list/list，此規則與小程式app.json的pages欄位保持一致，如果需要任意頁面觸發，則填寫ANY_PAGE。 element 觸發的元素，支援一層層級的css的id和class選擇器，即必須以'.'或'#'開頭data 收集的自訂數據，為0到多項， 每一項都是以「欄位名字段值」的方式；如果不填，則只收集系統資料。

欄位值：事件這個欄位的資料值，填入頁面上的變數名稱（即page實例的data欄位），可以蒐集頁面上的變數；如果da​​ta收集的是數組裡的某一項資料（如list[].id），則根據目前觸發元素是由class得到的NodeList的第幾個來決定數組下標。

除此之外，還可以填入一些提供的系統屬性，以「$」開頭，目前支援以下屬性： ##$PAGE_TIME 使用者從進入本頁到目前的時間(觸發action的時間點)

$CURRENT_PAGE 目前用戶所在的頁面

$LAST_PAGE 上一頁

註：data可以為空，為空時該事件上報僅收集系統預設欄位的資料

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

#注意下我標紅的關於data的value的解釋，這個value就是之前說的「大眾點評點餐」小程式中某些場景下難以滿足採集需求的原因

我們先來繼續完成這個事件，等下來再來說說這個data的坑。

接下來，回到剛才提到的data的value這個值，認真閱讀這行文字你會發現幾個重點：

• value只能是page實例的data字段，也就是說不在page.data中的值不能用

• #如果是數組，那該dom在class選擇器中的索引index就必須和page.data的陣列對應的索引index相等，否則會取錯！
  

其中第二點舉例範例：

• 回報內容和page.data直接掛鉤，不靈活

• dom的index必須和page的data中數組的index對齊，在某些複雜情況下無法滿足需求（往往實際業務中，就會像我們的menu頁一樣，加號的出現條件是在沒有售完的情況下，無法對齊索引）
  
  所以就目前自訂分析-內測階段來說，能採集到的數據比較有限，希望等全面開放之後能更靈活於使用者配置
  

  #

#由於小程式中不支援cookie，而公司的統計系統有部分資料的發送是透過cookie來實現的，後續可以考慮將所有資料手動在程式碼中埋點，然後透過ajax方式來發送到公司的統計datebase中，由公司自己的統計系統來完全對小程式的統計。