Restructure skill numbering: SEO 11-30, GTM 60-69, reserve 19-28 for future skills
Renumber 12 existing skills to new ranges: - SEO: 11→13, 12→18, 13→16, 14→17, 15→14, 16→15, 17→29, 18→30, 19→12 - GTM: 20→60, 21→61, 22→62 Update cross-references in gateway architect/builder skills, GTM guardian README, CLAUDE.md (skill tables + directory layout), and AGENTS.md (domain routing ranges). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,208 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user