이 글은 Next.js 13.4 버전에서의 GA 설정에 대해서 설명한다. 다른 라이브러리 설치 없이
next/script의 컴포넌트만 이용한다. 최신 14버전 공식문서에서는@next/third-parties를 설치해<GoogleAnalytics/>를 사용하는 방법도 소개하고 있다.
Google Analytics
Google 애널리틱스는 웹사이트 및 앱에서 데이터를 수집하여 비즈니스에 유용한 정보를 제공하는 보고서를 작성하는 플랫폼이다.
배포한 웹사이트에 방문자가 몇 명인지 데이터를 간단한 GA 설정을 통해 확인하고 수집 해볼 수 있다.
1. Google Analytics 가입
먼저 GA를 사용하기 위해서 https://analytics.google.com/ 에서 가입한다.
-
계정 생성에서 간단한 정보들을 입력해준다. (계정 이름은 자유)
-
속성 만들기에는 측정하고자하는 웹 이름으로 해준다.
3과 4 에서는 비즈니스 세부정보와 목표는 알아서 본인의 프로젝트에 맞게 선택해준다.
마지막으로 데이터 수집할 플랫폼을 선택해준다. 웹을 선택해주면 아래와 같은 데이터 스트림 설정 창이 뜬다.
여기서 배포한 프로젝트의 url을 입력해준다. 아래와 같은 G-로 시작하는 측정ID가 나온다.
2. 프로젝트에 코드 추가하기
환경변수 파일 생성
프로젝트 루트 경로에 /.env 파일에 아래와 같이 작성한다.
(🚫 이 때 gitignore에 .env 파일이 명시되어 있지 않다면 꼭 작성하자. 외부에 노출되면 안되는 ID다.)
NEXT_PUBLIC_GOOGLE_ANALYTICS = "G-0000000000" // 아까 받은 측정 ID 입력하기
GA 컴포넌트 만들기
/src/lib/GoogleAnalytics.tsx 폴더와 파일을 생성하고 아래와 같이 작성한다.
- App dir 내부나 프로젝트 dir 안에, 또 가급적 src 폴더 안에 원하는 폴더를 만드는 것을 추천한다.
- 나는 src 폴더 안에 lib 폴더를 만들어서 에
GoogleAnalytics.tsx파일을 작성해주었다.
아래 코드는 Next.js 프로젝트에서 Google Analytics를 설정하기 위한 코드다. next/script 에서 제공하는 Script 컴포넌트를 사용하여 Google Analytics 스크립트를 비동기적으로 로드하고, 사용자의 웹사이트 활동을 추적한다.
import Script from 'next/script';
export default function GoogleAnalytics({ gaId }: { gaId: string }) {
return (
<>
<Script
async
src={`https://www.googletagmanager.com/gtag/js
?id=${gaId}`}
/>
<Script
id="google-analytics"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${gaId}');
`,
}}
/>
</>
);
}
Layout 파일에 GA 컴포넌트 추가
App dir의 루트 layout.tsx 파일에서 다음과 같이 GA 컴포넌트를 import 해준다.
import GoogleAnalytics from './lib/GoogleAnalytics';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ko">
<body>
{process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS ? (
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
) : null}
// 상태관리 컨텍스트 등은 여기서 감싸주면 됨
<main>{children}</main>
</body>
</html>
);
}적용 확인하기
이제 앱을 실행하고 적용이 잘 되었는지 1차 확인을 해보자.
npm run dev브라우저에서 console.log(dataLayer)를 확인했을 때 아래와 같이 값이 뜨면 정상적으로 프로젝트에 적용이 된 것이다.
3. 환경변수 등록하기
위에서 .env로 환경변수를 등록했었지만 이는 로컬 테스트 시에만 유효하다. 따라서 배포한 환경에 따라 다시 등록해주어야한다. (이 글에서는 vercel을 기본으로 설명한다.)
- vercel에서 배포한 프로젝트의 설정으로 들어가서 환경 변수를 추가한다.
4. GA 데이터 수집
실제 사이트의 GA의 데이터 수집을 확인하려면 며칠 간 기다려야한다. 며칠 간 기다리면 데이터 조회가 가능해지는데
https://analytics.google.com/ 에서 페이지 방문자에 대한 데이터를 확인할 수 있다.
마무리
Page router에서만 해봤던 Next.js에서의 GA 설정을 다루면서 Script 컴포넌트를 통해 훨씬 간결하고 효율적인 방법으로 코드를 작성하는 방법을 배운 것 같다.
처음에는 공식 문서의 @next/third-parties 내 <GoogleAnalytics /> 컴포넌트 사용할 생각이었는데 버전의 종속성 문제인지 잘 동작하지 않았다. next.js의 github 이슈를 찾아보니
// package.json
"next": "^13.0.0 | ^14.0.0"와 같은 버전 지정을 통해 해결할 수 있다고 한다.
또 다른 방법을 찾던 중, Script를 이용한 방법을 발견해서 추가 라이브러리 없이 기존 API 만을 활용해 구현하는 과정을 기록해보았다.
이 글을 통해, Next.js 환경에서 GA를 설정하는 데 있어 다양한 접근 방법과 해결책을 알아볼 수 있었다. 다음 글에서는 구글 검색 엔진에 배포한 웹사이트를 등록하여 검색 결과에 노출될 수 있도록 하는 방법을 다룰 예정이다.
참고자료
해외 블로그
next.js github
