主頁> SEO >不要只懂 GA 了,你知道 Microsoft Clarity 可分析網站熱點圖嗎?!
Microsoft Clarity

不要只懂 GA 了,你知道 Microsoft Clarity 可分析網站熱點圖嗎?!

留言
分享文章:

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 可以使用 Google、Facebook 或 Microsoft 帳戶來登入

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

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

確認 Microsoft Clarity 所需電郵

第二步:新增項目

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

在 Microsoft Clarity 新增專案
在 Microsoft Clarity 輸入網站的名稱和 URL 以新增專案

第三步:加入 HTML 碼

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

1. 在第三方平台安裝

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

Microsoft Clarity 提供多種第三方平台安裝的方式

2. 手動安裝

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

Microsoft Clarity 的程式碼

Microsoft Clarity 功能介紹

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

Microsoft Clarity 儀標版

1. 熱點圖

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

Microsoft Clarity 的「熱點圖」,顯示不同網頁的點擊分布

2. 用戶流程錄影

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

Microsoft Clarity 的錄製內容

3. 點擊分析

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

在 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,可在設定中整合。

在 Microsoft Clarity 的設定中選擇與 Google Analytics 整合

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

容許 Microsoft Clarity 存取 Google 帳戶

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

Microsoft Clarity 顯示 Google Analytics 的資訊

2. 封鎖個人 IP 流量

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

在 Microsoft Clarity 輸入要封鎖的 IP 位置。

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

Clarity 「內容深入解析」資料卡

有留意到儀表板上的「內容深入解析」一項嗎?這項資料能夠分析用戶閱讀文章的行為,例如用戶只閱讀一篇文章,還是閱讀多篇文章,從而判斷其投入程度。

除非使用 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. 熱點圖

舊版 Microsoft Clarity 熱點圖

2. 錄製內容

舊版 Microsoft Clarity 錄製內容

3. 點擊分析

舊版 Microsoft Clarity 點擊分析

可見,Microsoft Clarity 功能上基本維持,但提供了中文界面,而且用色更為吸引。

總結:Google Analytics 的強大補充

一直以來 Google Analytics 都是網站管理員常用的分析工具,但 Google Analytics 亦有一些局限。此時 Microsoft Clarity 就是強大的補充,當中尤以熱點圖和點擊分析最為重要。透過這些數據,我們就能更了解用戶需要,改善網站的體驗。

Microsoft Clarity:官方網站

尋找線上學習平台:
Udemyhahow六角學院Coursera

馬上領取Hahow好學校 9 折優惠

去看個書,好不好?

GA4全方位攻略:掌握行銷科技與數據營運的成功指南

書名:GA4全方位攻略:掌握行銷科技與數據營運的成功指南

作者:陳展儀

簡介:本書以透過數據分析的架構與邏輯,幫助大家從 Universal Analytics 接軌到 Google Analytics 4;讓 Google Analytics 4 不僅僅只是網站/APP分析的工具,更能成為大家在日常工作中的好夥伴,讓 Google Analytics 4 與各式行銷工具擁有整合的能力,以達成自動化行銷的目的,並有效的提升大家的工作效率。

立即購買:博客來金石堂

Hahow 線上課程

不小心就學會!用 UI 設計方法製作網站

課程名稱:不小心就學會!用 UI 設計方法製作網站

UI UX 網頁設計入門課程,學習完整的前端設計、網頁設計課程,掌握程式碼管理、設計切版、專案設計開發流程等要點,透過實際案例的剖析,讓你清楚掌握 UI/UX 領域的思考方式。

獲取線上課程:Hahow 好學校

從入門到業界實戰 - UI / UX 前端網頁設計

課程名稱:從入門到業界實戰 – UI / UX 前端網頁設計

UI UX 網頁設計入門課程,學習完整的前端設計、網頁設計課程,掌握程式碼管理、設計切版、專案設計開發流程等要點,透過實際案例的剖析,讓你清楚掌握 UI/UX 領域的思考方式。

獲取線上課程:Hahow 好學校

訪客留言