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>
2.9 KiB
2.9 KiB
Phase 1: Web/App Analysis
웹사이트 또는 앱의 태깅 가능 요소를 분석하여 DOM 구조, 동적 요소, 트리거 포인트를 파악.
Objectives
- Rendered HTML 소스 분석
- DOM 구조 및 주요 요소 식별
- 동적 요소 및 SPA 동작 파악
- 트리거 구성 가능 요소 도출
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
# [사이트명] 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_cartclass - 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