# Step 8: 추가 설정 - 이벤트 추적

## 이 문서의 목표
- 자동 수집 이벤트 이해하기
- 커스텀 이벤트 추가 방법 알기
- 전환 설정하기

---

## GA4 이벤트 유형

GA4는 이벤트 기반 분석 도구입니다. 이벤트는 3가지 유형으로 나뉩니다:

| 유형 | 설명 | 설정 필요 |
|------|------|----------|
| **자동 수집 이벤트** | GA4가 자동으로 수집 | 없음 |
| **향상된 측정 이벤트** | 토글로 활성화 | 최소 |
| **커스텀 이벤트** | 직접 코드 추가 | 필요 |

---

## 자동 수집 이벤트

GA4 스크립트만 추가하면 자동으로 수집되는 이벤트:

| 이벤트명 | 설명 |
|----------|------|
| `first_visit` | 첫 방문 |
| `session_start` | 세션 시작 |
| `page_view` | 페이지 조회 |
| `user_engagement` | 사용자 참여 |

---

## 향상된 측정 이벤트

데이터 스트림 설정에서 토글로 켜/끄기 가능:

| 이벤트명 | 설명 | 기본값 |
|----------|------|--------|
| `scroll` | 90% 스크롤 | ON |
| `click` | 외부 링크 클릭 | ON |
| `view_search_results` | 사이트 내 검색 | ON |
| `video_start` | 동영상 재생 시작 | ON |
| `video_progress` | 동영상 10/25/50/75% | ON |
| `video_complete` | 동영상 완료 | ON |
| `file_download` | 파일 다운로드 | ON |

### 설정 확인/변경:
관리 → 데이터 스트림 → 웹 스트림 → 향상된 측정 (톱니바퀴)

---

## 커스텀 이벤트 추가하기

### 예시 1: 문의 버튼 클릭 추적

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

export default function ContactButton() {
  const handleClick = () => {
    // GA4 이벤트 전송
    if (typeof window !== 'undefined' && window.gtag) {
      window.gtag('event', 'contact_button_click', {
        button_location: 'header',
        page_title: document.title
      });
    }
    // 실제 동작
    window.location.href = '/contact';
  };

  return (
    <button onClick={handleClick}>
      お問い合わせ
    </button>
  );
}
```

### 예시 2: 문의 폼 제출 추적

```tsx
// 폼 제출 성공 시
const onSubmitSuccess = () => {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', 'contact_form_submit', {
      form_name: 'contact',
      page_path: window.location.pathname
    });
  }
};
```

### TypeScript 타입 정의 추가

```tsx
// types/gtag.d.ts
declare global {
  interface Window {
    gtag: (
      command: 'event' | 'config' | 'js',
      action: string,
      params?: Record<string, any>
    ) => void;
    dataLayer: any[];
  }
}

export {};
```

---

## 전환 설정하기

전환(Conversion)은 비즈니스에 중요한 이벤트를 표시하는 것입니다.

### 전환으로 설정하면 좋은 이벤트:
- 문의 폼 제출
- 회원가입 완료
- 구매 완료
- 특정 페이지 도달

### 설정 방법:

1. **관리** → **이벤트**
2. 전환으로 만들 이벤트 찾기
3. **"전환으로 표시"** 토글 활성화

또는

1. **관리** → **전환**
2. **"새 전환 이벤트"** 클릭
3. 이벤트 이름 입력: `contact_form_submit`

---

## 권장 이벤트 네이밍

Google 권장 이벤트명을 사용하면 GA4가 자동으로 최적화:

| 이벤트명 | 용도 |
|----------|------|
| `generate_lead` | 리드 생성 (문의 등) |
| `sign_up` | 회원가입 |
| `login` | 로그인 |
| `purchase` | 구매 |
| `add_to_cart` | 장바구니 추가 |
| `search` | 검색 |

### 사용 예시:
```tsx
window.gtag('event', 'generate_lead', {
  currency: 'JPY',
  value: 1000
});
```

---

## Debug View로 이벤트 테스트

### 활성화:
1. **관리** → **DebugView**
2. 또는 URL에 `?debug_mode=true` 추가

### 코드에서 디버그 모드:
```tsx
gtag('config', 'G-XXXXXXXXXX', {
  'debug_mode': true
});
```

### DebugView 화면:
실시간으로 이벤트가 전송되는 것을 확인 가능

---

## 다음 단계

v9에서는 자주 발생하는 문제와 해결 방법을 알아봅니다.

---

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