brunch
매거진 UX 리서치

GA4와 MS Clarity 어떻게 시작할까?

GA4와 MS Clarity 연동한 무료 히트맵으로 사용자 행동 분석하기

by spring
Feb 24. 2025

UX/UI ∙ 프로덕트 디자이너가 웹 ∙ 앱 데이터 분석에 활용할 수 있는 무료 히트맵 데이터 분석 툴 'MS 클레어리티'(MS Clarity)를 소개합니다. GA4 무료 강의, MS Clarity 가이드 자료 모음을 공유합니다.



MS 클레어리티란?

- Microsoft에서 개발한 클레어리티(Microsoft Clarity)

- 앱 ∙ 웹사이트 방문자의 행동을 분석하여 사용자 경험을 개선하는 무료 웹 분석 도구

- 구글 애널리틱스, 엠플리튜드 등 솔루션과 함께 보조로 사용



왜 GA4와 Clarity 함께 써야 할까?

함께 쓰면 더 깊이 있는 UX/UI 분석이 가능함


GA4

- 기능: 방문자 수, 전환율, 유입 경로 분석

- 단점: 사용자의 실제 행동을 알기 어려움


Clarity

- 기능: 히트맵, 세션 리플레이, 사용자 행동 데이터 시각화

- 단점: 전체 트래픽과 전환 데이터를 분석하기 어려움





MS Clarity – 무료 히트맵 솔루션

- 클릭, 스크롤, 마우스 이동 데이터 자동 분석
- 사용자 세션 녹화(세션 리플레이) 제공
- "배달 못한 클릭(Dead Click)" & "빠른 뒤로 가기" 데이터 추적
- GA4와 함께 사용하면 UX/UI 문제점 파악 최적화
- 무료 사용 가능 (Hotjar 대체 가능)

- Dead Click: 링크가 있는 줄 알고 잘못 발생한 클릭


추천 활용법

- GA4에서 이탈률이 높은 페이지 찾기

- Clarity에서 사용자의 실제 행동 패턴을 확인하여 UX 개선


출처: Clarity 라이브 데모보기





설치 방법: 3분 만에 끝내기

① Clarity 접속

- clarity.microsoft.com 무료 가입


② 추적 코드 삽입

- HTML 태그에 코드 추가

- 또는 Google Tag Manager(GTM) 사용하여 설치


③ 데이터 수집 시작

- 설치 후 몇 분 내로 실시간 분석 가능





GA4 + Clarity 연동 효과

- GA4에서 사용자 흐름 분석 → Clarity에서 구체적인 행동 확인
- GA4에서 전환이 낮은 페이지 찾기 → Clarity에서 왜 그런지 시각적으로 분석
- UX 문제를 데이터 기반으로 개선 가능





GA4 & Clarity 활용법 더 보기



GA4 강의 모음


젤리피쉬(Jellyfish) 한국 지사 유튜브

- 매월 진행하는 GA4 웨비나 다시 보기 영상 유튜브 채널

- 구글 마케팅 플랫폼 공식 세일즈 파트너

Jellyfish KR

구글 마케팅 플랫폼 공식 세일즈 파트너 젤리피쉬(Jellyfish) 한국 지사 유투브입니다. 매월 진행하는 GA4 웨비나 다시보기 영상을 유투브 채널을 통해 제공합니다.

https://www.youtube.com/channel/UC_oRsYiXZSJyyh7QU_Sqaaw

 


구글 애널리틱스 4 (무료, 유튜브 강의)

구글 애널리틱스 4

http://www.youtube.com/playlist?list=PLnMXC2U_njLbXx5kXPvY_U0LvLpIX0c_V

 


GA4 무료 강의 | DIGIOCEAN GA4

- GA4의 중요 개념, GA4 vs UA의 주요 차이점

GA4 무료 강의

비개발자, 마케터를 위한 GA4 미니코스

https://www.digiocean.co.kr/p/ga4-mini-free

 


[Google Analytics 4] 구글 애널리틱스 4 무료 강의

[Google Analytics 4] 구글 애널리틱스 4 무료 강의

구글 애널리틱스 4와 구글 태그매니저를 활용하여 웹 페이지 데이터를 수집하고 분석하는 내용의 [구글 애널리틱스 4 시작하기] 무료 강의페이지입니다. Google Analytics 4, Google Tag Manager, Google Market

https://dachata.com/class/google-analytics-4/

 


GA4 사용자를 위한 무료 빅쿼리 교육 강의 추천 영상

GA4 사용자를 위한 무료 빅쿼리 교육 강의 추천 영상

GA4를 많이 쓰기 시작하면 필연적으로 빅쿼리에 대한 필요성을 느끼게 됩니다. (아닌 분들도 많습니다만...

https://blog.naver.com/qstrike/223427684071

 


[하루 10분|GA] Google Analytics(GA) 보고서 살펴보기 (무료 강의)

- 강사: 판다코딩

- 수업: 영상 수 총 14개 (1시간 38분)

[지금 무료][하루 10분|GA] Google Analytics(GA) 보고서 살펴보기 강의 | 판다코딩 - 인프런

판다코딩 | , 하루 10분으로 배우는, Google Analytics GA란 무엇인가? [임베딩 영상] 1. 강좌 소개 웹사이트 성장(Growth)을 해킹(Hacking)하기 위해 필수적인 데이터 수집 툴인, GA! Google Analytics의 데

https://www.inflearn.com/course/%ED%95%98%EB%A3%A8-10%EB%B6%84-%EA%B5%AC%EA%B8%80-%EC%95%A0%EB%84%90%EB%A6%AC%ED%8B%B1%EC%8A%A4

 


마케팅 요약 (유튜브)

- GA4 관련 Shorts 영상

마케팅요약

알면 요약할 수 있습니다 #GA4 #루커스튜디오 #구글시트

https://www.youtube.com/channel/UCm0YOSdSVs5HkKSHzwWyePA

 


인프런 GA4 (유료 강의)

- 강사: GA4 Guide

- 수업: 영상 수 총 145개 (24시간)

실무자를 위한 구글애널리틱스(GA4+GTM) 활용법(24년 Update) 강의 | GA4 Guide - 인프런

GA4 Guide | , 실무와 제일 가까운 GA4 강의!앞으로의 GA 관련 업무 걱정을 제로로 만들어드려요.'수강평'에서 기존 수강생들의 리뷰를 먼저 확인해보세요!매주 토요일 오전에 진행되는 GA4 무료 웨비

https://www.inflearn.com/course/%EC%8B%A4%EB%AC%B4%EC%9E%90-ga4-%ED%99%9C%EC%9A%A9%EB%B2%95

 


GA 관련 참고 블로그

GA4 '전환'의 이름이 '주요 이벤트'로 변경되었습니다.

이제까지 GA에서 '전환', '전환수'라는 용어를 계속 사용해왔는데 '전환'...

https://blog.naver.com/qstrike/223395756654

 
구글태그매니저로 GA4 설치하기(Google 태그 사용 버전)

얼마 전(?)에 구글태그매니저에서 GA4 구성(기본)태그가 사라지고 Google 태그로 대체되면서 약간의 혼...

https://blog.naver.com/qstrike/223391827394

 



GA4 사전 준비 영상


GA4 계정 만들기



Cafe24 쇼핑몰 가입




GTM(구글태그매니저) 계정 만들기



구글 데이터스튜디오

- 구글스프레드시트 활용 대시보드 만들기 실습



- 출처 및 강사님: 데이터분석을 위한 구글애널리틱스 GA4





Clarity 가이드 모음


MS 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.

https://clarity.microsoft.com

 


MS 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.

https://clarity.microsoft.com

 


MS Clarity 공식 가이드

Microsoft Clarity documentation

Learn how to use Clarity, a behavioral analysis tool that helps you understand user experience, to make your website work better.

https://learn.microsoft.com/en-us/clarity/

 


MS Clarity 공식 가이드

- 구글 애널리틱스 연동 가이드

Getting started with GA Integration

Describes the step-by-step process of integrating Google Analytics in Clarity.

https://learn.microsoft.com/en-us/clarity/ga-integration/ga-integration

 


MS Clarity 공식 블로그

Understand your customers | Microsoft Clarity Blog - Find articles, best practices, and solutions to improve user experience

Find articles, best practices, and solutions to improve user experience

https://clarity.microsoft.com/blog/

 


모바일 앱에서 Clarity를 사용하는 방법

- 앱에 설치할 경우, SDK 설치 시 개발자 협업 필요

Clarity for Mobile Apps

Learn how to use Clarity for Mobile Apps.

https://learn.microsoft.com/en-us/clarity/mobile-sdk/

 



MS Clarity 소개 아티클

히트맵 분석의 끝판왕, MS Clarity

구글 애널리틱스와 함께 사용하면 더 많은 인사이트를 얻을 수 있어요 :) | 히트맵 분석(Heatmap Analysis)은 방문자의 데이터를 화면에 시각적으로 표현해서 사용자가 웹사이트나 앱에서 어떻게 행

https://brunch.co.kr/@kayros/243

 


MS Clarity 주요 기능 소개한 글

유저는 언제 나갔을까요? - Microsoft Clarity

유저 행동을 분석할 수 있는 Microsoft Clarity의 주요 기능을 소개하는 글입니다.

https://velog.io/@wns450/유저는-언제-나갔을까요Clarity

 


티스토리 블로그를 Microsoft clarity와 연동: Dashboard, Recordings, Heatmap 분석 지원

티스토리 블로그를 Microsoft clarity와 연동: Dashboard, Recordings, Heatmap 분석 지원

Microsoft Clarity는 Microsoft에서 제공하는 웹 사이트 분석 tool로 웹 사이트에 대한 1) Insight Dash Board, 2) Recordings, 3) Heat map기능을 지원합니다. Microsoft에서 무료로 지원하며, 트래픽 제한도 없습니다. Goo

https://kibua20.tistory.com/175

 



Microsoft Clarity 기본 기능 살펴보기

- 출처: 데이터분석을 위한 구글애널리틱스 GA4 강사님



Microsoft Clarity 사용 가이드

- 출처: Installation of Microsoft Clarity - Microsoft Clarity Series)


keyword
spring 직업 디자이너 프로필

프로덕트 디자이너, 학습하고 공유하기를 좋아합니다.

구독자 194
매거진의 이전글심층 인터뷰로 근원 찾기