# task-1027.1 완료 보고서
**작업:** GA4/GTM 설정 가이드 + 이벤트 코드
**팀:** dev7-team (이참나 팀장)
**작성일:** 2026-03-25

---

## SCQA

**S**: TOP사업단 리쿠르팅 캠페인 Phase 0으로, 티스토리 랜딩페이지 2개(incar-top.tistory.com, incar-top1.tistory.com)에 GA4/GTM 추적 인프라를 세팅해야 한다.

**C**: 랜딩페이지에 아직 어떤 추적 코드도 설치되어 있지 않아, 캠페인 성과(전환, 스크롤, CTA 클릭 등)를 측정할 수 없다. 추적 인프라 없이는 광고비 최적화가 불가능하다.

**Q**: GA4/GTM 설정부터 7개 이벤트 추적, 전환 연동까지 제이회장님이 바로 따라할 수 있는 실전 가이드를 제공할 수 있는가?

**A**: 4개 섹션의 종합 가이드(670줄)와 GTM 컨테이너 Import용 JSON 파일을 생성했다. 가이드는 GA4 속성/GTM 컨테이너 설정, 7개 이벤트(page_view, scroll_depth_50/90, form_start, form_complete, phone_click, cta_button_click) 트리거/태그 상세, Meta/Google Ads 전환 연동을 포함한다. JSON은 GTM Import만으로 태그 8개/트리거 7개가 한 번에 생성된다.

---

## 생성 파일 목록

- `/home/jay/workspace/memory/specs/campaign-ga4-gtm-guide.md` — 종합 가이드 (670줄)
- `/home/jay/workspace/memory/specs/campaign-gtm-container.json` — GTM 컨테이너 Import JSON (19,727 bytes)

## 작업 상세

**팀원 역할 분배:**
- 이쉬첼(프론트엔드): 가이드 문서 섹션 1~3 작성 (GA4 설정, GTM 이벤트, 전환 연동)
- 쿠쿨칸(백엔드): GTM 컨테이너 Export JSON 생성 + 유효성 검증

**가이드 주요 내용:**
- 섹션 1: GA4 속성 생성 10단계, 데이터 스트림 설정, GTM 컨테이너 생성, 티스토리 HTML 편집 스니펫 삽입 위치
- 섹션 2: 7개 이벤트별 트리거 생성/태그 생성/발화 테스트 방법 (커스텀 HTML 코드 포함)
- 섹션 3: Meta 픽셀 중복 카운트 방지(event_id), Google Ads GA4 전환 Import 절차
- 섹션 4: GTM JSON Import 방법 + 필수 수정 사항 (측정 ID, CTA Selector)

**GTM JSON 구성:**
- Built-in Variables: 5개 (Page URL, Click URL, Click Element, Form Element, Scroll Depth Threshold)
- Triggers: 7개 (All Pages, Scroll 50%, Scroll 90%, Form Start, Form Complete, Phone Click, CTA Click)
- Tags: 8개 (GA4 Config + 6개 GA4 Event + 1개 Custom HTML Form Focus Listener)

## 검증 결과

- JSON 유효성: `json.load()` 통과 ✅
- 태그 수: 8개 (기대값 8) ✅
- 트리거 수: 7개 (기대값 7) ✅
- 가이드 문서 줄 수: 670줄 (4개 섹션 완비) ✅

## 발견 이슈 및 해결

### 자체 해결 (3건)
1. **form_start 이벤트 티스토리 호환성** — 티스토리는 SPA가 아니므로 focusin 이벤트 리스너를 Custom HTML 태그로 구현하고 dataLayer.push로 커스텀 이벤트 발화하는 방식 채택
2. **GA4 향상된 측정과 커스텀 scroll 이벤트 중복** — 향상된 측정의 스크롤 이벤트(90%만 추적)와 커스텀 scroll_depth_50/90 이벤트가 중복될 수 있어, 가이드에 향상된 측정 스크롤 비활성화 권장사항 명시
3. **GTM JSON Import 후 측정 ID placeholder** — JSON에 `G-XXXXXXXXXX` placeholder 사용, Import 후 필수 수정 사항으로 명시

### 범위 외 미해결 (1건)
1. **CTA 버튼 CSS Selector 실제 확인** — 범위 외 사유: 실제 티스토리 랜딩페이지의 CTA 버튼 클래스명을 확인하려면 페이지 접근 필요. 가이드에 `.btn-cta, .cta-button, [data-cta]`를 기본값으로 제공하고, 실제 클래스명 확인 후 수정하도록 안내함.

## QC 자동 검증

(문서 작업이므로 코드 검증 해당 없음. 파일 존재/크기 검증 수행)