# Step 9: 트러블슈팅 및 FAQ

## 이 문서의 목표
- 자주 발생하는 문제 해결하기
- GA4 관련 FAQ
- 유용한 디버깅 도구

---

## 자주 발생하는 문제

### 문제 1: 실시간에 데이터가 안 보여요

**원인 확인:**
1. 측정 ID가 올바른지 확인
2. 환경변수가 제대로 설정되었는지 확인
3. 광고 차단 확장 프로그램 확인

**해결 방법:**
```bash
# 1. 환경변수 확인
echo $NEXT_PUBLIC_GA_MEASUREMENT_ID

# 2. 빌드 후 소스 확인
# 배포된 사이트에서 페이지 소스 보기
# "gtag" 또는 "G-" 검색
```

**브라우저에서 확인:**
```javascript
// 개발자 도구 콘솔에서
console.log(window.dataLayer);
// 데이터가 있으면 정상
```

---

### 문제 2: 어제 데이터가 없어요

**원인:**
- GA4 설정 직후에는 과거 데이터가 없음
- 데이터는 설정 시점부터 수집 시작

**해결:**
- GA4는 과거 데이터를 소급하지 않음
- 설정 완료 후 24-48시간 기다리기
- 실시간 → 어제 → 일주일 순으로 데이터 축적

---

### 문제 3: 방문자 수가 이상하게 적어요

**가능한 원인들:**

| 원인 | 확인 방법 |
|------|----------|
| 봇/크롤러 필터링 | 관리 → 데이터 설정 → 데이터 필터 |
| 내부 트래픽 제외 | 관리 → 데이터 스트림 → 태그 설정 |
| 광고 차단 | 다른 브라우저/시크릿 모드로 테스트 |
| 캐시 | 하드 리프레시 (Ctrl+Shift+R) |

---

### 문제 4: 특정 페이지 조회가 안 잡혀요

**SPA (Single Page Application) 문제:**

Next.js App Router는 클라이언트 사이드 네비게이션을 사용하므로,
페이지 전환 시 자동으로 페이지뷰가 안 잡힐 수 있음.

**해결책: 라우트 변경 감지**

```tsx
// components/GoogleAnalytics.tsx
"use client";

import Script from "next/script";
import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";

const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;

export default function GoogleAnalytics() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    if (pathname && GA_MEASUREMENT_ID) {
      window.gtag("config", GA_MEASUREMENT_ID, {
        page_path: pathname + (searchParams?.toString() ? `?${searchParams}` : ""),
      });
    }
  }, [pathname, searchParams]);

  if (!GA_MEASUREMENT_ID) return null;

  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${GA_MEASUREMENT_ID}');
        `}
      </Script>
    </>
  );
}
```

---

### 문제 5: 개발 환경에서 데이터가 섞여요

**해결: 환경별 설정 분리**

```tsx
// components/GoogleAnalytics.tsx
const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;
const isDevelopment = process.env.NODE_ENV === 'development';

export default function GoogleAnalytics() {
  // 개발 환경에서는 GA 비활성화
  if (!GA_MEASUREMENT_ID || isDevelopment) {
    return null;
  }
  // ...
}
```

---

## FAQ

### Q: GA4는 무료인가요?
**A:** 네, 완전 무료입니다. 유료 버전(GA4 360)도 있지만 대기업용입니다.

### Q: 데이터 보관 기간은?
**A:** 기본 2개월, 최대 14개월까지 설정 가능
- 관리 → 데이터 설정 → 데이터 보관

### Q: GDPR/쿠키 동의가 필요한가요?
**A:** EU 사용자 대상 서비스라면 필요합니다.
- 일본 내 서비스는 큰 문제 없음
- 필요 시 쿠키 동의 배너 추가

### Q: 내 방문도 카운트되나요?
**A:** 네, 기본적으로 카운트됩니다.
- 제외하려면: 관리 → 데이터 스트림 → 태그 설정 → 내부 트래픽 정의

### Q: 여러 도메인을 하나로 추적할 수 있나요?
**A:** 네, 크로스 도메인 추적 가능
- 관리 → 데이터 스트림 → 태그 설정 → 도메인 구성

---

## 유용한 디버깅 도구

### 1. Google Tag Assistant
- Chrome 확장 프로그램
- 페이지의 태그 상태 확인
- https://tagassistant.google.com/

### 2. GA4 DebugView
- 관리 → DebugView
- 실시간 이벤트 디버깅

### 3. 브라우저 개발자 도구
```javascript
// Network 탭에서 필터
google-analytics
gtag
collect

// Console에서 확인
console.log(window.dataLayer);
```

### 4. Real-time 보고서
- 가장 빠른 확인 방법
- 설정 후 즉시 테스트 가능

---

## 다음 단계

v10에서 전체 과정을 정리하고 마무리합니다.

---

*작성일: 2024-12-05*
*프로젝트: PlanitAI 웹사이트 방문자 분석 설정*