# Step 3: 측정 ID 확인 및 Next.js 설정 방법 이해하기
## 이 문서의 목표
- 측정 ID 확인 방법 익히기
- Next.js에서 GA4를 설정하는 방법들 비교하기
- 우리 프로젝트에 맞는 방법 선택하기
---
## 측정 ID 확인하기
### 방법 1: 데이터 스트림 상세 페이지
1. Google Analytics 접속
2. 좌측 하단 **관리** (⚙️) 클릭
3. **데이터 스트림** 클릭
4. 웹 스트림 선택
5. 상단에 **측정 ID** 표시: `G-XXXXXXXXXX`
### 방법 2: 태그 안내 페이지
데이터 스트림 상세 페이지에서:
1. "태그 안내 보기" 클릭
2. "직접 설치" 탭 선택
3. 코드 스니펫에서 측정 ID 확인
---
## Next.js에서 GA4 설정 방법 비교
### 우리 프로젝트 정보
- **Next.js 버전**: 15.5.5
- **라우터**: App Router (app 디렉토리 구조)
- **배포**: Vercel
### 방법 1: Google 공식 스크립트 직접 추가 (권장)
```tsx
// app/layout.tsx
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
**장점**:
- 추가 패키지 불필요
- Google 공식 방법
- 가장 안정적
**단점**:
- 코드가 약간 길다
---
### 방법 2: @next/third-parties 패키지 사용
```bash
npm install @next/third-parties
```
```tsx
// app/layout.tsx
import { GoogleAnalytics } from '@next/third-parties/google'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
**장점**:
- 코드가 간결
- Next.js 공식 패키지
**단점**:
- 추가 패키지 설치 필요
- 패키지 업데이트 의존성
---
### 방법 3: react-ga4 패키지 사용
```bash
npm install react-ga4
```
**장점**:
- 이벤트 추적 헬퍼 함수 제공
**단점**:
- 서드파티 패키지
- App Router에서 설정 복잡
---
## 우리의 선택: 방법 1 (공식 스크립트 직접 추가)
### 선택 이유:
1. **추가 의존성 없음** - 패키지 설치 불필요
2. **안정성** - Google 공식 방법
3. **Next.js 15 호환** - 최신 버전과 완벽 호환
4. **환경변수 지원** - 측정 ID를 환경변수로 관리 가능
### 환경변수 사용 (보안 및 관리 용이)
```env
# .env.local
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX
```
```tsx
// 코드에서 사용
const GA_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID
```
---
## 현재 프로젝트 구조
```
PlanitAI_Inc_website/nextjs/
├── app/
│ ├── layout.tsx ← 여기에 GA 코드 추가
│ ├── page.tsx
│ └── ...
├── components/
├── .env.local ← 측정 ID 저장
└── package.json
```
---
## 다음 단계
v4에서는 실제로 코드를 추가합니다:
1. `.env.local`에 측정 ID 추가
2. `layout.tsx`에 GA 스크립트 추가
3. 빌드 및 테스트
---
*작성일: 2024-12-05*
*프로젝트: PlanitAI 웹사이트 방문자 분석 설정*