本篇要解決的問題
一直到寫這篇以前,本站的網站分析工具都是用 Google Analytics,上周(10/28)看見微軟也出了一套免費的網站分析工具:Clarity。
用了一下後,發現微軟這套主要收集的資料跟 GA 有所不同,偏向使用者行為,像是頁面的 Heatmaps、側錄、無效點擊……等的都有收集。
在部落格上官方也寫:
Clarity provides you with the tools to make informed decisions about changes to your website using real evidence, and it allows you to do so in a way that helps to respect your users’ privacy and data security.
Microsoft Clarity is now Generally Available
(Clarity為您提供了使用真實數據,做出有關網站更改的明智決策的工具,並允許您以有助於尊重用戶隱私和數據安全的方式來這樣做。)
但這幾年跟用戶隱私的相關新聞都風風雨雨的,既然官方都敢寫出來,那就還是來用一下。
而且實際使用後,提供的數據確實是一位網站經營者會想知道的,就覺得「哎唷,除了上古神獸 IE、萬惡罪魁 Outlook、想更就更 Windows10 外,微軟還是會出好東西的麻。」
本篇是筆記這次實際使用下覺得好用的功能,有興趣的朋友,可以到官方提供的 Demo 上去看看:
https://clarity.microsoft.com/demo/projects/view/3t0wlogvdz/dashboard
安裝 Clarity
安裝很容易,大致上來說跟 GA 一樣,申請好帳號後,把指定的程式碼埋進頁面裡就完成。
首先進到 Clarity 頁面:https://clarity.microsoft.com/projects
會先要求 註冊 / 登入 帳號:

登入後來新增一個 Project,首先要先填基本資料:

填上專案名稱、網站的網址、網站分類後,按下「Create」,就會在列表中看見我們剛新增的專案:

點擊進去,會看見跟 GA 一樣,提供了一段要埋的程式碼,把程式碼埋到各個頁面上就安裝完成。

Dashboard
目前 Clarity 可以看到的資料沒有 GA 多,但都很有趣,有些是 GA 上看不到的(這邊是說免費版,付費的沒用過不知道有沒有)。
Scroll depth 捲動深度
如果是用 GA,想要知道使用者的頁面捲動深度就必須另外寫事件,但在 Clarity 預設就看得到。

在寫這篇時,Heatmaps 上的 scroll 還未開放,因此還無法知道 53.87% 的位置,只能自行看數字推測大概位置。
Dead clicks 無回應點擊

「無回應點擊」是 August 自己翻譯的,因為上面的解釋是:「User clicked or tapped on a page with no effect」,使用者做 click 的動作,但卻沒有任何效果。
一開始看,Augustt 很疑惑,以為是頁面上的某個連結或按鈕死了才造成沒有回應,後來看了一下報表旁的「Recordings」,看一下是什麼時候被認定為 Dead clicks。
看了側錄後才發現,不少使用者在看文章時,不知道為什麼會點擊頁面上的空白地方,因為點擊的是空白處,頁面就不會有任何回應,就被歸在了 Dead clicks 中,像這樣:
直接把數據上的事件給側錄下來,這點覺得真的很方便,不得不說有時看 GA,看到一些奇怪的數據又找不出原因時,如果有個側錄可以記下來是很方便的事,至少行銷跟業務單位來詢問時有個東西可以回答。
Rage clicks 憤怒點擊

這個也很有趣,光看名稱就覺得有趣了 XD~
一般我們自己在看別人家的頁面,比方看到個「點我下載懶人包」之類的按鈕,如果點了發現沒反應後,我們會怎麼做?我們會一直點、繼續點、猛點 10 次、怒點 100 次!
這個就是 Rage clicks。
上面翻譯是:User rapidly clicked or tapped in the same small area。使用者在相同的小區域中快速單擊或點擊。
這個報表也有附上側錄,像這樣:
影片來源:https://clarity.microsoft.com/demo/player/3t0wlogvdz/rnjon0/1eyr0r3/1
看到側錄會覺得,使用者……猜不透啊 XD~
JavaScript errors
報表裡有提供 JS 錯誤的比例:

這邊比較可惜的是,點了側錄以後,時間軸上沒有列出 JS 錯誤的時間點,因此也不知道是發生了什麼錯誤,不過也很難勉強,因為 JS 錯誤常常也是看 console 去找問題,要錄下來也不知道該如何錄製。
只能說,當如果看到 JavaScript errors 的比例升高時,工程師們就要趕緊排查問題。
Quick backs 過快點擊回上頁

這也是一個有趣的報表,主要是使用者在頁面中點了某個連結,一進到新連結頁後馬上就按了上一頁回到本頁。
較容易發生這種狀況,猜測是:
- 誤點到廣告
- 頁面設計不良,文字跟連結之前距離太近
- 使用者被連結的文字騙了,進去後發現案情不單純就馬上退出
印象中以前看過,如果一個頁面太常發生使用者一進來就退出,會影響 SEO,因為搜尋引擎會判定這個頁面跟某個關鍵字的關係不大,才會有一進來就退出的情況,會被降排名。
基本數據
以上是 GA 中看不到的報表,都是跟使用者行為相關的,另外 Clarity 也有跟 GA 相同的數據。
Referrers 參照網址,使用者是怎麼進到我們的頁面的。
Browsers 瀏覽器,使用者進到我們的頁面是用哪個瀏覽器。(IE 太多就等著變地縛靈吧)
Popular pages 熱門頁面,哪些頁面最多人看。
Operating systems 操作系統,使用者進到我們的頁面,是用什麼系統。
Countries 國家,哪些國家的人最常來到我們的站。
Devices 使用裝置,進到我們頁面的使用者,使用 PC、平板、手機的比例各是多少。
基本數據除了數字,也都可以看得到 Heatmaps 跟 側錄:

Recordings
目前 Clarity 主要功能有四個頁籤,Dashboard 是第一個,Recordings 是第二個。
這邊就是所有側錄的集合,介面像這樣:

左邊是清單,可以照想要的方式來排列順序,右側就是點擊清單後會看得到的側錄影片。
這邊可以看到,清單上會顯示的是:裝置、作業系統、國家,這三個跟使用者比較相關,是一個比較模糊的分類。
畢竟如果可以看到「這個人就是王小明,就是他,這就是錄他在幹什麼」的情況,那個資及隱私的問題就大了。
所以只提供一個模糊的分類是可以理解及接受的。
Heatmaps
Heatmaps 熱點圖,一般在網頁上就是看哪邊點擊多,以及頁面捲動的深度。
在寫這篇的時候,捲動深度的部份還未開放,因此看不到,可以看到的是點擊:

左側是整理了被點擊的區塊清單,右側是直接用頁面來呈現點擊分佈。
選單上可以選擇裝置,也可以選擇時間區間。
使用後心得
微軟有別於 GA 另闢蹊徑的專走使用者行為的網站分析工具,在目前是免費的號召下,近期應該會湧入大量的使用者。
但會不會像 LINE@ 一樣有了大量使用者後就養套殺?畢竟一個沒有商業模式的功能,不會有企業想耗人力物力去維護。
另外這套對原本就有在做 Heatmaps、側錄功能的 Hotjar 或 Crazy Egg 來說,會是一個市場的破壞者。

