# Phase 1: Web/App Analysis

웹사이트 또는 앱의 태깅 가능 요소를 분석하여 DOM 구조, 동적 요소, 트리거 포인트를 파악.

## Objectives

1. Rendered HTML 소스 분석
2. DOM 구조 및 주요 요소 식별
3. 동적 요소 및 SPA 동작 파악
4. 트리거 구성 가능 요소 도출

## Analysis Checklist

### 1. Page Structure
- [ ] 페이지 유형 분류 (home, category, product, cart, checkout, thankyou)
- [ ] URL 패턴 분석 (path, query params)
- [ ] 페이지 템플릿 구조 파악

### 2. Interactive Elements
- [ ] CTA 버튼 (class, id, data-* attributes)
- [ ] 폼 요소 (form id, input names)
- [ ] 네비게이션 링크
- [ ] 아코디언/탭/모달 요소

### 3. E-commerce Elements (해당 시)
- [ ] 상품 목록 컨테이너
- [ ] 상품 카드 구조 (SKU, price, name 위치)
- [ ] 장바구니 버튼
- [ ] 결제 버튼
- [ ] 주문 완료 정보 위치

### 4. Dynamic Content
- [ ] SPA/Ajax 로딩 패턴
- [ ] Infinite scroll
- [ ] Dynamic pricing
- [ ] User-dependent content

## Browser Analysis Steps

```
1. DevTools Console에서 dataLayer 확인
   > window.dataLayer

2. DOM 구조 분석
   > document.querySelectorAll('[data-gtm]')
   > document.querySelectorAll('form')
   > document.querySelectorAll('[class*="cta"], [class*="button"]')

3. 네트워크 탭에서 기존 태그 확인
   > google-analytics.com, googletagmanager.com 요청 필터

4. 이벤트 리스너 확인
   > getEventListeners(document.querySelector('#element'))
```

## Output Template

```markdown
# [사이트명] DOM Analysis Report

## Site Overview
- **URL**: 
- **Type**: E-commerce / Lead Gen / SaaS / Media / B2B
- **Framework**: WordPress / React / Vue / Custom

## Page Types Identified
| Page Type | URL Pattern | Key Elements |
|-----------|-------------|--------------|
| Home | / | hero_cta, featured_products |
| Product | /product/* | add_to_cart, product_details |

## Taggable Elements
### Buttons & CTAs
| Element | Selector | Current ID/Class | Recommended Trigger |
|---------|----------|------------------|---------------------|
| Add to Cart | .add-to-cart | N/A | Click - Class Match |

### Forms
| Form | ID/Name | Fields | Submit Button |
|------|---------|--------|---------------|

### Dynamic Elements
| Element | Type | Loading Pattern | Trigger Strategy |
|---------|------|-----------------|------------------|

## Existing GTM/Analytics
- [ ] GTM Container: GTM-XXXXXX
- [ ] GA4: G-XXXXXXXX
- [ ] Other pixels: 

## Recommendations
1. 
2. 
```

## Common Patterns

### WordPress/WooCommerce
- Product: `.single-product`, `add_to_cart` class
- Cart: `.woocommerce-cart-form`
- Checkout: `.woocommerce-checkout`

### Shopify
- Product: data-product-id attribute
- Cart: form[action="/cart/add"]
- Checkout: checkout.shopify.com 별도 도메인

### React/SPA
- History API 변경 감지 필요
- Custom Event 트리거 활용
- MutationObserver 고려

## Next Phase

분석 완료 후 → Phase 2: User Behaviour Modeling