들어가며
바야흐로 빅데이터의 시대에 살고 있는 우리들은 유저님들의 행동 하나하나에 의미를 담아 판단하고 또 개발해야합니다.
그런데 쉬우면서도 어려운 것이 바로 리뷰를 받는 것입니다.
배달앱에서는 서비스를 줘 가면서 리뷰전쟁을 하고 있는데, 우리는 서비스 음식을 주는대신 우리의 서비스(프로덕트)가 가치있음을 내세우고 리뷰를 받기를 원합니다.
그러니 더더욱 힘들고 안해줍니다.
오늘 소개해드린 hotjar는 이러한 어려움을 조금 쉽게 해결하고자 하는 툴이며, 간단하지만 강력하고 직관적은 기능을 제공하고 있습니다.
우리에게 익숙하게 알려진 유저 행동 추적 도구는 Google Analytics(이하 GA)입니다.
홈페이지 head에 코드만 넣어두면 알아서 정보를 뽑아다가 깔끔하게 시각화를 해줍니다.
이와 비슷하게 Hotjar도 head에 코드만 넣고 설정만 해주면 설정내용을 바탕으로 유저의 행동을 하나씩 수집해가며 우리에게 엄청난 인사이트를 제공하는 그런 툴입니다.
평소에는 GA만 사용해도 충분했습니다. 유저의 행동을 수집하기보다는 얼마나 많이 들어왔냐가 중점인 블로그인 이상 GA가 충분했는데 실제 웹서비스 형태의 제품을 만들다 보니 세분화된 유저 정보를 수집할 필요가 있었습니다.
그런 와중에 PM은 Hotjar를 선구매하여 적용하길 원하고 있었습니다.
그래서 본 서비스에 적용하기 전에 개인 사이트에 먼저 적용하고 테스트해보기 위해 hotjar를 react(+next)에 도입하는 방법부터 제공하는 기능 4종에 대해 하나씩 살펴보도록 하겠습니다.
HotJar
HotJar?? 그래서 이게 뭔데??
간단히 유저의 행동을 추적해주는 도구입니다.
제공하는 기능은 총 4가지가 있습니다.
- 수동적이고 설정이 필요없는 Observe 기능 2개 | Heatmaps, Recordings
- 적극적이고 설정이 필요한 Ask 기능 2개 | Feedback, Surveys
그리고 이러한 결과를 자체 대시보드 뿐만 아니라 다양한 툴로 전달까지 해주는 전천후 트래킹 도구입니다.
벌써 인트로페이지만 봤는데 너무 설레네요. 이제 한번 홈페이지에 적용하러 가보시죠.
설치 및 적용
바로 적용하는 방법부터 들어가겠습니다.
Where do you want to install Hotjar?
그리고 적용하고 하는 링크를 입력하고 기다리게 되면
입력한 링크에 대한 확인, Google Tag Manger(이하 GTM)이 적용되어 있나 확인하고 해당하는 사이트에 맞는 unique code를 만들어줍니다. (사용성 실화냐??)
Choose an installation method
그리고 GTM처럼 넣을 수 잇는 방법을 여러개 제시해줍니다.
그 중에 저는 Install code manually로 적용을 해보겠습니다.
Install code manually
코드를 살펴보면 GTM과 거의 다를바가 없습니다. 그리고 귀엽게도 각각의 파라미터가 hotjar로 되어있네요 ㅋㅋ
다시 코드로 돌아가서
다시 배포하고 verify installlation를 클릭하고 확인하면 완료입니다.
이제 시간을 기다리면 유저의 행동이 tracking이 될겁니다.
유저 반응 확인
시간이 지나고 다음날 다시 hotjar 대시보드로 찾아갔더니 유저가 트래킹된것을 확인할 수 있습니다.
Recordings
이건 특정 유저의 행동을 영상으로 저장해주는 것입니다.
gif를 보면 유저의 화면을 트래킹하고 있는 것을 확인할 수 있습니다. 또한 마우스 이벤트에 따라 빨간색 줄을 어떤 방향으로 움직였는지도 알려줍니다.
Heatmaps
다음으로는 히트맵입니다. 지정된 페이지에서 유저가 어떤 곳을 많이 클릭했는지 또는 머물렀는지에 대해 표시해줍니다.
저의 경우에는 상단의 nav바 영역을 많이 클릭했네요.
이렇게 어떤 것을 많이 클릭했는지에 대해 확인함으로써 전환율에 대해 고민하게 되고 접근성에 신경쓰게 만들어주는 신통방통한 툴입니다.
Feedback
다음 기능은 feedback입니다. 뒤에 나올 survey와 비슷하지만 뭔가 더 간편한 star rating 느낌으로 다가옵니다.
글로 된 survey보다 직관적이고 간편하며 또한 눈에 더 잘 들어옵니다.
Surveys
다음 기능은 Surveys입니다. 이건 뭘까 궁금했는데, 명칭 그대로 유저 조사를 해주는 기능입니다.
아래와 같이 각각의 조건에 따라 설정을 하게 되고 status를 on하게 되면
타켓 홈페이지에 들어갔을때 설정한 location에 hotjar의 survey 창이 뜹니다.
그리고 이를 정리하여 깔끔하고 이쁘게 모아줍니다.
마무리
이렇게 Hotjar의 적용부터 기본 기능 4가지에 대해 살펴보았습니다.
새롭게 계정가입을 하게 되면 15일 무료를 주니 한번 사용해보고 기능이 더욱 매력적이라면 계속 사용해봄직한 라이브러리였습니다.
회사에서는 이걸 구매했다고 하니 저는 이걸 프로젝트에 좀 더 녹여서 몇달동안 사용해보고 다시 후기를 업데이트해보도록 하겠습니다.
끝.
댓글