很可惜 T 。T 您現(xiàn)在還不是作者身份,不能自主發(fā)稿哦~
如有投稿需求,請把文章發(fā)送到郵箱tougao@appcpx.com,一經錄用會有專人和您聯(lián)系
咨詢如何成為春羽作者請聯(lián)系:鳥哥筆記小羽毛(ngbjxym)
作者|edan
在流量數(shù)據(jù)分析的時候,頁面流量分布是一個非常重要的課題。特別是對于一些模塊特別豐富的頁面,熱力圖會是一個非常好的可視化方式。
一方面當頁面模塊非常多的時候,把數(shù)據(jù)里每個模塊名稱與真實app里“是誰”對應起來有一定的記憶成本;另外模塊的位置信息也是影響模塊本身曝光點擊指標的一個重要因素,但通過一般的圖表形式往往不能很好展示。
比如某出現(xiàn)app的首頁就是是非常適合用熱力圖來展示數(shù)據(jù)的產品形態(tài)。
本文就以筆者經歷過的一個熱力圖看板項目,分享一下如何構建這樣的一個可視化產品。下文中引用某出行app的首頁作為示例做方案講解(僅做示例)。
業(yè)內對于熱力圖的實現(xiàn),一般基于全埋點的技術,給當前頁面添加一個事件監(jiān)聽器。在用戶點擊的時候,上報被點擊元素的信息(主要包括url和element path,點擊坐標位置等信息)。在展示的時候有兩種方案:
方案一,純粹通過點擊的位置信息來描繪用戶在頁面上點擊的分布,并以真正熱力圖的形式展示哪些地方點得多,哪些地方點的少。優(yōu)點是精確到了像素點。但是缺點也非常明顯,不同的分辨率和網站布局方式(居中等)都會導致結果的不準確,并不能正確的展示被點擊的元素,在頁面進行改版或者布。
方案二,以頁面的dom信息構建每個元素的唯一標識element path,并結合頁面元素的位置信息作展示。這個方案的可視化粒度模塊層級的,其實更貼近用戶實際情況(因為比如我們點擊查找時就是為了點擊查找鍵,而點擊查找鍵的左邊還是中間并沒有太多實際意義)。他的優(yōu)勢在于可以結合模塊埋點的信息,后續(xù)展示更多模塊后續(xù)的其他業(yè)務指標數(shù)據(jù)(比如模塊帶來的意向,訂單)。
筆者當時面臨的背景是:單純的點擊指標深度不夠,業(yè)務方需要結合曝光與否看ctr。另外模塊后續(xù)帶來的意向,訂單,后續(xù)訪問時長也是進一步分析用戶的關鍵指標,所以最后選擇的是方案二。并且在方案而的基礎上還做了更多優(yōu)化:
1)在某些維度變換取值后,同一個頁面的布局會有所變化,最典型的比如版本。所以熱力圖需要在特定維度變化的時候,也變換到對應圖片上。
2)頁面的模塊是有層級關系的,可視化上需要把對應的層級關系展示出來。比如搜索/信息流/導航欄是三個一級模塊,他們之間可以比較。而導航欄下面的不同類目作為二級模塊,相互之間作比較。
方案的核心思路:通過對c端頁面作截圖,并獲取圖片背后的dom信息視圖樹,然后講視圖樹中的元素標示與埋點信息匹配上,最后展示對應埋點的指標。
調研市面上所有競品基本只支持截一屏,對于長列表頁面,比如POI詳情頁,很多模塊是截不全的。筆者所在的團隊為了支持長屏頁面,采取滾動截圖拼接的方案,客戶端通過模擬滾動,每滾動一段距離,就截屏一次,然后最后對多次截屏的圖片做拼接。圖片拼接—首先將多個截屏轉化為灰度圖,通過像素對比的方法找出前后圖片相似的部分,計算出圖片拼接的位置,進而對圖片進行裁剪拼接,最后融合成一張完整的長圖。
我們可以把一個app頁面的構成簡單理解為一張一張的小圖片按層次和位置堆疊而成。所以頁面可以用一個是視圖樹的結構來表示。而圖片上的每一個元素標示就是樹中的節(jié)點。
視圖樹節(jié)點包含的關鍵信息有位置信息。另外我們還需要通過了節(jié)點的路徑構建一個id,作為識別圖片模塊元素的唯一標示。
有了頁面上每一個元素的標示后,我們需要將埋點事件與元素標示對應上。由于頁面上的元素標示非常多一張圖可能有上百個元素構成。但是其中真正有數(shù)據(jù)上報的元素只有少數(shù)部分。所以我們以埋點事件為主鍵來匹配元素標示。
對于其中調用埋點系統(tǒng)中標準自動打點能力做的打點,客戶端可以直接獲取其埋點信息作自動填充,但是對于有些因為打點時機較復雜而采用手動上報的埋點,則只能通過人工維護匹配關系。
在數(shù)據(jù)展示階段,我們采用框選展示數(shù)據(jù)的形式, 同時考慮模塊之間有層級關系,所以還在頁面上做了下鉆的能力。既可以比對不同一級入口的點擊率(比如搜索,推薦,導航金剛)。又可以針對制定一級入口下鉆到具體類目看不同類目到轉化效率(比如看導航金剛里的 酒店,機票等)
另外支持熱力對比的功能,設置不同的篩選條件,并在對比圖上做了元素聯(lián)動的設計,幫助業(yè)務更好聚焦在自己關注點位上作比對。
可以看到,方案實現(xiàn)到這里,目前還不是真正意義熱力圖,我們可以進一步把視覺做得更好。
對于單圖對比模塊指標的場景下,需要進一步根據(jù)數(shù)值的大小,參考excel的條件格式,給不同的模塊上色階。
對于不同設置條件下的多圖比對場景,需要可以單獨凸顯對應模塊做可視化凸顯(比如以兩個模塊的外框粗細表示指標的大?。?。
-END-
本文為作者獨立觀點,不代表鳥哥筆記立場,未經允許不得轉載。
《鳥哥筆記版權及免責申明》 如對文章、圖片、字體等版權有疑問,請點擊 反饋舉報
我們致力于提供一個高質量內容的交流平臺。為落實國家互聯(lián)網信息辦公室“依法管網、依法辦網、依法上網”的要求,為完善跟帖評論自律管理,為了保護用戶創(chuàng)造的內容、維護開放、真實、專業(yè)的平臺氛圍,我們團隊將依據(jù)本公約中的條款對注冊用戶和發(fā)布在本平臺的內容進行管理。平臺鼓勵用戶創(chuàng)作、發(fā)布優(yōu)質內容,同時也將采取必要措施管理違法、侵權或有其他不良影響的網絡信息。
一、根據(jù)《網絡信息內容生態(tài)治理規(guī)定》《中華人民共和國未成年人保護法》等法律法規(guī),對以下違法、不良信息或存在危害的行為進行處理。
1. 違反法律法規(guī)的信息,主要表現(xiàn)為:
1)反對憲法所確定的基本原則;
2)危害國家安全,泄露國家秘密,顛覆國家政權,破壞國家統(tǒng)一,損害國家榮譽和利益;
3)侮辱、濫用英烈形象,歪曲、丑化、褻瀆、否定英雄烈士事跡和精神,以侮辱、誹謗或者其他方式侵害英雄烈士的姓名、肖像、名譽、榮譽;
4)宣揚恐怖主義、極端主義或者煽動實施恐怖活動、極端主義活動;
5)煽動民族仇恨、民族歧視,破壞民族團結;
6)破壞國家宗教政策,宣揚邪教和封建迷信;
7)散布謠言,擾亂社會秩序,破壞社會穩(wěn)定;
8)宣揚淫穢、色情、賭博、暴力、兇殺、恐怖或者教唆犯罪;
9)煽動非法集會、結社、游行、示威、聚眾擾亂社會秩序;
10)侮辱或者誹謗他人,侵害他人名譽、隱私和其他合法權益;
11)通過網絡以文字、圖片、音視頻等形式,對未成年人實施侮辱、誹謗、威脅或者惡意損害未成年人形象進行網絡欺凌的;
12)危害未成年人身心健康的;
13)含有法律、行政法規(guī)禁止的其他內容;
2. 不友善:不尊重用戶及其所貢獻內容的信息或行為。主要表現(xiàn)為:
1)輕蔑:貶低、輕視他人及其勞動成果;
2)誹謗:捏造、散布虛假事實,損害他人名譽;
3)嘲諷:以比喻、夸張、侮辱性的手法對他人或其行為進行揭露或描述,以此來激怒他人;
4)挑釁:以不友好的方式激怒他人,意圖使對方對自己的言論作出回應,蓄意制造事端;
5)羞辱:貶低他人的能力、行為、生理或身份特征,讓對方難堪;
6)謾罵:以不文明的語言對他人進行負面評價;
7)歧視:煽動人群歧視、地域歧視等,針對他人的民族、種族、宗教、性取向、性別、年齡、地域、生理特征等身份或者歸類的攻擊;
8)威脅:許諾以不良的后果來迫使他人服從自己的意志;
3. 發(fā)布垃圾廣告信息:以推廣曝光為目的,發(fā)布影響用戶體驗、擾亂本網站秩序的內容,或進行相關行為。主要表現(xiàn)為:
1)多次發(fā)布包含售賣產品、提供服務、宣傳推廣內容的垃圾廣告。包括但不限于以下幾種形式:
2)單個帳號多次發(fā)布包含垃圾廣告的內容;
3)多個廣告帳號互相配合發(fā)布、傳播包含垃圾廣告的內容;
4)多次發(fā)布包含欺騙性外鏈的內容,如未注明的淘寶客鏈接、跳轉網站等,誘騙用戶點擊鏈接
5)發(fā)布大量包含推廣鏈接、產品、品牌等內容獲取搜索引擎中的不正當曝光;
6)購買或出售帳號之間虛假地互動,發(fā)布干擾網站秩序的推廣內容及相關交易。
7)發(fā)布包含欺騙性的惡意營銷內容,如通過偽造經歷、冒充他人等方式進行惡意營銷;
8)使用特殊符號、圖片等方式規(guī)避垃圾廣告內容審核的廣告內容。
4. 色情低俗信息,主要表現(xiàn)為:
1)包含自己或他人性經驗的細節(jié)描述或露骨的感受描述;
2)涉及色情段子、兩性笑話的低俗內容;
3)配圖、頭圖中包含庸俗或挑逗性圖片的內容;
4)帶有性暗示、性挑逗等易使人產生性聯(lián)想;
5)展現(xiàn)血腥、驚悚、殘忍等致人身心不適;
6)炒作緋聞、丑聞、劣跡等;
7)宣揚低俗、庸俗、媚俗內容。
5. 不實信息,主要表現(xiàn)為:
1)可能存在事實性錯誤或者造謠等內容;
2)存在事實夸大、偽造虛假經歷等誤導他人的內容;
3)偽造身份、冒充他人,通過頭像、用戶名等個人信息暗示自己具有特定身份,或與特定機構或個人存在關聯(lián)。
6. 傳播封建迷信,主要表現(xiàn)為:
1)找人算命、測字、占卜、解夢、化解厄運、使用迷信方式治病;
2)求推薦算命看相大師;
3)針對具體風水等問題進行求助或咨詢;
4)問自己或他人的八字、六爻、星盤、手相、面相、五行缺失,包括通過占卜方法問婚姻、前程、運勢,東西寵物丟了能不能找回、取名改名等;
7. 文章標題黨,主要表現(xiàn)為:
1)以各種夸張、獵奇、不合常理的表現(xiàn)手法等行為來誘導用戶;
2)內容與標題之間存在嚴重不實或者原意扭曲;
3)使用夸張標題,內容與標題嚴重不符的。
8.「飯圈」亂象行為,主要表現(xiàn)為:
1)誘導未成年人應援集資、高額消費、投票打榜
2)粉絲互撕謾罵、拉踩引戰(zhàn)、造謠攻擊、人肉搜索、侵犯隱私
3)鼓動「飯圈」粉絲攀比炫富、奢靡享樂等行為
4)以號召粉絲、雇用網絡水軍、「養(yǎng)號」形式刷量控評等行為
5)通過「蹭熱點」、制造話題等形式干擾輿論,影響傳播秩序
9. 其他危害行為或內容,主要表現(xiàn)為:
1)可能引發(fā)未成年人模仿不安全行為和違反社會公德行為、誘導未成年人不良嗜好影響未成年人身心健康的;
2)不當評述自然災害、重大事故等災難的;
3)美化、粉飾侵略戰(zhàn)爭行為的;
4)法律、行政法規(guī)禁止,或可能對網絡生態(tài)造成不良影響的其他內容。
二、違規(guī)處罰
本網站通過主動發(fā)現(xiàn)和接受用戶舉報兩種方式收集違規(guī)行為信息。所有有意的降低內容質量、傷害平臺氛圍及欺凌未成年人或危害未成年人身心健康的行為都是不能容忍的。
當一個用戶發(fā)布違規(guī)內容時,本網站將依據(jù)相關用戶違規(guī)情節(jié)嚴重程度,對帳號進行禁言 1 天、7 天、15 天直至永久禁言或封停賬號的處罰。當涉及欺凌未成年人、危害未成年人身心健康、通過作弊手段注冊、使用帳號,或者濫用多個帳號發(fā)布違規(guī)內容時,本網站將加重處罰。
三、申訴
隨著平臺管理經驗的不斷豐富,本網站出于維護本網站氛圍和秩序的目的,將不斷完善本公約。
如果本網站用戶對本網站基于本公約規(guī)定做出的處理有異議,可以通過「建議反饋」功能向本網站進行反饋。
(規(guī)則的最終解釋權歸屬本網站所有)