大眾點評點餐小程式開發經驗 - 資料採集

美團點評點餐發表於2017-03-09

作者介紹:鄒弓一,美團點評前端工程師,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中,由公司自己的統計系統來完全對小程式的統計。


本文對你有幫助?歡迎掃碼加入前端學習小組微信群:

大眾點評點餐小程式開發經驗 - 資料採集

相關文章