Google Analytics 是不可多得的網站分析工具,但從今以後大家要認識多一項工具了,因為 Microsoft 也推出了類似的「Clarity」,能夠提供到 Google Analytics 沒有的數據,包括熱點圖、點擊情況等等。事不而遲,現在就看看 Microsoft Clarity 的教學吧!
Microsoft Clarity 是甚麼?
在 2020 年 Microsoft 更新了網站管理員 Bing Webmaster Tools,但除此之外還推出了 Clarity 這款網頁分析工具。此後,Clarity 亦不斷更新,除了加入中文版之外,界面亦有所改良。
Microsoft Clarity:官方網站
在 Google Analytics,我們可以看到網頁瀏覽量、訪客來源、造訪方式等數據,而 Microsoft Clarity 就可以提供另類的數據,例如反映訪客熱門點擊位置的熱點圖(Heatmap)、各種點擊的類型(無效點擊 Dead click、憤怒點擊 Rage click)。可以說,Microsoft Clarity 是 Google Analytics 的重要補充,讓網站主能夠更了解訪客的思想,助我們改進網站體驗。
Microsoft Clarity 安裝方法
第一步:授權登入
與很多應用程式一樣,Microsoft Clarity 可以使用 Google、Facebook 或 Microsoft 帳戶來登入。

首次登入時,Microsoft Clarity 會要求獲得授權。

而進入 Microsoft Clarity 後,會要求確認電郵地址。

第二步:新增項目
接著就可以建立新項目了。點選「新增專案」後,就輸入項目的名稱、網址便可創建,非常簡單。


第三步:加入 HTML 碼
與 Google Analytics 等分析工具一樣,Microsoft Clarity 亦需在網頁加入 HTML 碼方能追蹤。加入 Microsoft Clarity 的方式有兩種,最直接的是在網頁的 <head> 範圍加入追縱碼。如果用戶是使用 WordPress 架設網站,更可直接安裝 Microsoft Clarity 的外掛。

1. 在第三方平台安裝
不少人都採用 WordPress 等第三方平台架設網站。針對該些平台,Clarity 提供了便捷的安裝方式。以 WordPress 為例,Clarity 會指導用戶安裝 WordPress 外掛以導入 Clarity 功能。

2. 手動安裝
用戶亦可手動加入 HTML 碼。需要一段時間才可看到數據。

Microsoft Clarity 功能介紹
Microsoft Clarity 能夠提供各項資訊,包括流量來源、裝置類型、瀏覽器類型、訪客地區、作業系統等,不過這些資訊在 Google Analytics 也可看到。要是說 Microsoft Clarity 獨有的功能,就包括熱點圖、點擊分析。

1. 熱點圖
在 Microsoft Clarity,我們可以看到每個網頁的熱點圖。從中,我們可以更了解訪客的點擊行為,繼而改進網站設計。只要在 Microsoft Clarity 點擊「熱點圖」,就可以選擇顯示不同網頁的熱點圖。

2. 用戶流程錄影
除了熱點圖,我們更可以透過錄影詳細了解用戶與網頁的互動。只要點擊「錄製內容」,我們就可以了解各個用戶階段(Sessions)的使用情況,包括點擊和捲動方式。

3. 點擊分析
透過用戶流程錄影,我們更可以了解點擊情況。在 Microsoft Clarity,我們可以看到無回應點擊數(Dead Click)、 暴怒點擊(Rage Click),以及快速返回(Quick Back)的比例。

4. 其他數據
Microsoft Clarity 亦提供更他數據,包括流量來源、熱門頁面、用戶地點、用戶裝置資料等。這些數據在 Google Analytics 亦有提供。
別忘記這些實用設定!
Microsoft Clarity 固然提供不同的實用功能,但用戶亦要留意其他設定,使 Microsoft Clarity 能夠提供更完善的資訊。
1. 與 Google Analytics 整合
Google Analytics 與 Microsoft Clarity 各有千秋,透過互相整合,Microsoft Clarity 可呈視 Google Analytics 的資訊。若未有在新增專案時整合 Google Analytics,可在設定中整合。

登入 Google 帳戶後,允許 Microsoft Clarity 的權限便可。

之後,Microsoft Clarity 內會多了 Google Analytics 的標籤,會展示 Google Analytics 的數據。(不過中文翻譯仍需要改善)

2. 封鎖個人 IP 流量
用戶很多時會瀏覽自己的網站了解不同情況,為避 Microsoft Clarity 記錄這些活動而導致數據失真,用戶可封鎖個人的 IP 流量。移至設定、IP 封鎖,即可輸入要封鎖的 IP 位置。

3. 設置「內容深入解析」

有留意到儀表板上的「內容深入解析」一項嗎?這項資料能夠分析用戶閱讀文章的行為,例如用戶只閱讀一篇文章,還是閱讀多篇文章,從而判斷其投入程度。
除非使用 WordPress 外掛,否則用戶需手動加入額外的 HTML 碼至文章區段,Clarity 方能提供數據。如果沒有設置,就會如上圖般顯示為 0。
需要加入的 HTML 標籤為 data-clarity-region="article"
。範例如下,用戶可因應個人網頁的設計而加入至適當的位置之中:
<html> <head> <body> ... <article data-clarity-region="article"> 文章正文 </article> </body> </html>
舊版與新版 Microsoft Clarity 介面比較
Microsoft Clarity 更稱產品是「永遠免費」,但正如一開始所言,Microsoft Clarity 剛推出時只有英文界面,而現在不但擁有中文版,介面亦有所更新,相信產品短期內應不會終止運作。
1. 熱點圖

2. 錄製內容

3. 點擊分析

可見,Microsoft Clarity 功能上基本維持,但提供了中文界面,而且用色更為吸引。
總結:Google Analytics 的強大補充
一直以來 Google Analytics 都是網站管理員常用的分析工具,但 Google Analytics 亦有一些局限。此時 Microsoft Clarity 就是強大的補充,當中尤以熱點圖和點擊分析最為重要。透過這些數據,我們就能更了解用戶需要,改善網站的體驗。
Microsoft Clarity:官方網站