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

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

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

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

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

上報(bào)信息：點(diǎn)擊事件的元素唯一的selector，時(shí)間，當(dāng)前頁(yè)面hash值

關(guān)鍵點(diǎn)：

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

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

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

從熱力圖可以明顯看到點(diǎn)擊率超過(guò)兩百時(shí)間段分別為：

10月15日：9-10點(diǎn) 216次

10月17日：15-16點(diǎn) 256次

10月18日：10-11點(diǎn) 218次

統(tǒng)計(jì)這三個(gè)時(shí)間段頁(yè)面上報(bào)數(shù)據(jù)的次數(shù)

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

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

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

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

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

screenWidth ：點(diǎn)擊事件觸發(fā)時(shí)屏幕的寬度；

screenHeight ：點(diǎn)擊事件觸發(fā)時(shí)屏幕的高度；

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

但是在使用nightmare復(fù)現(xiàn)時(shí)遇到了問(wèn)題：

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

在生產(chǎn)上獲取的唯一的seletor因?yàn)橐晥D問(wèn)題在測(cè)試環(huán)境卻不唯一，而操作步驟是關(guān)聯(lián)的，上一步獲取的seletor錯(cuò)誤，后續(xù)所有的操作都走不下去。

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

錄屏中出現(xiàn)的就是因?yàn)閿?shù)據(jù)不一致導(dǎo)致，選擇模擬操作的元素不一致，最后selector對(duì)應(yīng)不上而無(wú)法繼續(xù)。

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

改進(jìn)：這種做法太理想化，因?yàn)橐晥D不同上報(bào)不能詳細(xì)到具體某個(gè)元素，只能上報(bào)固定的非動(dòng)態(tài)的某些操作（按鈕），但這樣的話就是具體的去監(jiān)聽這些元素的事件，對(duì)代碼邏輯有依賴屬于侵入式。

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

改進(jìn)：將上報(bào)的openId根據(jù)用戶名md5加密，對(duì)于分析數(shù)據(jù)來(lái)說(shuō)，拿到的只需要是一個(gè)對(duì)應(yīng)用戶的id值。

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

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

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

用戶多次點(diǎn)擊菜單列表有可能因?yàn)楝F(xiàn)在菜單過(guò)多，無(wú)法快速找到，新增加一個(gè)我的工作臺(tái)本地記錄用戶高頻的菜單項(xiàng)