用 Microsoft Clarity 網站分析工具,觀察使用者行為

/

本篇要解決的問題

一直到寫這篇以前,本站的網站分析工具都是用 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.
(Clarity為您提供了使用真實數據,做出有關網站更改的明智決策的工具,並允許您以有助於尊重用戶隱私和數據安全的方式來這樣做。)

Microsoft Clarity is now Generally Available

但這幾年跟用戶隱私的相關新聞都風風雨雨的,既然官方都敢寫出來,那就還是來用一下。

而且實際使用後,提供的數據確實是一位網站經營者會想知道的,就覺得「哎唷,除了上古神獸 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 上看不到的(這邊是說免費版,付費的沒用過不知道有沒有)。

Clarity 主要儀表版(點擊看原圖)
Clarity 主要儀表版(點擊看原圖)

Scroll depth 捲動深度

如果是用 GA,想要知道使用者的頁面捲動深度就必須另外寫事件,但在 Clarity 預設就看得到。

捲動深度
捲動深度

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

Dead clicks 無回應點擊

Dead clicks 無回應點擊
Dead clicks 無回應點擊

「無回應點擊」是 Augustus 自己翻譯的,因為上面的解釋是:「User clicked or tapped on a page with no effect」,使用者做 click 的動作,但卻沒有任何效果。

一開始看,Augustust 很疑惑,以為是頁面上的某個連結或按鈕死了才造成沒有回應,後來看了一下報表旁的「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 錯誤比例

這邊比較可惜的是,點了側錄以後,時間軸上沒有列出 JS 錯誤的時間點,因此也不知道是發生了什麼錯誤,不過也很難勉強,因為 JS 錯誤常常也是看 console 去找問題,要錄下來也不知道該如何錄製。

只能說,當如果看到 JavaScript errors 的比例升高時,工程師們就要趕緊排查問題。

Quick backs 過快點擊回上頁

Quick backs 過快點擊回上頁
Quick backs 過快點擊回上頁

這也是一個有趣的報表,主要是使用者在頁面中點了某個連結,一進到新連結頁後馬上就按了上一頁回到本頁。

較容易發生這種狀況,猜測是:

  1. 誤點到廣告
  2. 頁面設計不良,文字跟連結之前距離太近
  3. 使用者被連結的文字騙了,進去後發現案情不單純就馬上退出

印象中以前看過,如果一個頁面太常發生使用者一進來就退出,會影響 SEO,因為搜尋引擎會判定這個頁面跟某個關鍵字的關係不大,才會有一進來就退出的情況,會被降排名。


基本數據

以上是 GA 中看不到的報表,都是跟使用者行為相關的,另外 Clarity 也有跟 GA 相同的數據。

Referrers 參照網址,使用者是怎麼進到我們的頁面的。

Browsers 瀏覽器,使用者進到我們的頁面是用哪個瀏覽器。(IE 太多就等著變地縛靈吧)

Popular pages 熱門頁面,哪些頁面最多人看。

Operating systems 操作系統,使用者進到我們的頁面,是用什麼系統。

Countries 國家,哪些國家的人最常來到我們的站。

Devices 使用裝置,進到我們頁面的使用者,使用 PC、平板、手機的比例各是多少。

基本數據除了數字,也都可以看得到 Heatmaps 跟 側錄:

看得到 Heatmaps 跟側錄
看得到 Heatmaps 跟側錄

Recordings

目前 Clarity 主要功能有四個頁籤,Dashboard 是第一個,Recordings 是第二個。

這邊就是所有側錄的集合,介面像這樣:

Clarity Recordings 介面
Clarity Recordings 介面

左邊是清單,可以照想要的方式來排列順序,右側就是點擊清單後會看得到的側錄影片。

這邊可以看到,清單上會顯示的是:裝置、作業系統、國家,這三個跟使用者比較相關,是一個比較模糊的分類。

畢竟如果可以看到「這個人就是王小明,就是他,這就是錄他在幹什麼」的情況,那個資及隱私的問題就大了。

所以只提供一個模糊的分類是可以理解及接受的。


Heatmaps

Heatmaps 熱點圖,一般在網頁上就是看哪邊點擊多,以及頁面捲動的深度。

在寫這篇的時候,捲動深度的部份還未開放,因此看不到,可以看到的是點擊:

Heatmaps 點擊分佈
Heatmaps 點擊分佈

左側是整理了被點擊的區塊清單,右側是直接用頁面來呈現點擊分佈。

選單上可以選擇裝置,也可以選擇時間區間。


使用後心得

微軟有別於 GA 另闢蹊徑的專走使用者行為的網站分析工具,在目前是免費的號召下,近期應該會湧入大量的使用者。

但會不會像 LINE@ 一樣有了大量使用者後就養套殺?畢竟一個沒有商業模式的功能,不會有企業想耗人力物力去維護。

另外這套對原本就有在做 Heatmaps、側錄功能的 Hotjar 或 Crazy Egg 來說,會是一個市場的破壞者。

Summary
用 Microsoft Clarity 網站分析工具,觀察使用者行為
Article Name
用 Microsoft Clarity 網站分析工具,觀察使用者行為
Description
本篇大綱:本篇要解決的問題。安裝 Clarity。Scroll depth 捲動深度。Dead clicks 無回應點擊。Rage clicks 憤怒點擊。JavaScript errors。Quick backs 過快點擊回上頁。基本數據。Recordings。Heatmaps。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Google Sheets

如何用 Google Sheets / Excel 當作資料庫

Analytics Google

GA 工具 Google Analytics Debugger 介紹及使用

Vue

用 VuePress 製作說明文件頁面 – 4:佈景主題、外掛

Analytics Google

GA:User-ID 功能 設定及報表檢視

Google Others

用 reCAPTCHA v3 來做非機器人驗證

PWA

PWA 學習筆記-1:Cache、Workbox 基本使用

Google Others

用 Firebase、Google Apps Script、GTM 自己做一個讚按鈕

WordPress

Ubuntu 安裝 WordPress – 3:VM、資料庫權限、PHP、WordPress

Bot Telegram

Telegram Bot 學習筆記 – 5:取得使用者大頭照

Front-End

用 Microsoft Clarity 網站分析工具,觀察使用者行為

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言