起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識熱力元素分析看板實例
編輯導語：在流量數據分析中，頁面流量的分布是一個比較重要的課題，熱力圖對于一些模塊特別豐富的頁面，是一個非常好的可視化呈現方式。作者以自己經歷過的一個熱力圖看板項目為例，分享如何構建這樣一個可視化產品，一起來看看吧。
一、為什么要用熱力圖來展示數據？
在流量數據分析的時候，頁面流量分布是一個非常重要的課題。特別是對于一些模塊特別豐富的頁面，熱力圖會是一個非常好的可視化方式。
一方面當頁面模塊非常多的時候，把數據里每個模塊名稱與真實App里“是誰”對應起來有一定的記憶成本；另外模塊的位置信息也是影響模塊本身曝光點擊指標的一個重要因素，但通過一般的圖表形式往往不能很好展示。
比如某出現app的首頁就是是非常適合用熱力圖來展示數據的產品形態。
本文就以筆者經歷過的一個熱力圖看板項目，分享一下如何構建這樣的一個可視化產品。下文中引用某出行app的首頁作為示例做方案講解（僅做示例）。
二、業內常規方法
業內對于熱力圖的實現，一般基于全埋點的技術，給當前頁面添加一個事件監聽器。在用戶點擊的時候，上報被點擊元素的信息(主要包括url和element path，點擊坐標位置等信息)。
在展示的時候有兩種方案：
方案一，純粹通過點擊的位置信息來描繪用戶在頁面上點擊的分布，并以真正熱力圖的形式展示哪些地方點得多，哪些地方點的少。
優點是精確到了像素點。但是缺點也非常明顯，不同的分辨率和網站布局方式（居中等）都會導致結果的不準確，并不能正確的展示被點擊的元素，在頁面進行改版或者布。
方案二，以頁面的dom信息構建每個元素的唯一標識element path，并結合頁面元素的位置信息作展示。
這個方案的可視化粒度模塊層級的，其實更貼近用戶實際情況（因為比如我們點擊查找時就是為了點擊查找鍵，而點擊查找鍵的左邊還是中間并沒有太多實際意義）。
他的優勢在于可以結合模塊埋點的信息，后續展示更多模塊后續的其他業務指標數據（比如模塊帶來的意向，訂單）。
三、基于業務需求的構建方案
筆者當時面臨的背景是：單純的點擊指標深度不夠，業務方需要結合曝光與否看ctr。另外模塊后續帶來的意向，訂單，后續訪問時長也是進一步分析用戶的關鍵指標，所以最后選擇的是方案二。并且在方案而的基礎上還做了更多優化：
在某些維度變換取值后，同一個頁面的布局會有所變化，最典型的比如版本。所以熱力圖需要在特定維度變化的時候，也變換到對應圖片上。
頁面的模塊是有層級關系的，可視化上需要把對應的層級關系展示出來。比如搜索/信息流/導航欄是三個一級模塊，他們之間可以比較。而導航欄下面的不同類目作為二級模塊，相互之間作比較。
四、整體方案思路
方案的核心思路：通過對c端頁面作截圖，并獲取圖片背后的dom信息視圖樹，然后講視圖樹中的元素標示與埋點信息匹配上，最后展示對應埋點的指標。
1. 截圖
調研市面上所有競品基本只支持截一屏，對于長列表頁面，比如POI詳情頁，很多模塊是截不全的。
筆者所在的團隊為了支持長屏頁面，采取滾動截圖拼接的方案，客戶端通過模擬滾動，每滾動一段距離，就截屏一次，然后最后對多次截屏的圖片做拼接。
圖片拼接—首先將多個截屏轉化為灰度圖，通過像素對比的方法找出前后圖片相似的部分，計算出圖片拼接的位置，進而對圖片進行裁剪拼接，最后融合成一張完整的長圖。
2. 獲取圖片視圖樹
我們可以把一個app頁面的構成簡單理解為一張一張的小圖片按層次和位置堆疊而成。所以頁面可以用一個是視圖樹的結構來表示。而圖片上的每一個元素標示就是樹中的節點。
視圖樹節點包含的關鍵信息有位置信息。另外我們還需要通過了節點的路徑構建一個id，作為識別圖片模塊元素的唯一標示。
3. 匹配視圖樹與埋點事件
有了頁面上每一個元素的標示后，我們需要將埋點事件與元素標示對應上。由于頁面上的元素標示非常多一張圖可能有上百個元素構成。但是其中真正有數據上報的元素只有少數部分。所以我們以埋點事件為主鍵來匹配元素標示。
對于其中調用埋點系統中標準自動打點能力做的打點，客戶端可以直接獲取其埋點信息作自動填充，但是對于有些因為打點時機較復雜而采用手動上報的埋點，則只能通過人工維護匹配關系。
4. 數據處理與展現
在數據展示階段，我們采用框選展示數據的形式， 同時考慮模塊之間有層級關系，所以還在頁面上做了下鉆的能力。
既可以比對不同一級入口的點擊率（比如搜索，推薦，導航金剛）。又可以針對制定一級入口下鉆到具體類目看不同類目到轉化效率（比如看導航金剛里的 酒店，機票等）。
另外支持熱力對比的功能，設置不同的篩選條件，并在對比圖上做了元素聯動的設計，幫助業務更好聚焦在自己關注點位上作比對。
五、寫在最后
可以看到，方案實現到這里，目前還不是真正意義熱力圖，我們可以進一步把視覺做得更好。
對于單圖對比模塊指標的場景下，需要進一步根據數值的大小，參考excel的條件格式，給不同的模塊上色階。
對于不同設置條件下的多圖比對場景，需要可以單獨凸顯對應模塊做可視化凸顯（比如以兩個模塊的外框粗細表示指標的大?。?。
作者：edan，前商業數據分析師，現TMD數據產品經理；“數據人創作者聯盟”成員；期望和數據小伙伴一起做些有意思的事情。
本文由@一個數據人的自留地 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自pexels，基于CC0協議
- 目前還沒評論，等你發揮！
