摘要：從熱力圖可以明顯看到點擊率超過兩百時間段分別為月日點次月日點次月日點次統(tǒng)計這三個時間段頁面上報數(shù)據(jù)的次數(shù)可以發(fā)現(xiàn)貨架編輯這個頁面操作次數(shù)在三個時間段都是最多的，于是計劃重點分析這個頁面。

mpc管理臺業(yè)務配置越來越多，特別是貨架管理，卡產(chǎn)品管理，卡券管理三大模塊配置信息眼花繚亂，

屏幕的展示空間有限，需要合理排布配置信息才能最大化利用頁面空間，減少業(yè)務配置信息，

采集用戶操作行為數(shù)據(jù)，分析高頻操作，繪制出熱力圖等供產(chǎn)品/運營/設計同學參考，優(yōu)化參數(shù)配置，有效提高點擊轉化。

埋點貨架管理，卡產(chǎn)品管理，卡券管理頁面，監(jiān)聽全局click事件

上報信息：點擊事件的元素唯一的selector，時間，當前頁面hash值

關鍵點：

為了避免頻繁上報，只有用戶離開特定頁面或者log數(shù)據(jù)超過規(guī)定長度時才做一次上報

selector是由當前元素出發(fā)遞歸尋找父元素直到在頁面中querySeletorAll為唯一元素

從數(shù)據(jù)庫撈出的一個月有效上報數(shù)據(jù)（指特定頁面數(shù)據(jù)）有將近2000條，每一條的log數(shù)據(jù)都有多條點擊的明細數(shù)據(jù)。因為數(shù)據(jù)量大，先抽取某個時間段高頻操作作為分析樣本。以日期為橫坐標，時間為縱坐標，畫出熱力圖。

從熱力圖可以明顯看到點擊率超過兩百時間段分別為：

10月15日：9-10點 216次

10月17日：15-16點 256次

10月18日：10-11點 218次

統(tǒng)計這三個時間段頁面上報數(shù)據(jù)的次數(shù)

可以發(fā)現(xiàn)貨架編輯（shelf_edit）這個頁面操作次數(shù)在三個時間段都是最多的，于是計劃重點分析這個頁面。

將貨架編輯頁面的log數(shù)據(jù)篩選出來，使用nightmare（一個瀏覽器模擬器）渲染頁面

根據(jù)上報的seletor復現(xiàn)操作，同時采集繪制熱力圖數(shù)據(jù)，

x ：點擊事件觸發(fā)相對于 document 的橫坐標，主要取自于 event.pageX ；

y ：點擊事件觸發(fā)相對于 document 的縱坐標，主要取自于 event.pageY ；

screenWidth ：點擊事件觸發(fā)時屏幕的寬度；

screenHeight ：點擊事件觸發(fā)時屏幕的高度；

然后在頁面加載前，注入熱力圖heatmap.js繪制熱力圖

但是在使用nightmare復現(xiàn)時遇到了問題：

用戶的權限未知，測試環(huán)境數(shù)據(jù)與生產(chǎn)不一致，視圖會有很大的差別。

在生產(chǎn)上獲取的唯一的seletor因為視圖問題在測試環(huán)境卻不唯一，而操作步驟是關聯(lián)的，上一步獲取的seletor錯誤，后續(xù)所有的操作都走不下去。

權限問題比較好解決，只要在測試環(huán)境中新建一個只有貨架管理權限的用戶即可。但是數(shù)據(jù)不一致的問題就比較頭疼，不可能將生產(chǎn)數(shù)據(jù)同步過來，即使同步過來，在后續(xù)的增刪改操作環(huán)境數(shù)據(jù)也還是不一致。

錄屏中出現(xiàn)的就是因為數(shù)據(jù)不一致導致，選擇模擬操作的元素不一致，最后selector對應不上而無法繼續(xù)。

現(xiàn)在的用戶行為數(shù)據(jù)上報代碼是無侵入性，在特定高頻操作頁面統(tǒng)一監(jiān)聽事件，不影響原來的代碼邏輯，統(tǒng)一上報操作的dom元素。

改進：這種做法太理想化，因為視圖不同上報不能詳細到具體某個元素，只能上報固定的非動態(tài)的某些操作（按鈕），但這樣的話就是具體的去監(jiān)聽這些元素的事件，對代碼邏輯有依賴屬于侵入式。

這次因為openid涉及到用戶信息安全問題，沒能將數(shù)據(jù)導出，多條數(shù)據(jù)有可能是多個用戶上報的，在復現(xiàn)是也會出現(xiàn)問題。此外研究單個用戶的操作行徑會更有意義，多次操作并不意味著交互上一定有可改進的地方，也有可能是某個業(yè)務有多個用戶需要頻繁操作，單個用戶場景下的頻繁修改則需要引起注意。

改進：將上報的openId根據(jù)用戶名md5加密，對于分析數(shù)據(jù)來說，拿到的只需要是一個對應用戶的id值。

目前雖然由于數(shù)據(jù)問題熱力圖還無法繪制，但用nightmare能復現(xiàn)的步驟中已經(jīng)可以了解到一些用戶行為，來改進交互：

頻繁點擊的資源位在屏幕上的位置如果不會隨著數(shù)據(jù)的變化而改變是不是體驗更好，比如說增加卡券的按鈕

頻繁點擊的資源有沒有可能合并成一個固定的操作，比如說這次上報的數(shù)據(jù)有短時間內(nèi)多次點擊刪除卡券，如果頻繁需要整體更改可以增加一鍵刪除？

用戶多次點擊菜單列表有可能因為現(xiàn)在菜單過多，無法快速找到，新增加一個我的工作臺本地記錄用戶高頻的菜單項