기타 로그 분석 툴

히트맵 로그 분석 툴 비교 및 기능

태인킴 2022. 5. 1. 19:58
반응형

히트맵 로그 분석 툴 비교 및 기능
히트맵 로그 분석 툴 비교 및 기능


블로그나 자사 쇼핑몰을 이용하면서 내 사이트를 이용하는 사용자들이 어디를 많이 클릭하고, 어디까지 스크롤을 내렸는지, 더 나아가서 사용자들이 사이트 내에서 어떻게 움직이는지 화면을 녹화한 내용을 볼 수 있다면, 운영하는 입장에서 얼마나 많은 인사이트를 얻을 수 있을까요? 오늘 소개할 내용은 이런 데이터를 얻을 수 있는 레코딩, 히트맵 로그 분석 툴입니다.  

마우스 호버 히트맵 예시
마우스 호버 히트맵 예시

 

 

1. 히트맵, 레코딩 웹 로그 분석 툴

히트맵, 레코딩 로그 분석 툴은 대표적으로 아래와 같이 있는데요. 아래 툴들의 기능은 대부분 비슷한데요. 대표적인 기능과 가격도 알아보죠.

  • 크레이지 에그 (Crazy Egg)
  • 핫자르 (Hotjar)
  • 마이크로소프트 Clarity

 

 

2. 대표적인 기능

  • 클릭 히트맵 : 클릭을 어느 구간에서 많이 했는지 시각적으로 파악
  • 스크롤 히트맵 : 어디까지 스크롤을 내렸는지 시각적으로 파악
  • 마우스 호버 히트맵 : 마우스를 어떻게 움직였는지 시각적으로 파악
  • 레코딩(세션 리플레이) : 사용자가 방문하여 어떻게 행동하는지 녹화된 영상

 

다른 툴과 달리, 핫자르(hotjar)는 서베이(survey), 피드백(feedback) 기능이 추가로 있어, 사용자가 이 콘텐츠가 마음에 들었는지 피드백 받을 수 있습니다. 그리고, 많이 클릭 되는 부분, 스크롤 뎁스는 물론, 구글 애널리틱스로도 확인할 수 있습니다. 하지만 구글 애널리틱스로는 시각적으로 파악할 수 없습니다. 숫자로만 파악할 수 있습니다. 예를 들어, 스크롤 52%까지 내렸다고 하면, 해당 부분에 어떤 콘텐츠가 있는지 같이 파악할 수 있어야 더 빨리 인사이트를 얻을 수 있겠죠? 그것이 히트맵(Heat Map)에 역할입니다. 시각적으로 데이터를 파악하는데 도움을 줍니다.

핫자르(hotjar) 마우스 호버맵
핫자르(hotjar) 마우스 호버맵

 

 

3. 가격 비교

그렇다면, 운영하는 입장에서 가장 중요한 것 중 하나가 가격이겠죠? 가격을 비교해 보면 다음과 같습니다.

 

  크레이지 에그 핫자르 마이크로소프트 Clarity
베이직 버전 - 30,000 페이지뷰/월
- 100 레코딩/월
- 무제한 A/B 테스트
- 3달 레코딩 저장기간
=> 30일간 무료, 24달러/월
- 35개 데일리 세션
- 히트맵 무료
- 1,050 세션/달
=> 무료
- 샘플링 없음
=> 모두 무료
스탠다드 버전 - 75,000 페이지뷰/월
- 500 레코딩/월
- 무제한 A/B 테스트
- 1년 레코딩 저장기간
=> 30일간 무료, 49달러/월
- 100개 데일리 세션
- 필터, 세그먼트
- 특정 액션 추적
- 3,000 세션/달
=> 14일간 무료, 35달러/월
- 샘플링 없음
=> 모두 무료
그 이상 버전 .. .. ..

마이크로소프트 Clarity 는 모두 무료입니다. 하지만, 무료인 이유는 데이터 마스킹을 통해서 개인정보를 보호하고, 익명 데이터를 마이크로소프트 회사의 머신러닝에 학습하기 위해서 사용할 것이라고 합니다. 실제로, 마이크로소프트 Clarity 홈페이지에 들어가 보면 GDPR, CCPA를 준비하고 있다고 합니다. 혹시나 하는 마음에 Clarity 로그 분석 툴은 조금 꺼려지긴 하는 구간입니다. 그래도 모든 기능 무료라는 건, 초반에 트래픽이 적은 경우 Clarity로 테스트 삼아 운영하다가, 유료 제품으로 넘어가도 좋을 거 같습니다.

Clarity의 GDPR, CCPA 정책
Clarity의 GDPR, CCPA 정책

 

※ GDPR 이란? EU(유럽연합)의 개인정보보호 법

※ CCPA 이란? 캘리포니아주 주민에게 다양한 권리를 부여하는 새로운 데이터 개인정보보호 법

 

 

4. 연결 방법

3가지 툴 모두, 연결 방법은 간단 합니다. 자신의 웹사이트 주소를 입력하고, 구글 태그 매니저가 설정이 되어있으신 분들은 클릭을 통해 구글 태그 매니저와 연결합니다. 혹시 구글 태그 매니저 컨테이너를 만들고, 웹 사이트와 연결하는 방법을 모르시는 분들은 이 글을 읽어 주세요. 태그 매니저까지 연결 하신 분들은 핫자르, Clarity에서 제공하는 스크립트 코드를 <head></head> 태그 사이에 넣어주시면 되겠습니다. 어렵지 않습니다. 혹시 잘 모르시는 분들은 댓글로 남겨주세요. 제가 도와드릴게요. 코드를 삽입했다면, 3시간 이상 기다려주세요. 데이터가 쌓인 후, 확인할 수 있습니다.

 

 

5. 이 기능들을 어떻게 사용하죠?

마우스 호버맵?

이 기능은 마우스 움직임을 시각적으로 파악하는데 유용한 기능입니다. 하지만, 우리가 알고 싶은 건, 마우스의 움직임이 아니라, 실제 사용자들에 시선입니다. 사용자들이 무엇을 읽고 있는지 파악하기 위해서, 마우스 호버 맵을 사용하지만, 이 둘의 상관관계는 높은편은 아닙니다. 실제로 마우스를 엉뚱한 곳에 두고, 글을 읽어내려가는 경우가 다반사 입니다. 따라서, 저는 마우스 호버맵을 많이 신뢰하지는 않습니다.

 

클릭 히트맵?

이 기능은 유효한 데이터라고 생각합니다. 우리가 클릭 히트맵을 통해 얻을 수 있는 인사이트는

  • 사용자가 많이 클릭하는 이미지나, 단어에 링크가 걸려 있지 않다면, 해당하는 곳에 링크를 걸어 줄 수 있습니다.

 

스크롤 히트맵?

이 기능은 사용자에 관심도를 파악하기에 좋습니다.   

  • 사용자가 어디서 많이 이탈하는지를 파악하여, 이탈 지점에 콘텐츠를 변경할 수 있습니다.
  • 또는 다른 페이지로 전환을 시킬 수 있는 포인트도 될 수 있죠.
  • 또는 스크롤 밑에 더 많은 콘텐츠가 있다는 사실을 모를 수도 있다는 신호 이기도 합니다.

 

세션 리플레이(레코딩)?

이 기능은 강력한 기능이라고 생각합니다. 내가 생각한 스토리 그대로 사용자들이 행동하는지 파악할 수도 있고, 사용자들이 입력란에 입력하는 데이터도 확인할 수 있습니다. 하지만, 많은 리플레이들을 확인하는데, 시간이 꽤 소요될 수 있습니다. 적은 표본에 데이터는 오히려 잘못된 방향으로 우리의 사이트를 수정할 수 있죠. 따라서, 충분히 많은 리플레이들을 확인하고 수정하는 것을 권합니다.

 

 

이 글이 도움이 되었다면, 좋아요를 눌러주세요. 주변에 이 정보가 필요한 사람이 있다면, 공유해주세요.

▶[구글 애널리틱스 사용법 7] UTM과 GA4 설정 방법? 

 

[구글 애널리틱스 사용법 7] UTM과 GA4 설정 방법

유니버셜 애널리틱스 서비스 중지 혹시, 최근에 유니버셜 애널리틱스에 들어갔는데, 이런 문구 보신 적 없으세요? 드디어, 그 날이 왔습니다. 유니버셜에게서 짐 싸들고 떠날 날이요! 2023년 7월

coding-food-court.tistory.com

▶[구글 데이터스튜디오 사용법 1] 데이터스튜디오란? 

 

[구글 데이터스튜디오 사용법 1] 구글 데이터스튜디오 란?

최근 넘쳐나는 데이터 속에서 유의미한 데이터를 찾고, 그 안에서 인사이트를 찾는 능력이 중요해졌습니다. 구글 데이터 스튜디오는 데이터를 시각화해주는 툴로써, 인사이트를 

coding-food-court.tistory.com

반응형