關于小程序開發的經驗以及過程中遇到的“坑”在我們團隊之前的小程序開發經驗系列文章中已經介紹的差不多了,大數據時代,一個產品成敗的背后需要用大量的數據去分析驗證。本期就和大家一起探索下,微信小程序是如何進行數據采集與分析的,當然還有過程中的“坑”。
本文部分示例來自于「大眾點評點餐」小程序的菜單頁面。
所有內容基于2017年3月2日為止的官方api
微信官方采集平臺介紹
微信小程序公眾平臺目前提供了一套官方的數據采集分析平臺。
官方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做到關聯,在某些場景下會出現比較難以滿足的情況。
接下來讓我們看看實現一個自定義事件的步驟:
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中,由公司自己的統計系統來完全對小程序的統計。
新聞熱點
疑難解答