# A2. GTM 7개 이벤트 설치 — 코드 준비

## 목적
GTM(Google Tag Manager)에 설치할 7개 이벤트의 **완성된 코드**를 준비한다.
제이회장님이 GTM 콘솔에 복사-붙여넣기만 하면 되도록 만든다.

## 대상 랜딩페이지
- `incar-top.tistory.com` — 일반 정보 랜딩
- `incar-top1.tistory.com` — 긴급성(1200% 룰) 랜딩

## 7개 이벤트 상세

### 1. page_view (랜딩별 구분)
```javascript
// GTM Custom HTML Tag
dataLayer.push({
  'event': 'page_view',
  'page_type': location.hostname.includes('incar-top1') ? 'urgency' : 'general',
  'page_url': location.href
});
```
- Trigger: All Pages

### 2. scroll_depth_50 / scroll_depth_90
```javascript
// GTM 내장 Scroll Depth 트리거 사용
// Trigger: Scroll Depth > Vertical > 50%, 90%
// Tag: GA4 Event — event_name: scroll_depth
// Parameter: percent_scrolled (Built-in Variable)
```

### 3. form_start
```javascript
// 문의 폼 첫 입력 감지
document.querySelectorAll('input, textarea, select').forEach(el => {
  el.addEventListener('focus', function handler() {
    dataLayer.push({'event': 'form_start'});
    el.removeEventListener('focus', handler);
  }, {once: true});
});
```
- Trigger: DOM Ready

### 4. form_complete
```javascript
// 폼 제출 완료 감지
document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', function() {
    dataLayer.push({'event': 'form_complete'});
  });
});
```
- Trigger: DOM Ready

### 5. phone_click
```javascript
// 전화번호 클릭 감지
document.querySelectorAll('a[href^="tel:"]').forEach(link => {
  link.addEventListener('click', function() {
    dataLayer.push({
      'event': 'phone_click',
      'phone_number': this.href.replace('tel:', '')
    });
  });
});
```
- Trigger: DOM Ready

### 6. cta_button_click
```javascript
// CTA 버튼 클릭 감지 (버튼 텍스트별 구분)
document.querySelectorAll('a.cta-button, button.cta-button, [data-cta]').forEach(btn => {
  btn.addEventListener('click', function() {
    dataLayer.push({
      'event': 'cta_button_click',
      'cta_label': this.textContent.trim().substring(0, 50),
      'cta_url': this.href || ''
    });
  });
});
```
- Trigger: DOM Ready

### 7. session_source (UTM 파싱)
```javascript
// UTM 파라미터 자동 수집
var params = new URLSearchParams(location.search);
var utm = {
  'event': 'session_source',
  'utm_source': params.get('utm_source') || '(direct)',
  'utm_medium': params.get('utm_medium') || '(none)',
  'utm_campaign': params.get('utm_campaign') || ''
};
dataLayer.push(utm);
```
- Trigger: All Pages

## 산출물 요구사항
1. **GTM 설치 가이드** (`/home/jay/workspace/memory/plans/recruiting-marketing/gtm-install-guide.md`)
   - 스크린샷 대신 **단계별 텍스트 가이드** (GTM 콘솔 조작 순서)
   - 각 이벤트별: Tag 생성 → Trigger 설정 → Variable 설정 순서
   - GA4 연동 설정 포함 (Measurement ID 필요 — 플레이스홀더로 `G-XXXXXXXXXX`)
2. **통합 Custom HTML 코드** — 7개 이벤트를 1개 태그로 합치는 옵션도 제공
3. **GTM 컨테이너 Export JSON** — 가능하면 GTM import용 JSON 파일도 생성

## 주의사항
- 티스토리 HTML 구조에 맞게 셀렉터 조정 (실제 페이지 확인 필요)
- 실제 랜딩페이지 URL: `https://incar-top.tistory.com/`, `https://incar-top1.tistory.com/`
- GTM 컨테이너 ID는 플레이스홀더 사용 (`GTM-XXXXXXX`)
- 이벤트 이름은 GA4 권장 네이밍 컨벤션 준수
- form 셀렉터는 실제 티스토리 폼 구조 확인 후 조정 필요 표기