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

Microsoft Clarity는 Microsoft에서 제공하는 웹 사이트 분석 tool로 웹 사이트에 대한 1) Insight Dash Board, 2) Recordings, 3) Heat map기능을 지원합니다. Microsoft에서 무료로 지원하며, 트래픽 제한도 없습니다. Google Analytics (GA) 제공하는 기능과 유사하나 GA 보다는 직관적으로 데이터를 이해하기 쉽습니다.

Insight Dashboard : 웹 사이트 방문한 사용자 행동에 대한 통계 제공
- Dead Click: 사용자가 클릭했지만 웹 페이지 반응이 없는 비율
- Rage Click: 좁은 영역을 반복 클릭한 비율
- Excessive Scrolling : 원하는 자료를 찾기 위해서 1 Page 이상 scroll 하는 비율
- Quick Backs: 웹 페이지를 방문하자마자 바로 이전 페이지로 돌아간 경우
- Popular Page: 방문자가 많은 웹 페이지
- Referrers: 웹 페이지 방문 경로 (웹 페이지를 접근 시 이전에 Link를 제공한 웹 사이트)
- 기타 Broswers, Devices 종류, OS 종류 등
Recordings: 사용자가 방문한 페이지의 동작을 동영상으로 기록하여 재생 가능함
Heatmap: 웹 페이지에서 사용자가 클릭한 비율을 시각화하여 보여줌

※ MS Clarity 기능을 글로 보는 것보다는 Demo Page와 아래 동영상을 직접 확인하는 것이 더욱 이해하기 쉽습니다.

출처: www.youtube.com/watch?v=LlVi1RtYo6w

Microsoft clarity 제공 기능: Insight Dashboard

자신의 Web page 아래에서 설명하는 Java script code를 반영하고 2~3일 지나면 아래와 각종 통계를 보여줍니다. Google Analytics와도 중복해서 보여주는 통계 값도 있지만, Dead click, Quick back, Excessivce scrolling 은 MS Clairity에서만 지원하고 있습니다.

Microsoft clarity 제공 기능: Recordings

사용자가 웹 페이지의 행동을 동영상으로 재생할 수 있습니다. 웹 페이지는 내용은 간략화해서 일부 그림과 텍스트는 생략되고, 사용자의 마우스 클릭 및 Move 동작을 화살표로 표시해줍니다.

Microsoft clarity 제공 기능: Heatmap

Heatmap은 상당히 잘 만든 기능으로 보입니다. 사용자가 클릭 또는 스크롤의 빈도를 컬러로 전환하여 빈도를 한눈에 알 수 있습니다. PC, Tablet, Mobile 페이지 각각 확인할 수 있으며, 사용자의 Click 및 scroll을 확인할 수 있습니다.

티스트로 블로그와 Microsoft Clarity 연동하는 방법

Microsoft Clarity를 사용하기 위해서는 Microsoft Bing의 Web master 도구에 로그인이 가능해야 합니다. Google Search Console의 ID가 있다면 Google ID로 로그인을 지원하기 때문에 클릭 몇 번으로 쉽게 로그인할 수 있습니다. MS Clarity 또한 Google 계정으로 로그인이 지원하여 쉽게 로그인 가능합니다.

MS Clairity에 로그인을 완료한 상태에서 Settings → Setup → Copy to Clipboard로 Java script code를 복사합니다. (상세 설명은 링크를 참조하세요.) 복사한 Java script code를 티스토리 Skin의 Html을 열어 <head>와 <//head> 사이에 붙여 넣기를 합니다.