사이드로 만들어 보았던 랜딩 페이지의 방문객이 어느정도 되는지 알고 싶었다.
이러한 니즈로 방문객 수를 알아보고 싶으면 GA 를 프로젝트에 심어야 한다더라
예전에 회사에서 전략팀이 주는 소스로 A/B테스트 정도로 코드에 심어서 테스트 요청을 해본 적은 있었지만
GA 설정부터 시작해야한다. 분명 나같은 사람들이 많겠지. 그래서 직접 포스팅 해보려고 한다.
해당 포스팅은 GA 페이지 내 설정 / Nextjs 프로젝트 내 설정 요렇게 두 파트로 나눠보았다.
지난 시간에는 GA 페이지 설정을 해보았고, 이번에는 Nextjs 프로젝트 내 설정을 해보려고 한다.
GA 페이지 설정이 궁금하시다면 클릭👇👇👇
Next.js - GA4 pageview 추가하기 (GA 페이지 셋업편)
사이드로 만들어 보았던 랜딩 페이지의 방문객이 어느정도 되는지 알고 싶었다.이러한 니즈로 방문객 수를 알아보고자 하였더니 GA 를 프로젝트에 심어야 한다더라예전에 회사에서 전략팀이 주
devbirdfeet.tistory.com
Next.js - GA4 pageview 추가하기 (Nextjs 셋업편)
next.js 에서는 13.4 이후 버전 기준으로 서드파티 라이브러리로 GA4 를 지원한다. 그래서 매우 손쉽게 코드를 심어놓을 수 있다.
1. 일단 서드파티 라이브러리를 설치해주자
$ pnpm add @next/third-parties@latest
2. .env 파일에 환경 변수에 GA ID 추가해주기
NEXT_PUBLIC_GA_ID="G-0000000000"
3. layout.tsx 에 GoogleAnalytics 컴포넌트 추가해주기
(이때 pageview 의 경우에는 따로 설정을 할 필요가 없다. 브라우저 히스토리 상태가 변경될때 자동으로 트래킹하기 때문이다)
import { GoogleAnalytics } from '@next/third-parties/google'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} /> // 요거만 추가해주면 끝
</html>
)
}
4. 테스트 해보기
로컬 띄우고 새로고침을 해봤더니 API가 잘쏴진다 (성 - 공) 하지만 여기서 만족할 순 없지. GA 페이지로 향해보자
요기는 GA home 이다
바로 아래 active user 라는 섹션에서 방금 새로고침해서 API 를 날린 딱 그시간에 들어맞는 데이터가 수집되었다
사실 지금 사용한 기능은 굉장히 기초 세팅이긴 하지만
위대한 여정의 시작은 항상 첫걸음부터 시작해야 하는 것처럼 이또한 나의 첫걸음 이겠지 뭐
여튼 여기까지 마치겠다~
ref:
Optimizing: Third Party Libraries | Next.js
Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.
nextjs.org
How to Implement Google Analytics 4 (GA4) in a Next.js Project
Google Analytics 4 (GA4) provides advanced tracking features to help you monitor user behavior and...
dev.to
'Next' 카테고리의 다른 글
| Next.js - GA4 pageview 추가하기 (GA 페이지 셋업편) (0) | 2025.03.30 |
|---|---|
| Strapi(2) ContentType 설정하기 (0) | 2024.02.29 |
| Strapi(1) 스트라피 설치하기 (0) | 2024.02.23 |
| Next.js - 서버 컴포넌트에서 useContext() 사용하기 (0) | 2023.12.31 |
| Next.js - Route 로 관리하는 모달 만들기 (URL 히스토리) (1) | 2023.12.29 |
댓글