方格精選

觀察網站訪客軌跡的免費螢幕錄影工具

更新於 發佈於 閱讀時間約 5 分鐘
raw-image

觀察訪客在網站上的瀏覽動線、畫面捲動、滑鼠的移動軌跡與點擊,可以幫助網站經營者了解網頁設計布局上的缺失,並進一步調整優化,便能讓網站的使用體驗能持續變好,提高轉換率,近期來已逐漸被電商業視為必備工具項目之一了。

提到螢幕錄影工具,一般人應該都是聯想到 Hotjar,Hotjar 的功能是強大的,但畢竟它的商業模式是 Freemium (免費增值商業模式),可以免費使用,不過免費的方案是有不少限制的,包括每日 2,000 pageviews,300 個錄影檔 ...


raw-image
除了 Hotjar 以外,還有其他選擇嗎?

當然有,例如 Google Optimize 也提供了使用者行為的分析,不過既然大家已經使用了一大堆 Google 的服務了,使用不同廠商的服務來分工,除了可避免所有工具或服務都被單一廠商所綁架的風險,也可能有交叉比對驗證數據的功能喔。

Microsoft Clarity

本篇文章要介紹的螢幕錄影工具,是 Microsoft Clarity (https://clarity.microsoft.com/),微軟前幾天發佈了免費且符合GDPR的用戶行為分析工具 Clarity,對頁面加載時間的影響極小,雖然功能尚未完整,但已含有最重要的螢幕錄影功能,而且目前尚未有使用流量的限制,對於使用 Hotjar 免費方案而無法滿足的使用者,應該評估採用 Microsoft Clarity 的可能性。


圖片來自 Microsoft Clarity 官方介紹

圖片來自 Microsoft Clarity 官方介紹

Clarity 的安裝方式也很簡單,與 Google Analytics 安裝追蹤碼的方式大致相同,就是將 Clarity 提供的一段 JS 追蹤碼,埋入網站的 <head> 段落中即可,如果您是採用 CMS 架站,您就可以直接利用網站提供 Custom JS 的功能,或是在放置 Google Analytics 追蹤碼的地方,直接放在 GA 的追蹤碼之後即可。


raw-image

Clarity 在安裝之後,官方宣稱可能需要 2 個小時之後,才能呈現收錄的資訊,不過個人實測第一個網站,收到紀錄進來的時間約是在 50 分鐘之後。


raw-image
目前提供的分析功能,主要分為 3 個大項
Dashboard

Dashboard 是數據總覽分析表,包含了工作階段數、平均頁數、平均捲動深度、互動時間、無效點擊(這個有趣)、熱門頁面、參照來源 ... 等等,雖然沒有 GA 的深度及廣度,但主要的指標聚合在一個畫面,也提供了快速理解的功能。

其中有部分數據還可以直接點擊查看該區隔的 heatmaps(熱點地圖) 與 recordings(螢幕錄影)。

raw-image
Recordings

Recordings 就是訪客的螢幕錄影回播功能,預設會遮蔽重要的輸入資訊,例如信用卡號或密碼,強調注重隱私。畫面左側會呈現每個工作階段的資料區塊,包含了瀏覽頁數、時間、點擊數、裝置別、OS別、國家別等等。

左側的資料區塊有提供 Filter(篩選)及 Sort(排序)的功能,點擊左側您想撥放的資料區塊,就會在右側出現訪客視角的畫面錄影重播,並標示出滑鼠的軌跡與點擊,並提供了跳過無互動時段的功能,節省你觀看了時間。


raw-image
Heatmaps

Heatmaps 是用來呈現網頁被點擊的熱區,前端工程師或美編應該很需要這項功能,可以藉此檢討版面的編排設計,找出不該被點擊的地方卻一直被誤點,該被點擊的地方卻一直被略過等等。


(抱歉資料累積還不多)

(抱歉資料累積還不多)

個人主觀評論

Clarity 目前還稱不上功能強大,不過仍可安裝 Clarity 來搭配其他流量分析工具使用,對於需要 heatmaps(熱點地圖) 與 recordings(螢幕錄影)功能的人,若不願被 Hotjar 免費方案所限制,則Clarity 也不失為一個好選項,就算您暫時仍不打算安裝 Clarity,建議也應該關注 Clarity 的發展,畢竟微軟在軟體界有舉足輕重的地位,若微軟願意投入資源好好發展 Clarity,相信仍有能力將 Clarity 打造成功能強大的分析工具。


留言
avatar-img
留言分享你的想法!
avatar-img
電商工匠的沙龍
7會員
10內容數
電商工匠的沙龍的其他內容
2021/02/08
OpenCart 官方的 3.0.3.7 版於上周釋出,除了修正許多 3.0.x 版累積的小問題,也更新了 twig 套件解決了 PHP 7.4 的相容問題,所以 OpenCart 台灣電商技術團隊,也以 OpenCart 3.0.3.7 版為基礎,加上了在地優化及實用模組,推出台灣優化版。
Thumbnail
2021/02/08
OpenCart 官方的 3.0.3.7 版於上周釋出,除了修正許多 3.0.x 版累積的小問題,也更新了 twig 套件解決了 PHP 7.4 的相容問題,所以 OpenCart 台灣電商技術團隊,也以 OpenCart 3.0.3.7 版為基礎,加上了在地優化及實用模組,推出台灣優化版。
Thumbnail
2021/01/27
如果您的電商網站,需要很多樣化的首頁,來應付不同檔期的活動,不只是換換 Banner 而已,而是每次的排版都有很大的變動,有時撥放影片、有時需要拚圖圖片,甚至針對不同身分顯示不同的內容,或是設定特定區塊的顯示時間,那麼採用 OpenCart + Journal 版型,可能是最能滿足您需求的組合。
Thumbnail
2021/01/27
如果您的電商網站,需要很多樣化的首頁,來應付不同檔期的活動,不只是換換 Banner 而已,而是每次的排版都有很大的變動,有時撥放影片、有時需要拚圖圖片,甚至針對不同身分顯示不同的內容,或是設定特定區塊的顯示時間,那麼採用 OpenCart + Journal 版型,可能是最能滿足您需求的組合。
Thumbnail
2021/01/09
綠界科技雖然為 OpenCart 電商系統推出了可直接安裝使用的金流擴充模組,但其設計的模組架構,並不算完全符合 OpenCart 金流模組的架構規則,包含後臺編輯不同付款方式時的設定,無法獨立分開設定,前台的金流選擇,更是被設計成兩段式的模式,非常不符合台灣消費者慣用的習性。
Thumbnail
2021/01/09
綠界科技雖然為 OpenCart 電商系統推出了可直接安裝使用的金流擴充模組,但其設計的模組架構,並不算完全符合 OpenCart 金流模組的架構規則,包含後臺編輯不同付款方式時的設定,無法獨立分開設定,前台的金流選擇,更是被設計成兩段式的模式,非常不符合台灣消費者慣用的習性。
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
Windows Clarity 是一種網站分析產品,讓網站設計師、開發人員可藉由它,更容易觀察用戶在網站的操作行為,協助更快速的優化網站,加強網頁的轉換效果與商業目標的達成。本文將介紹 Windows Clarity 應該如何使用,強化分析能力與優化網站效益。
Thumbnail
Windows Clarity 是一種網站分析產品,讓網站設計師、開發人員可藉由它,更容易觀察用戶在網站的操作行為,協助更快速的優化網站,加強網頁的轉換效果與商業目標的達成。本文將介紹 Windows Clarity 應該如何使用,強化分析能力與優化網站效益。
Thumbnail
在Google Analytics中,您可以授予其他使用者對您的資源(例如網站或應用程式)的存取權限。這樣他們就可以查看和分析資源的數據。下面是在Google Analytics中新增資源存取權限的步驟:
Thumbnail
在Google Analytics中,您可以授予其他使用者對您的資源(例如網站或應用程式)的存取權限。這樣他們就可以查看和分析資源的數據。下面是在Google Analytics中新增資源存取權限的步驟:
Thumbnail
※ 效能 What tools would you use to monitor or analyze your performance ? 中文意思:在監控或分析系統性能方面可能會使用哪些工具? ※ 解答: 常見的監控和分析工具,可分成以下6大類: 系統監控工具: 例如,Promethe
Thumbnail
※ 效能 What tools would you use to monitor or analyze your performance ? 中文意思:在監控或分析系統性能方面可能會使用哪些工具? ※ 解答: 常見的監控和分析工具,可分成以下6大類: 系統監控工具: 例如,Promethe
Thumbnail
為什麼要整合GA、Search Console、AdSense? 將Google Analytics(GA)、Search Console和AdSense三者連接在一起具有多重好處。首先,這使得綜合數據分析變得更加方便,你可以在同一個平台上查看網站流量、搜尋表現和廣告收入等信息
Thumbnail
為什麼要整合GA、Search Console、AdSense? 將Google Analytics(GA)、Search Console和AdSense三者連接在一起具有多重好處。首先,這使得綜合數據分析變得更加方便,你可以在同一個平台上查看網站流量、搜尋表現和廣告收入等信息
Thumbnail
SEO(搜尋引擎優化)是在網站優化和改進的過程中,提升網站在搜尋引擎中的排名和曝光度的一種策略。本文將介紹一些實用的SEO工具和常見的SEO名詞。無論你是一個新手還是一個有經驗的SEO專家,這些工具和名詞都可以成為你的寶貴資源,幫助你獲得更好的SEO成果。
Thumbnail
SEO(搜尋引擎優化)是在網站優化和改進的過程中,提升網站在搜尋引擎中的排名和曝光度的一種策略。本文將介紹一些實用的SEO工具和常見的SEO名詞。無論你是一個新手還是一個有經驗的SEO專家,這些工具和名詞都可以成為你的寶貴資源,幫助你獲得更好的SEO成果。
Thumbnail
嗨,這是一篇系列文,我會陸續介紹Google Slide(Google簡報)、Canva、Microsoft PowerPoint(PPT)的簡報備忘稿與檢視模式,最後會再有一篇介紹如何在Google Meet做應用。本篇介紹Google Slide(Google簡報)。
Thumbnail
嗨,這是一篇系列文,我會陸續介紹Google Slide(Google簡報)、Canva、Microsoft PowerPoint(PPT)的簡報備忘稿與檢視模式,最後會再有一篇介紹如何在Google Meet做應用。本篇介紹Google Slide(Google簡報)。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News