프로젝트에 Hotjar 도입하기

Tech
2023-01-17

Hotjar 소개

Hotjar는 유저를 이해하는 데 도움이 되는 행동 분석 데이터를 제공하는 툴입니다.
대표적으로 Recording, Heatmap과 같은 기능을 제공합니다.

  • Recording : 유저의 행동(마우스 커서 움직임, 스크롤 등) 녹화

  • Heatmap : 유저가 웹 사이트의 어느 부분을 주로 클릭하는지 시각화

도입 배경

기술 스택으로 Next.js와 TypeScript를 사용한 딜리버블이라는 프로젝트에 프론트엔드 개발자로 참여했습니다.
유저 행동을 분석해 보자는 PM의 제안으로 Hotjar를 도입하게 되었습니다.

도입 방법


1. 팀 구글 계정으로 hotjar.com 가입하고 코드 받기

캡처한 이미지에서 가려둔 hjid, hjsv 값만 알면 됩니다.

  • hjid : 'Hotjar ID'입니다. 불러와야 하는 사이트 설정과 수집된 데이터를 저장할 위치를 Hotjar에 알려주기 위한 용도입니다.
  • hjsv : 'Hotjar Snippet Version'입니다. 사용 중인 tracking code의 버전을 말합니다. Hotjar에서 tracking code를 업데이트해서 이전 tracking code를 중단하는 경우에만 필요하다고 합니다.

2. react-hotjar 설치

🔗 react-hotjar github repository

Hotjar는 react-hotjar 라이브러리의 도움을 받아 쉽게 도입할 수 있었습니다.

yarn add react-hotjar
 
혹은
 
npm i react-hotjar

3. 구동 환경 체크용 환경 변수 세팅

개발 환경에서는 유저 행동을 분석할 필요가 없습니다. 배포 환경에서만 유저 행동을 분석할 수 있도록 구동 환경을 체크하는 환경 변수가 필요합니다. 환경 변수를 사용하기 위해서는 루트 디렉터리(최상위 디렉터리)에 .env.development, .env.production 파일을 생성해야 합니다.

.env.development에는 NEXT_PUBLIC_NODE_ENV=development를, .env.production에는 NEXT_PUBLIC_NODE_ENV=production을 작성해 주시면 됩니다. 그럼 구동 환경에 알맞은 파일이 적용됩니다. 앞서 언급한 .env 파일들에 대한 자세한 설명은 이 글을 참고하시면 좋을 것 같습니다.

4. _app.tsx 수정

// 아래 import 구문 2개 추가
import { hotjar } from 'react-hotjar';
import { HJID, HJSV } from '@src/utils/constant';
 
function MyApp({ Component, pageProps }: AppProps) {
  const [queryClient] = useState(() => new QueryClient());
 
  // 아래 useEffect 추가
  useEffect(() => {
    if (process.env.NODE_ENV !== 'development') {
      hotjar.initialize(HJID, HJSV);
    }
  }, []);
 
  return (
    <QueryClientProvider client={queryClient}>
      <RecoilRoot>
        <GlobalStyle />
        <Component {...pageProps} />
      </RecoilRoot>
    </QueryClientProvider>
  );
}
 
export default MyApp;

Hotjar 도입과 관련 없는 import 구문은 생략했습니다. 1번 단계에서 얻은 hjid, hjsv 값은 _app.tsx의 HJID와 HJSV 자리에 쓰입니다. constant.ts 파일에 상수를 선언해 가져왔기 때문에 import { HJID, HJSV } from '@src/utils/constant';가 추가되었습니다.

처음 렌더링 될 때 process.env.NODE_ENV를 통해 개발 환경인지 아닌지 확인합니다. if문에서 확인을 거친 뒤, 개발 환경이 아닐 때 initialize 할 수 있도록 작성했습니다.

실제로 도입한 모습

직접 개발한 SelectBox 주변이 알록달록한 모습을 보며 개발자로서 뿌듯함을 느낄 수 있었습니다. 하지만 로그인한 유저에게만 제공되는 기능은 상대적으로 사용하지 않는 것 같아 아쉬웠습니다. 회원 가입의 벽이 은근 높다는 사실을 다시 한번 느꼈습니다.

Hotjar는 기획에서 의도한 대로 유저가 행동하는지 확인할 수 있는 아주 유용한 툴이라고 생각합니다. 또한 유저 이탈 원인을 파악해서 이탈률을 낮출 수 있다는 점이 가장 좋은 것 같습니다. 나중에 많은 로그가 쌓이게 되면 이를 바탕으로 웹 사이트의 UX를 개선하는 것까지 도전해 보고 싶습니다.