[NextJS] Next.js 프로젝트에 Google Analytics 붙이기

 

GA를 붙이는 여러 라이브러리들이 있다.

 

하지만 유럽권에서 개인정보를 활용한 마케팅에 규제를 가하고 있는 이유로 구글 새로운 방식의 마케팅 지원을 할 수 있게 변화를 주고 있다.

 

이런 변화에 대응할 수 있도록 라이브러리 없이 Vercel에서 제공하는 가이드 라인에 따라 조금은 투박하게 직접 붙여보기로 했다.

 

_app.js 파일에 GA 측정 ID 추가

보통 태그나 태그 안에 들어갈 내용을 커스텀하기 위해 _document.js 파일을 이용한다.

하지만 아래 예제에 따르면 Next 11 버전에서 추가된 next/script를 이용해 _app.js에서 구현하기를 권고하고 있다.

GitHub - vercel/next.js: The React Framework

 

_document.js는 서버 단에서만 실행되고 next/script는 로딩 순서를 보장하는 클라이언트 사이드 기능이 있다고 한다.

('_document.js' page only runs on the server and 'next/script' has client-side functionality to ensure loading order)

 

이는 윈도우를 참조하고 있는 코드가 클라이언트에서 안정적으로 실행될 수 있게 하기 위함이다.

 

vercel에서 제안하는 샘플 코드이다.

// _app.js

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

const App = ({ Component, pageProps }) => {
  const router = useRouter()
  
  return (
    <>
      {/* Global Site Tag (gtag.js) - Google Analytics */}
      <Script
        strategy='afterInteractive'
        src='https://www.googletagmanager.com/gtag/js?id=여기에_측정_ID_입력'
      />

      <Script id='google-analytics' strategy='afterInteractive'>
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '여기에_측정_ID_입력', {
            page_path: window.location.pathname,
          });
        `}
      </Script>
      <Component {...pageProps} />
    </>
  )
}

next/script의 strategy의 옵션 값에는 세 가지가 있다.

 

beforeInteractive

페이지가 상호작용하기 전에 가져오거나 실행되어야 할 필요가 있는 중요한 스크립트에 사용하는 옵션이다. 이 옵션이 적용된 스크립트들은 초기 HTML에 삽입되어 자체 번들 JavaScript가 실행되기 전에 실행된다.

 

afterInteractive

태그 매니저나 분석툴처럼 해당 페이지의 상호작용 이후에 가져오고 실행되는 스크립트의 경우 사용한다. 이 스크립트들은 클라이언트 사이드에 삽입되어 hydration(html이 그려지고 난 후 이벤트 핸들러가 추가된 시점) 이후에 실행된다.

 

lazyOnload

SNS 챗 같이 유휴 시간동안 기다릴 수 있는 스크립트의 경우 적용한다.

 

 

자세한 내용은 아래 공식 문서에서 확인할 수 있다.

Basic Features: Handling Scripts | Next.js