[GTM 무료강의] GTM 미리보기 모드 화면 완벽 해부 2편 : 디버그 패널 8개 구성과 5개 기본 이벤트
핵심 요약 (한 줄 답변)
GTM 미리보기(디버그) 화면은 8개 부분으로 구성됩니다: 이벤트 타임라인·태그·변수·데이터 영역·동의·콘솔·헤더·컨테이너 세부정보. 페이지가 로드될 때마다 동의 초기화 → 초기화 → 컨테이너 로드 → DOM 사용 가능 → 창 로드 5개 기본 이벤트가 순서대로 뜹니다. 태그 탭에서는 태그가 실행/미실행된 이유(트리거 조건 충족 여부)를, 변수 탭에서는 각 변수의 확인된 값을 볼 수 있습니다.
이 글에서 알 수 있는 것
- GTM 미리보기 디버그 화면의 8개 구성 요소
- 모든 페이지에 항상 5개 기본 이벤트가 뜨는 이유와 각 이벤트의 의미
- 태그 탭에서 태그 실행/미실행 이유를 진단하는 법
- 트리거 조건 충족 여부(녹색 체크 vs 빨간 X) 읽는 법
- 태그 세부정보에서 '이름' vs '값' 전환하기
- 변수 탭에서 변수 값을 확인하고 {{}}로 사용하는 법
✳️ 난이도 : 초급~중급 | 소요 시간 : 약 11분 | 시리즈 : GTM 미리보기 모드 (2편 – 화면 구성)
이전 글 : 미리보기 모드 1편 – 개요/활성화
GTM 미리보기(디버그) 화면은 어떻게 구성되어 있나요?
지난 1편에서 미리보기 모드를 켜고 사이트에 연결했다면, 이번 2편에서는 디버그 화면에서 다루는 화면과 항목을 살펴봅니다. GTM 미리보기 모드는 8가지 주요 부분으로 구성됩니다.
| # | 구성 요소 | 표시 내용 |
| ① | 이벤트 타임라인 | 모든 이벤트(페이지 조회·양식 제출·클릭·스크롤 등) |
| ② | 태그 | 선택 이벤트에서 실행된/실행되지 않은 태그 |
| ③ | 변수 | 선택 이벤트의 변수 정보(유형·반환 데이터·확인된 값) |
| ④ | 데이터 영역 | 선택 이벤트에 데이터 영역으로 푸시된 데이터 |
| ⑤ | 동의 | Google 동의 모드 사용 시 동의 상태 |
| ⑥ | 콘솔 | 숫자가 뜨면 클릭해 오류 원인 확인 |
| ⑦ | 헤더 | 미리보기 연결 상태(웹사이트 창 연결 여부) |
| ⑧ | 컨테이너 세부정보 | 컨테이너 이름·ID·구현 방식·버전·환경 |
이 중 핵심인 이벤트 타임라인·태그·변수를 자세히 살펴봅니다.
① 이벤트 타임라인 : 모든 이벤트가 여기 표시됩니다
모든 이벤트는 미리보기 모드 왼쪽의 이벤트 타임라인에 표시됩니다.
페이지가 로드될 때마다 5개의 이벤트가 목록에 표시됩니다: 동의 초기화, 초기화, 컨테이너 로드, DOM 사용 가능, 창 로드.
| 표시 | 의미 |
| ① 첫 번째 페이지 로드 | 5개 기본 이벤트 표시 |
| ② 페이지 이동(1→2페이지) | 구분되어 새로 표시됨 |
왜 모든 페이지에 항상 5개 이벤트가 있나요?
GTM 컨테이너가 로드되는 과정에서 순서대로 발생하는 기본 이벤트이기 때문입니다. 각 이벤트의 의미는 다음과 같습니다.
| 순서 | 이벤트(내부 이름) | 발생 순간 |
| ① | 동의 초기화 (gtm.init_consent) | 동의 관련 설정을 로드하는 순간 (쿠키 동의 배너·동의 모드 태그 등) |
| ② | 초기화 (gtm.init) | 자바스크립트 라이브러리를 로드하는 주요 추적 코드 실행 순간 (Google 태그 등) |
| ③ | 컨테이너 로드 (gtm.js) | 구성 태그가 아닌 페이지뷰 관련 태그를 실행할 수 있는 순간 |
| ④ | DOM 사용 가능 (gtm.dom) | HTML이 다운로드되고 문서가 렌더링되어 방문자가 요소를 보기 시작할 때 |
| ⑤ | 창 로드 (gtm.load) | 자바스크립트 포함 모든 요소 로드가 완료될 때 |
✅ 참고 : 예전에는 컨테이너 로드(gtm.js) 가 가장 먼저 발생하는 이벤트였지만, 지금은 동의 초기화·초기화가 그 앞에 발생합니다.
② 태그 탭 : 태그가 실행/미실행된 이유를 확인합니다
태그 탭에는 사용 가능한 모든 태그가 '실행된 태그'와 '실행되지 않은 태그' 두 그룹으로 표시됩니다. 이 섹션의 가장 큰 장점은 특정 태그가 실행되거나 실행되지 않은 '이유'를 확인할 수 있다는 것입니다.
| 순서 | 동작 |
| ① | 이벤트 타임라인에서 이벤트 선택 |
| ② | 태그 탭에서 실행된 태그 수 확인 → 태그 클릭 시 세부정보 표시 |
태그 세부정보 읽기
태그를 클릭하면 아래 정보가 표시됩니다.
| 항목 | 내용 |
| 태그 속성 | 태그 유형·실행 상태 등 기본 속성 |
| 태그의 트리거 실행 | 트리거 조건 상태 — 녹색 체크 = 충족, 빨간 X = 미충족 |
| 트리거 차단 | 차단 트리거 표시 |
이름 ↔ 값 전환
태그 세부정보 오른쪽 상단에서 "이름"과 "값" 을 전환할 수 있습니다.
- "이름" 선택 → 실제 변수·설정 이름 표시
- "값" 선택 → 확인된 실제 값 표시
이를 통해 트리거의 값이 요구 사항과 일치하는지 빠르게 확인할 수 있습니다.
③ 변수 탭: 각 변수의 실제 값을 확인합니다
변수 탭에는 선택한 이벤트의 변수에 대한 자세한 정보가 표시됩니다.
| 순서 | 동작 |
| ① | 변수를 확인하고 싶은 이벤트 클릭 |
| ② | 변수 탭으로 이동 |
| ③ | 확인하려는 변수의 값 확인 |
이렇게 확인한 변수는 언제든지 사용할 수 있으며, GTM 설정에서 중괄호 {{}}로 묶어 포함합니다. (예: {{Click URL}})
➡️ 다음 예고 : 이 외에도 미리보기 모드에서는 여러 데이터를 확인할 수 있습니다. 데이터 영역(Data Layer) 설정 및 오류 체크 등은 별도 강의에서 다루겠습니다.
자주 묻는 질문 (FAQ)
Q. GTM 미리보기 디버그 화면은 몇 개 부분으로 구성되나요?
A. 8개입니다: 이벤트 타임라인·태그·변수·데이터 영역·동의·콘솔·헤더·컨테이너 세부정보.
Q. 모든 페이지에 왜 항상 5개 이벤트가 뜨나요?
A. GTM 컨테이너 로드 과정에서 순서대로 발생하는 기본 이벤트이기 때문입니다: 동의 초기화 → 초기화 → 컨테이너 로드 → DOM 사용 가능 → 창 로드.
Q. 태그가 실행되지 않은 이유를 어떻게 확인하나요?
A. 태그 탭에서 해당 태그를 클릭하면 트리거 실행 상태가 보입니다. 녹색 체크는 조건 충족, 빨간 X는 미충족을 의미합니다. 이를 통해 왜 실행/미실행됐는지 알 수 있습니다.
Q. 태그 세부정보의 '이름'과 '값'은 무엇이 다른가요?
A. '이름' 은 변수·설정의 이름을, '값' 은 실제로 확인된 값을 보여줍니다. 오른쪽 상단에서 전환하며, 트리거 값이 조건과 맞는지 확인할 때 유용합니다.
Q. 컨테이너 로드가 첫 이벤트 아니었나요?
A. 예전에는 gtm.js(컨테이너 로드)가 가장 먼저였지만, 현재는 동의 초기화·초기화가 그 앞에 발생합니다.
Q. 변수 값은 어디서 확인하나요?
A. 변수 탭에서 이벤트를 선택하면 각 변수의 확인된 값이 표시됩니다. 이 변수는 GTM 설정에서 {{변수명}} 형태로 사용합니다.
Q. 콘솔 탭에 숫자가 떠 있어요.
A. 오류 개수를 의미합니다. 숫자를 클릭하면 오류 원인을 확인할 수 있습니다.
요약 (한 장 정리)
- 디버그 화면 8개 구성 : 이벤트 타임라인·태그·변수·데이터 영역·동의·콘솔·헤더·컨테이너 세부정보
- 기본 이벤트 5개(순서) : 동의 초기화 → 초기화 → 컨테이너 로드 → DOM 사용 가능 → 창 로드
- 태그 탭 : 실행/미실행 태그 + 이유(트리거 녹색 체크=충족 / 빨간 X=미충족)
- 이름 ↔ 값 전환 : 태그 세부정보 우측 상단에서 실제 값 확인
- 변수 탭 : 각 변수의 확인된 값 → 설정에서 {{변수명}} 로 사용
- 다음 : 데이터 영역(Data Layer) 설정·오류 체크는 별도 강의
작성 : 디애널리틱스(The Analytics) · 구글애널리틱스를 활용하여 기업의 마케팅 성과를 향상시키는 방법을 연구합니다.