our-claude-skills/custom-skills/22-gtm-guardian/desktop/references/phase5-implementation.md

# Phase 5: Implementation Plan & Guide

분석된 웹사이트/앱의 상태와 타입, 비즈니스 목표에 맞는 태그 설정 순서와 전략, 체크리스트 도출.

## Objectives

1. 구현 우선순위 및 순서 결정
2. 개발팀용 DataLayer 가이드 작성
3. GTM 컨테이너 설정 가이드
4. QA 체크리스트 도출

## Implementation Sequence

### Standard Sequence
```
1. Base Setup (Week 1)
   ├── GTM Container 설치
   ├── GA4 Configuration Tag
   └── 기본 page_view 확인

2. DataLayer Implementation (Week 1-2)
   ├── 페이지 데이터 (pageType, userId 등)
   └── E-commerce / Lead Gen 이벤트

3. Core Events (Week 2)
   ├── P1 이벤트 태그 설정
   ├── 트리거 구성
   └── 변수 설정

4. Platform Tags (Week 2-3)
   ├── Google Ads Conversion
   ├── Meta Pixel
   └── Kakao Pixel

5. QA & Launch (Week 3)
   ├── Preview 모드 테스트
   ├── 데이터 검증
   └── Production 배포
```

### E-commerce Priority
```
P1: purchase → begin_checkout → add_to_cart → view_item
P2: view_item_list → add_to_wishlist → search
P3: select_item → scroll → video
```

### Lead Gen Priority
```
P1: generate_lead → form_submit
P2: form_start → page_view (특정 페이지)
P3: cta_click → scroll → video
```

## Developer Guide Template

### DataLayer Implementation Guide

```markdown
# DataLayer 구현 가이드

## 1. 기본 설정

### GTM 스니펫 이전 dataLayer 초기화
```html
<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>...</script>
```

### 페이지 로드 시 기본 데이터
```javascript
dataLayer.push({
  'event': 'page_data',
  'page': {
    'type': '[page_type]',  // home, category, product, cart, checkout, thankyou
    'name': '[page_name]',
    'language': 'ko'
  },
  'user': {
    'status': '[logged_in|logged_out]',
    'id': '[hashed_user_id]',  // SHA256 해시, 로그인 시에만
    'type': '[new|returning]'
  }
});
```

## 2. 이벤트별 구현

### [이벤트명]
**발화 시점**: [설명]
**필수 파라미터**: [목록]

```javascript
dataLayer.push({ ecommerce: null });  // E-commerce 이벤트 시 필수
dataLayer.push({
  'event': '[event_name]',
  // 파라미터...
});
```

## 3. 테스트 방법
1. Chrome DevTools Console에서 dataLayer 확인
2. GTM Preview 모드에서 이벤트 확인
3. GA4 DebugView에서 수신 확인
```

## GTM Configuration Guide

### Container Setup Checklist

- [ ] Container ID 확인
- [ ] Web Container 타입 선택
- [ ] 환경(Dev/Stg/Prod) 설정

### Built-in Variables 활성화

```
✅ Page URL, Page Path, Page Hostname, Referrer
✅ Click Element, Click Classes, Click ID, Click URL, Click Text
✅ Form Element, Form Classes, Form ID, Form URL, Form Text
✅ Scroll Depth Threshold, Scroll Depth Units, Scroll Direction
✅ Video Provider, Video Status, Video URL, Video Title, Video Duration, Video Percent
```

### Folder Structure

```
📁 01. Configuration
📁 02. GA4 Events
📁 03. Google Ads
📁 04. Meta Pixel
📁 05. Kakao Pixel
📁 06. Utilities
📁 99. Deprecated
```

### Tag Setup Order

```
1. Constants (Measurement IDs, Pixel IDs)
2. DataLayer Variables
3. Custom JavaScript Variables
4. Triggers (Event-based)
5. Blocking Triggers (Internal traffic)
6. Configuration Tags
7. Event Tags
```

## QA Checklist

→ 상세 체크리스트: [qa-checklist.md](qa-checklist.md)

### Pre-Launch Quick Check

#### DataLayer
- [ ] dataLayer가 GTM 스니펫 이전에 초기화됨
- [ ] 페이지 로드 시 기본 데이터 push됨
- [ ] 숫자 값이 Number 타입으로 전송됨
- [ ] ecommerce 이벤트 전 null push됨

#### Tags
- [ ] 모든 P1 이벤트 태그 설정됨
- [ ] 트리거 조건 정확함
- [ ] 변수 값 정확히 매핑됨

#### Testing
- [ ] Preview 모드에서 모든 태그 발화 확인
- [ ] GA4 DebugView에서 데이터 수신 확인
- [ ] Network 탭에서 요청 확인

#### Cross-check
- [ ] 데스크톱 Chrome 테스트
- [ ] 모바일 Safari 테스트
- [ ] Internal traffic 필터 작동

## Common Implementation Issues

| Issue | Solution |
|-------|----------|
| dataLayer not defined | GTM 스니펫 이전에 초기화 |
| 숫자가 문자열로 전송 | 따옴표 제거, parseInt/parseFloat |
| 이벤트 중복 발화 | 트리거 조건 검토, 페이지 상태 확인 |
| 태그 미발화 | Preview에서 트리거 조건 디버깅 |
| 데이터 불일치 | DL 변수 경로 확인, 대소문자 확인 |

## Handoff Checklist

### To Development Team
- [ ] DataLayer 구현 가이드 전달
- [ ] 이벤트 택소노미 시트 공유
- [ ] Q&A 세션 완료

### To Marketing Team
- [ ] 측정 가능한 이벤트 목록 공유
- [ ] GA4 보고서 접근 권한 확인
- [ ] 전환 설정 완료 확인

### Documentation
- [ ] Tagging Plan 최종 버전 저장
- [ ] GTM 컨테이너 버전 기록
- [ ] Notion에 모든 문서 업로드

## Next Phase

구현 완료 후 → Phase 6: Progressive Audit