Google Analystic 最強輔助?三分鐘設定最直覺的網站熱點分析工具 Microsoft Clarity

Microsoft Clarity 將使用者的焦點,視覺化的呈現在網站頁面上,紀錄到訪用戶滑鼠移動跟點擊位置,並用不同顏色標示出最容易吸引用戶目光及點擊的內容

Google Analystic 最強輔助?三分鐘設定最直覺的網站熱點分析工具 Microsoft Clarity

Microsoft Clarity 是一款網站的監測分析工具。監測網站的工具已經很多,這個有什麼特別嗎?

Microsoft Clarity 將使用者的焦點,視覺化的呈現在網站頁面上,紀錄到訪用戶滑鼠移動跟點擊位置,並用不同顏色標示出最容易吸引用戶目光及點擊的內容

以下翻譯自 Microsoft Clarity is now Generally Available  :

Microsoft Clarity 是一款免費使用的分析產品,旨在通過更好地了解網站訪問者的行為來幫助網站管理員改善他們的網站體驗。 熱點圖提供了一種檢查大量用戶交互的可視化方式,它們有兩種形式:點擊圖和滾動圖。

這兩種視圖都將大量數據打包成一個可操作且易於理解的報告。 點擊圖告訴您頁面上的哪些內容對您的用戶很重要,而滾動圖則顯示您的用戶是否看到了重要的內容。 熱點圖的聚合性質可幫助您限定用戶行為和趨勢,它們可以輕鬆地向利益相關者傳達影響,並為設計決策提供數據驅動的理由。

如果你已經在網站上設定好 Google Tag Manager,那相信串接這個軟體對你來說只要 3 分鐘以內就能完全搞定

建立專案

輸入名稱、欲追蹤網站的網址、選擇內容類型

Add New Project

連結 GA 帳戶進行數據追蹤

此處提供兩種方法,直接字對連結 GTM 帳戶,或是手動在 GTM 安裝程式碼同步至網站上進行追蹤

兩種方法我都試過,自動連結 GTM 帳戶真的太方便了,不用猶豫直接選第一種跟著操作吧

前往 Clarity Setting 頁面,左邊的列表選 “Setup” ,再選擇 Google Tag Manager,接者就會跳出 Google 帳戶登入畫面

登入 Google 帳戶並完成驗證步驟,Clarity 會要求存取以下權限,為了順利部署並發布 GTM,勾選全部選項

連結成功後,會跳出 GTM 的控制面板,要求你選擇連結的帳戶

選擇容器內容 ( 你網站所安裝的 GTM )

注意:如過你帳戶還沒有安裝或設定 GTM 的話這邊是不會顯示選項的,記得先設置好 Google Tag Manager

成功設置完成,等待兩小時 Microsoft Clarity 同步數據


官方設置教學參考:

Microsoft Clarity - Free Heatmaps & Session Recordings
Clarity is a free user behavior analytics tool that helps you understand how users are interacting with your website through session replays and heatmaps.
-
Google Tag Manager: A Simple Tutorial
Learn how to set up a Google Tag Manager account, how to create a new tag, how to use Google Tag Manager with your Google Analytics account, and how to embed the tool in WordPress.

推薦教學文章:

這篇是中文可搜尋到的最豐富內容,不只告訴你如何設定,甚至詳解每個指標、數據背後的計算方式邏輯,讓你更有方向的知道觀察哪個數據

用 Microsoft Clarity 網站分析工具,觀察使用者行為 - Front-End - Let’s Write
本篇大綱:本篇要解決的問題。安裝 Clarity。Scroll depth 捲動深度。Dead clicks 無回應點擊。Rage clicks 憤怒點擊。JavaScript errors。Quick backs 過快點擊回上頁。基本數據。Recordings。Heatmaps。