# GTM 이벤트 설치 가이드 — 인카 리크루팅 마케팅 **작성일:** 2026-03-22 **대상:** 제이회장님 (GTM 콘솔 직접 설치) **대상 페이지:** - `https://incar-top.tistory.com/` (일반 정보 랜딩) - `https://incar-top1.tistory.com/` (긴급성 1200% 룰 랜딩) --- ## 목차 1. [사전 준비](#1-사전-준비) 2. [티스토리 GTM 스니펫 설치](#2-티스토리-gtm-스니펫-설치) 3. [Option A: JSON Import 방식 (권장)](#3-option-a-json-import-방식-권장) 4. [Option B: 수동 설치 (이벤트별)](#4-option-b-수동-설치-이벤트별) 5. [통합 단일 태그 코드 (Option C)](#5-통합-단일-태그-코드-option-c) 6. [GA4 연동 설정](#6-ga4-연동-설정) 7. [확인 및 테스트](#7-확인-및-테스트) --- ## 실제 티스토리 HTML 구조 분석 결과 > 2026-03-22 기준 실제 페이지 확인 완료 | 항목 | 값 | |------|-----| | 메인 폼 ID | `form#applyForm` | | 제출 버튼 | `button.btn-premium[type="submit"]` | | 폼 전송 방식 | Google Apps Script (GAS) POST | | 전화번호 링크 | ✅ 없음 — 텍스트만 표시 (010-2011-8829) | | 앵커 링크 | `a[href="#contact"]`, `a[href="#TOP-leader"]` | | Facebook Pixel | incar-top1에만 `fbq('track','Lead')` 내장됨 | --- ## 1. 사전 준비 ### 1-1. GTM 컨테이너 생성 > ✅ 이미 컨테이너가 있으면 이 단계는 건너뜁니다. 1. [tagmanager.google.com](https://tagmanager.google.com) 접속 2. `계정 만들기` 클릭 3. 계정 이름 입력 (예: `제이회장 인카`) 4. 컨테이너 이름 입력 (예: `incar-tistory`) 5. 타겟 플랫폼: `웹` 선택 6. `만들기` 클릭 7. 이용약관 동의 후 확인 > 🔧 생성된 컨테이너 ID(`GTM-XXXXXXX`)를 메모해 두세요. --- ### 1-2. GA4 Measurement ID 확인 1. [analytics.google.com](https://analytics.google.com) 접속 2. 좌측 하단 `관리(톱니바퀴)` 클릭 3. `속성` 열 → `데이터 스트림` 클릭 4. 해당 스트림 클릭 → `측정 ID` 확인 (형식: `G-XXXXXXXXXX`) > 🔧 이 Measurement ID는 GA4 태그 설정 시 사용합니다. 메모해 두세요. --- ## 2. 티스토리 GTM 스니펫 설치 ### 2-1. 티스토리 HTML 편집 진입 1. 티스토리 관리자 페이지 접속 2. 좌측 메뉴 → `꾸미기` → `스킨 편집` 클릭 3. 우측 상단 `HTML 편집` 클릭 4. 상단 탭에서 `HTML` 선택 ### 2-2. Head 스니펫 삽입 (`` 바로 다음) ```html ``` > 🔧 `GTM-XXXXXXX`를 실제 컨테이너 ID로 교체 ### 2-3. Body 스니펫 삽입 (`` 바로 다음) ```html ``` > 🔧 `GTM-XXXXXXX`를 실제 컨테이너 ID로 교체 > ⚠️ **두 페이지**(`incar-top`, `incar-top1`) 모두에 동일하게 설치해야 합니다. 4. `저장` 클릭 --- ## 3. Option A: JSON Import 방식 (권장) > 가장 빠른 방법입니다. 태그 8개를 한 번에 가져옵니다. ### 3-1. JSON 파일 준비 아래 파일을 사용하세요 (별도 파일로 제공됨): - 파일명: `gtm-incar-export.json` (이 가이드와 같은 폴더) - **열기 → `G-XXXXXXXXXX` 부분을 실제 GA4 Measurement ID로 교체 후 저장** ### 3-2. GTM 콘솔에서 JSON Import 1. GTM 콘솔 → 해당 컨테이너 선택 2. 상단 메뉴 `관리` 탭 클릭 3. `컨테이너` 열 → `컨테이너 가져오기` 클릭 4. `파일 선택` → `gtm-incar-export.json` 업로드 5. 가져오기 옵션: - 새 컨테이너: `덮어쓰기` 선택 - 기존 태그 있음: `병합` → `충돌하는 태그 이름 바꾸기` 선택 6. `확인` 클릭 ### 3-3. Import 후 GA4 Measurement ID 교체 1. GTM 콘솔 → `태그` 탭 2. `GA4 Event - scroll_depth_50` 태그 클릭 → `G-XXXXXXXXXX` → 실제 ID 교체 → 저장 3. `GA4 Event - scroll_depth_90` 태그 클릭 → 동일하게 교체 > 🔧 나머지 태그는 Custom HTML 방식이라 Measurement ID 수정 불필요 --- ## 4. Option B: 수동 설치 (이벤트별) ### 공통 사전 작업: 트리거 생성 > ⚠️ 이벤트 4종(form_start, form_complete, phone_click, cta_button_click)에 공통 사용. 한 번만 만들면 됩니다. **DOM 준비됨 트리거:** 1. GTM 콘솔 → `트리거` 탭 → `새로 만들기` 클릭 2. 트리거 이름: `DOM 준비됨` 3. 트리거 유형: `DOM 준비됨` 선택 4. 실행 시점: `모든 DOM 준비됨 이벤트` 선택 5. `저장` --- ### 4-1. GA4 구성 태그 | 항목 | 값 | |------|-----| | 태그 이름 | `GA4 구성` | | 태그 유형 | Google 태그 | | 측정 ID | 🔧 `G-XXXXXXXXXX` (실제 ID로 교체) | | 트리거 | 모든 페이지 (All Pages) | 1. 태그 → 새로 만들기 → 태그 이름: `GA4 구성` 2. 태그 구성 클릭 → `Google 태그` 선택 3. 태그 ID 입력: 실제 GA4 Measurement ID 4. 트리거: `All Pages` 선택 5. 저장 --- ### 4-2. 이벤트 1: page_view | 항목 | 값 | |------|-----| | 태그 이름 | `이벤트 - page_view` | | 태그 유형 | 맞춤 HTML | | 트리거 | 모든 페이지 (All Pages) | ```html ``` --- ### 4-3. 이벤트 2 & 3: scroll_depth_50 / scroll_depth_90 > ✅ GTM 내장 트리거 사용 — 별도 JavaScript 코드 불필요 **스크롤 깊이 트리거 생성 (50%)** 1. 트리거 → 새로 만들기 → `스크롤 깊이 50%` 2. 트리거 유형: `스크롤 깊이` 선택 3. 세로 스크롤 깊이: `비율(%)` → `50` 4. 저장 **스크롤 깊이 트리거 생성 (90%)** 1. 트리거 → 새로 만들기 → `스크롤 깊이 90%` 2. 유형: `스크롤 깊이` → `비율(%)` → `90` 3. 저장 **scroll_depth 태그 생성 (GA4 이벤트 태그)** | 항목 | 값 | |------|-----| | 태그 이름 | `이벤트 - scroll_depth` | | 태그 유형 | Google 애널리틱스: GA4 이벤트 | | 이벤트 이름 | `scroll_depth` | | 이벤트 매개변수 | `percent_scrolled` = `{{Scroll Depth Threshold}}` | | 트리거 | 스크롤 깊이 50%, 스크롤 깊이 90% 모두 선택 | 1. 태그 → 새로 만들기 → `이벤트 - scroll_depth` 2. 태그 구성: `Google 애널리틱스: GA4 이벤트` 선택 3. 구성 태그: `GA4 구성` 선택 4. 이벤트 이름: `scroll_depth` 5. 이벤트 매개변수 → 행 추가: - 매개변수 이름: `percent_scrolled` - 값: 블록 아이콘 클릭 → `Scroll Depth Threshold` 선택 6. 트리거: `스크롤 깊이 50%` + `스크롤 깊이 90%` 모두 선택 7. 저장 --- ### 4-4. 이벤트 4: form_start | 항목 | 값 | |------|-----| | 태그 이름 | `이벤트 - form_start` | | 태그 유형 | 맞춤 HTML | | 트리거 | DOM 준비됨 | ```html ``` > ✅ `#applyForm` — 실제 페이지 확인 완료 > ⚠️ `#applyForm`이 없는 경우 셀렉터를 `input, textarea, select`로 변경하세요. --- ### 4-5. 이벤트 5: form_complete | 항목 | 값 | |------|-----| | 태그 이름 | `이벤트 - form_complete` | | 태그 유형 | 맞춤 HTML | | 트리거 | DOM 준비됨 | ```html ``` > ✅ 폼이 GAS POST 방식이므로 `submit` 이벤트 정상 발화 확인 --- ### 4-6. 이벤트 6: phone_click | 항목 | 값 | |------|-----| | 태그 이름 | `이벤트 - phone_click` | | 태그 유형 | 맞춤 HTML | | 트리거 | DOM 준비됨 | ```html ``` > ⚠️ **현재 두 페이지 모두 `tel:` 링크 없음** — 전화번호(010-2011-8829)가 텍스트로만 표시되어 지금은 발화 안 됨. > 향후 `` 형태로 마크업 추가 시 자동 동작합니다. 태그는 미리 설치해도 무방합니다. --- ### 4-7. 이벤트 7: cta_button_click | 항목 | 값 | |------|-----| | 태그 이름 | `이벤트 - cta_button_click` | | 태그 유형 | 맞춤 HTML | | 트리거 | DOM 준비됨 | ```html ``` > ✅ 확인된 셀렉터: `button.btn-premium` (제출), `a[href="#contact"]`, `a[href="#TOP-leader"]` > `a.cta-button`, `[data-cta]`는 향후 추가 요소 대비 예비 셀렉터 --- ### 4-8. 이벤트 8: session_source | 항목 | 값 | |------|-----| | 태그 이름 | `이벤트 - session_source` | | 태그 유형 | 맞춤 HTML | | 트리거 | 모든 페이지 (All Pages) | ```html ``` --- ## 5. 통합 단일 태그 코드 (Option C) > 7개 이벤트를 **1개 GTM Custom HTML 태그**로 설치하는 방법입니다. > - 태그 이름: `INCAR 통합 이벤트 트래킹` > - 태그 유형: 맞춤 HTML > - 트리거: 모든 페이지 (All Pages) 별도 파일 참조: `gtm-unified-tag.html` --- ## 6. GA4 연동 설정 ### 6-1. GA4 구성 태그 요약 | 태그 | Measurement ID | 트리거 | |------|---------------|--------| | GA4 구성 | 🔧 `G-XXXXXXXXXX` | All Pages | ### 6-2. DebugView 활성화 1. GA4 속성 → 관리 → `DebugView` 클릭 2. GTM 미리보기 모드가 활성화된 브라우저에서 티스토리 페이지 접속 3. DebugView 타임라인에서 실시간 이벤트 수신 확인 --- ## 7. 확인 및 테스트 ### 7-1. GTM 미리보기 모드 1. GTM 콘솔 → 우측 상단 `미리보기` 버튼 클릭 2. 테스트 URL 입력 (예: `https://incar-top1.tistory.com/`) 3. `Connect` 클릭 4. 새 탭에서 페이지가 열리며 GTM 패널 표시 ### 7-2. 이벤트별 테스트 체크리스트 | 이벤트 | 테스트 방법 | 확인 기준 | |--------|------------|----------| | `page_view` | 페이지 로드 | GTM 패널 Summary에 `page_view` 표시 | | `scroll_depth` | 50%, 90%까지 스크롤 | GTM 패널에 Scroll Depth 트리거 발화 확인 | | `form_start` | 폼 입력란 첫 클릭(포커스) | GTM 패널에 `form_start` 표시 | | `form_complete` | 폼 제출 버튼 클릭 | GTM 패널에 `form_complete` 표시 | | `phone_click` | ⚠️ 현재 tel: 링크 없음 — 테스트 불가 | 향후 링크 추가 후 테스트 | | `cta_button_click` | CTA 버튼 클릭 | GTM 패널에 `cta_button_click` 표시 | | `session_source` | `?utm_source=test&utm_medium=cpc` 붙여 접속 | GTM 패널에 `session_source` + 파라미터 값 표시 | ### 7-3. Facebook Pixel 중복 주의 > ⚠️ `incar-top1` 페이지에 `fbq('track','Lead')` 코드가 HTML에 내장되어 있습니다. > GTM으로 Facebook Pixel을 추가할 경우 `Lead` 이벤트가 중복 발화됩니다. 기존 인라인 코드 제거 후 GTM으로 통합 관리를 권장합니다. ### 7-4. 최종 게시 (Publish) 1. GTM 콘솔 → 우측 상단 `제출` 클릭 2. 버전 이름: `v1.0 - 인카 이벤트 7종 설치` 3. 설명: `page_view, scroll_depth, form_start, form_complete, phone_click, cta_button_click, session_source` 4. `게시` 클릭 --- *작성: 다그다(팀장) / 에인(UX/UI) | 기준일: 2026-03-22 | 버전: 1.0*