개발자가 안깔아줘서 직접 깔아보는 히트맵...🔥 Clarity

안녕하세요?... 오랜만에 돌아온 당근입니다.

요즘 회사에서 고여가고 있어요. ^^ 대 AI 물결에, 블로그도 한참 소홀했네요.

이 블로그는 정보 공유용이기도 하지만, 제 기록용이기도한데 말이죠.

 

올해 초에 데이터 기반 사용성 개선 이슈가 우리 팀 KPI로 대두되어서, 내이티브 앱 개발자께 Clarity 사용을 권해봤어요.

기획자이자 PM님께도 승인받은 건이었고요.

근데 운영, 개선 프로젝트에 밀려 1/4분기가 지나도록 감감무소식 🥹

 

요즘 히트맵 정도의 지표는 신입 디자이너들도 정량적 근거로 쓰는데 디자인 화면만 200장이 넘는 꽤 큰(?) 우리 서비스에서, 히트맵도 못본다는게 너무 답답합니다.

 

그래서 웹에 직접 ! 심어보기로 하였어요 호호

최근 신규로 웹 개발건 들어갈 것도 있어서 이번엔 웹개발자를 꼬셔보려고요. 

 

MS Clarity 설치... 웹에는 그냥 어이가 없게 쉽습니다.

Clarity 사이트에 접속, 로그인하세요.

https://clarity.microsoft.com/

Microsoft Clarity - Free Heatmaps & Session Recordings

 

새프로젝트 추가

새프로젝트 추가에 그냥 이름, 사이트 url 선택!

clarity 설치

 

GTM도 깔려있지만, 그냥 꼬일까봐 무서우니까 수동으로 설치해볼게요.

너무 간단해보여서 벌써부터 불안하다....

코드 설치

 

GA, GTM,,, 설치했던 것처럼 그냥 냅다 해더에 넣으면 돼요.

clarity 설치

이렇게 설치하고...

설치완료

생성된 카드를 눌러서 들어가면!

clarity 설치

오 거의 다 되었대요.

아직 대시보드는 비활성화 상태이지만 12명의 사용자가 온라인??? 라이브로 접속한 사용자들의 실시간 움직임은 바로 볼 수 있네요.

 

1. 레코딩(라이브 모드)

clarity 라이브

피그마 누끼 따는... 게시글을 보고 계시는군요. 

근데 Remove BG 부분을 보시더니 이탈하셨어요. 

펜툴로 따는 부분은 자세히 보시고 가셔서 다행이랄까^_^ㅋㅋ 상당히 재미있네요

블로그 다시 열심히 해볼까요???

 

 

 

 

2. 대시보드

첫레코딩이 9:51분에 시작되었으니 그걸 기준으로 2시간 후쯤 들어가보려고 했는데, 이것저것 구경하다보니

1시간이 채 되지않아 대시보드가 활성화 되었어요!

clarity 설치 완료

 

3. 열지도(히트맵) <-- 드디어!🔥

클릭이나 인터랙션이 많이 일어나지 않는 블로그라서 히트맵 자체는 별 의미가 없지만, 스크롤 뎁스같은 데이터 구경하고, 클래리티가 어떤 기능을 제공하는지 둘러보는데는 꽤 의미가 있을 것 같아요.

히트맵

하지만 그냥 블로그 글에서도

움직이는 짤 들어간 부분만 주의깊게 보고 나머지는 스크롤로 지나갔다는것 정도는... 볼 수 있습니다!

 

와 ai로 인사이트도 알려줘...너무 좋은 세상...

아직까지 클래리티 UI 자체가 익숙하지 않은 저에게는 넘 꿀같은 기능이네요.

클래리티 ai 히트맵 인사이트

요즘 클래리티 사용자가 늘어나는 추세라는데, 더 늦기전에 저희 서비스에도 적용해보면 좋겠습니다.

 

또 알게되는 것이 있으면 또 공유해볼게요. 

당근이었습니다.