Andrew Yim
b859d0a266
- Add desktop/ directory for Claude Desktop (Phase 1-5: analysis, design, docs) - Add code/ directory for Claude Code (Phase 6-7: automation, audit) - Create SKILL.md with YAML frontmatter for Desktop compatibility - Create CLAUDE.md for Code automation workflows - Organize references by platform scope with shared files duplicated - Add templates for tagging plan and event taxonomy - Include README.md with overview and usage guide 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
116 lines
2.9 KiB
Markdown
116 lines
2.9 KiB
Markdown
# 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
|