프로젝트에 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을 작성하면 구동 환경에 알맞은 파일이 적용됩니다.

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를 개선하는 것까지 도전해 보고 싶습니다.