[Next.js] 웹 사이트 방문자 데이터 수집 (with GA: 구글 애널리틱스 )

🍀 들어가며

웹 사이트 방문자의 데이터를 수집하기 위해 구글 애널리틱스를 활용해보기로 했다.
정적 사이트나 CSR이라면 index.html안의 <head> 안에
안내되는 코드를 넣기만 하는 단순한 작업이지만
Next.js를 사용하면 index.html이 없기 때문에 해야할 일이 더 있었다.

📌 코드 작성

구글 애널리틱스를 통해 계정을 생성하고
웹 페이지 주소를 등록해서 태그까지 받을 상황을 전제로 한다.

ID를 환경변수로 설정하기

뭐든지 고유한 ID는 노출되서 좋을건 없으니 환경변수로 설정해줬다.
Next.js에서 전역으로 사용할 환경 변수 생성시 NEXT_PUBLIC를 붙여주면 된다.

NEXT_PUBLIC_GA_ID="xxxxxxxxx"

`_document.js` 파일

해당 파일의 Head 태그 안에 아래 내용을 적어준다.
Next.js는 초기 렌더링 시에 _document.js 파일을 거쳐가는데,
이때 dangerouslySetInnerHTML의 내용이 React.DOM 안에 삽입된다.

dangerouslySetInnerHTML
DOM에서 innerHTML을 사용하기 위한 React의 대체 방법
브라우저에서 HTML 내용을 수정하는 것은 사이트 간 스크립팅 공격에
노출될 확률이 높아지기에 위험함 -> dangerously가 붙음
그렇기에 꼭 필요할 때만 한정적으로 사용할 것

<Head>
  {/* Global Site Tag (gtag.js) - Google Analytics */}
  <script
    async
    src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
  />
  <script
    dangerouslySetInnerHTML={{
      __html: `
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}', {
      page_path: window.location.pathname,
    });
  `,
    }}
  />
 </Head>

다른 페이지에도 적용하기

이렇게만 설정하면 페이지 이동시에는 데이터 수집이 안된다.
이동시에도 해당 코드가 작동하도록 설정해야한다.

일단 gtag의 동작들을 함수로 분리해준다.

lib/gtag.js

export const pageview = (url) => {
  window.gtag("config", process.env.NEXT_PUBLIC_GA_ID, {
    page_path: url,
  });
};

export const event = ({ action, category, label, value }) => {
  window.gtag("event", action, {
    event_category: category,
    event_label: label,
    value: value,
  });
};

next/router를 이용해서 라우팅이 발생했을 때
gtag의 preview 함수로 GA에게 페이지 이동을 알려야한다.

_app.js

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import * as gtag from '../lib/gtag'

const App = ({ Component, pageProps }) => {
  const router = useRouter()
  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url)
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return <Component {...pageProps} />
}

export default App

📌 결과 확인하기

npm run dev으로 서버를 실행해서 페이지를 접속 후
구글 애널리틱스 보고서 중 실시간을 누르면
내가 방문한 기록이 1로 추가된 것을 확인할 수 있다.
이렇게 되면 제대로 데이터가 집계되는 것!

나는 한 번 더 방문해서 현재 2명으로 집계된다

참고

Next JS 앱에 구글 애널리틱스 적용하기
React. DOM엘리먼트에 텍스트 삽입하기 innerHTML말고 dangerouslySetInnerHTML를 사용하자

[MSW] 브라우저, Node.js 환경에서 API 모킹하기 (0)	2023.05.22
Javascript / React에서 Fetch 올바르게 사용하기 (with Node.js 테스트 환경) (0)	2023.05.21
메타버스는 어떻게 구현할까? (WebSocket, 서버 분할, 멀티 스레드) (0)	2023.05.03
[Next.js] 플러그인 사용없이 SEO(검색 엔진 최적화)하기 (0)	2023.04.24
웹 사이트 성능 측정 및 최적화 (with LightHouse) (0)	2023.04.06

성장일기