본문 바로가기
블로그 관리/티스토리 블로그 관리

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

by Kibua20 2021. 3. 11.

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에서만 지원하고 있습니다. 

Insight Dashboard 기능

 



Microsoft clarity 제공 기능: Recordings

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

Recordings 기능

 

 

Microsoft clarity 제공 기능: Heatmap

 

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

Heatmap기능

 

 

티스트로 블로그와 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> 사이에 붙여 넣기를 합니다. 

 

 

 

티스트로 블로그와 Microsoft Clarity 연동하는 방법; Java script code를 복사

 

티스트로 블로그와 Microsoft Clarity 연동하는 방법; Java script code를  웹 사이트의 Html에 추가

 

 

관련 글

[블로그 관리/티스토리 블로그 관리] - 티스토리 블로그를 Google News에 등록하는 방법

[블로그 관리/티스토리 블로그 관리] - 티스토리 블로그에서 구글 서치 콘솔 CLS(0.25 초과)문제 해결법

[블로그 관리/티스토리 블로그 관리] - 티스토리 블로그 글을 구글 디스커버에 노출시키는 방법

[블로그 관리/티스토리 블로그 관리] - 파이썬 Selenium을 활용한 네이버 서치어드바이저 URL 입력 '자동화'

[블로그 관리/티스토리 블로그 관리] - 초보자를 위한 티스토리 블로그 애드센스 광고 설정 방법

[블로그 관리/티스토리 블로그 관리] - Adsense 승인 후 블로그 유입량 및 수익 분석 - 한달 100$ 수입 인증

[블로그 관리/티스토리 블로그 관리] - 티스토리에서 테이블 편집 방법: 가로, 세로, 외곽선, 복잡한 테이블 만들기

[블로그 관리/티스토리 블로그 관리] - 파이썬 Selenium을 활용한 블서치 백링크 등록 '자동화'

[블로그 관리/티스토리 블로그 관리] - 티스토리 검색 기능이 제목을 가리는 문제 해결 방법 (티스토리 검색 기능 삭제)

[블로그 관리/티스토리 블로그 관리] - 티스토리 블로그 초보를 위한 대표 이미지 안 잘리게 만들기

[블로그 관리/티스토리 블로그 관리] - 티스토리 블로그 메뉴 추가하기

[블로그 관리/모바일 마케팅] - [용어 정리 #7] CPC, CTR, CPM, RPM에 대한 설명

[블로그 관리/모바일 마케팅] - [용어정리 #6] 백링크 / 역링크

[블로그 관리/모바일 마케팅] - [용어 정리 #4] Android Install Referrer API

[블로그 관리/모바일 마케팅] - [용어 정리 #4] Android Install Referrer API

[블로그 관리/모바일 마케팅] - [용어 정리 #3] Deep link / App link

 




댓글