Next.js Router Events: 페이지 접속 시 GA 이벤트 발생시키기

개요

Next.js를 사용하여 웹 애플리케이션을 개발할 때, 사용자의 페이지 접속을 추적하고 Google Analytics(GA) 이벤트를 발생시키는 것은 매우 유용한 기능이다.
회사의 마케팅 팀이나 개발팀에서 이러한 정보를 활용하여 사용자의 행동을 분석하고 서비스를 개선할 수 있기 때문이다.
Next.js 14에서 router를 사용하여 이 기능을 구현하는 방법과 최근 변경사항으로 인한 문제, 그리고 그 해결책에 대한 내용을 정리해보자.

목표

1. 특정 페이지에 사용자가 접속할 때 Google Analytics 이벤트를 발생시킨다.
2. 이 기능을 재사용 가능한 커스텀 훅으로 만들어 여러 컴포넌트에서 쉽게 사용할 수 있게 한다.

router.events.on 사용하기 (Pages Router)

Next.js의 Pages Router에서는 router.events.on을 사용하여 페이지 전환을 감지하고 이에 따른 작업을 수행할 수 있었다. 이는 다음과 같이 구현할 수 있었다:

import { useEffect } from 'react';
import { useRouter } from 'next/router';
 
function usePageViewTracker() {
  const router = useRouter();
 
  useEffect(() => {
    const handleRouteChange = (url) => {
      // Google Analytics 이벤트 발생
      window.gtag('config', 'YOUR_GA_MEASUREMENT_ID', {
        page_path: url,
      });
    };
 
    router.events.on('routeChangeComplete', handleRouteChange);
 
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);
}

이 방식은 효과적이었고 많은 개발자들에게 널리 사용되었다.

App Router에서의 문제

그러나 Next.js 13버전부터 도입된 App Router에서는 router.events.on을 더 이상 사용할 수 없게 되었다.
이는 App Router의 새로운 아키텍처와 관련이 있으며, 기존의 방식으로는 페이지 전환을 감지할 수 없게 되었다.

해결 방법: next/navigation 활용하기

App Router에서는 next/navigation에서 제공하는 useSearchParams, useParams 등의 훅을 활용하여 비슷한 기능을 구현할 수 있다. 다음은 이를 활용한 예시 코드이다:

import { useEffect } from 'react';
import { useSearchParams, useParams, usePathname } from 'next/navigation';
 
function usePageViewTracker() {
  const searchParams = useSearchParams();
  const params = useParams();
  const pathname = usePathname();
 
  useEffect(() => {
    // 현재 페이지 URL 구성
    const url = pathname + (searchParams.toString() ? `?${searchParams.toString()}` : '');
 
    // Google Analytics 이벤트 발생
    window.gtag('config', 'YOUR_GA_MEASUREMENT_ID', {
      page_path: url,
    });
  }, [searchParams, params, pathname]);
}

이 방식에서는 useSearchParams, useParams, usePathname을 사용하여 현재 페이지의 URL을 구성하고, 이 정보가 변경될 때마다 Google Analytics 이벤트를 발생시킨다.

결론

Next.js의 App Router로 전환하면서 페이지 접속 추적 방식에 변화가 생겼지만, 새로운 API를 활용하여 비슷한 기능을 구현할 수 있다.
이 방식은 App Router의 장점을 살리면서도 기존의 분석 기능을 유지할 수 있게 해준다.

향후 Next.js 업데이트에서는 이러한 용례를 더 쉽게 구현할 수 있는 방법이 제공될 수도 있으니, Next.js의 공식 문서를 주기적으로 확인하는 것이 좋겠다.

이 커스텀 훅을 사용하면 Next.js 애플리케이션에서 쉽게 페이지 접속을 추적하고 Google Analytics 이벤트를 발생시킬 수 있을 것이다.