Next에서 특정 페이지에 사용자가 머무는 시간 측정 방법

구글 애널리틱스(GA)를 이용하여 해결할 수 있습니다. 그러나 자체적으로 관리하기 위해 커스텀 훅을 구현하였습니다.

학습 개념

• Next.js 페이지 로드 이벤트
• Next.js 페이지 이탈, 종료 이벤트
• Next.js 새로고침 이벤트

usePageStayDuration

usePageStayDuration 훅은 사용자가 현재 페이지에 머무는 시간을 측정하는 기능을 제공합니다.
이 훅은 Next.js의 라우터 이벤트를 활용하여 페이지 전환 및 새로 고침 시 머무른 시간을 기록합니다.
아래에서 이 훅의 동작 방식과 구현 세부 사항을 설명하겠습니다.

코드

먼저 구현된 코드를 확인해보도록 하겠습니다.

import { useRouter } from "next/router";
import { useEffect, useRef } from "react";

const usePageStayDuration = () => {
  const router = useRouter();

  const isRefresh = useRef(false);
  const startTime = useRef(Date.now());
  const duration = useRef(0);

  useEffect(() => {
    const calculateDuration = () => {
      const endTime = Date.now();
      return (endTime - startTime.current) / 1000;
    };

    const handleRouteChangeStart = () => {
      if (isRefresh.current) return;
      duration.current += calculateDuration();
    };

    const handleRouteChangeComplete = () => {
      if (isRefresh.current) return;
      startTime.current = Date.now();
      duration.current = 0;
    };

    const handleBeforeUnload = () => {
      isRefresh.current = true;
      duration.current += calculateDuration();
    };

    router.events.on("routeChangeStart", handleRouteChangeStart);
    router.events.on("routeChangeComplete", handleRouteChangeComplete);
    window.addEventListener("beforeunload", handleBeforeUnload);

    return () => {
      router.events.off("routeChangeStart", handleRouteChangeStart);
      router.events.off("routeChangeComplete", handleRouteChangeComplete);
      window.removeEventListener("beforeunload", handleBeforeUnload);
    };
  }, [router.events, startTime]);
};

export default usePageStayDuration;

상태 관리

• isRefresh
  페이지 새로 고침 여부를 확인하는 참조 변수입니다.
• startTime
  사용자가 페이지에 진입한 시점을 기록합니다.
• duration
  사용자가 페이지에 머문 총 시간을 초 단위로 누적합니다.

제가 구현한 코드에서는 렌더링과 무관하기 때문에 ref로 관리하였습니다.
만약 렌더링에 따라 동작하기 원하면 state로 변경하시면 됩니다.

이벤트 핸들러 및 함수 설명

routeChangeStart 이벤트는 route가 변경되는 시점에 발생하는 이벤트입니다.
routeChangeComplete 이벤트는 route 변경이 완료된 시점에 발생하는 이벤트입니다.
위 2가지는 Next.js에서 제공해주는 이벤트입니다.

새로고침 이벤트는 window 객체를 사용하셔야 합니다.
beforeunload 이벤트를 사용하시면 됩니다.

• calculateDuration
  페이지에 머무는 시간을 계산합니다. 현재 시간을 가져와서 startTime과의 차이를 계산하여 반환합니다.
• handleRouteChangeStart
  페이지 전환이 시작될 때 호출됩니다. 페이지 새로 고침이 아닌 경우, 현재까지의 머무른 시간을 누적합니다.
• handleRouteChangeComplete
  페이지 전환이 완료될 때 호출됩니다. 새로 고침이 아닌 경우, 새 페이지 진입을 위해 startTime을 현재 시간으로 업데이트하고 duration을 초기화합니다.
• handleBeforeUnload
  사용자가 페이지를 떠나기 전에 호출됩니다. 새로 고침 여부를 확인하고, 현재까지의 머무른 시간을 누적합니다.

결론

Next에서 제공해주는 라우터 이벤트를 활용하여 간단히 구현해보았습니다.
사용자의 행동을 분석하는데 도움이 되셨으면 좋겠습니다.