[GTM 무료강의] GTM 미리보기 모드 화면 완벽 해부 2편 : 디버그 패널 8개 구성과 5개 기본 이벤트

핵심 요약 (한 줄 답변) 

GTM 미리보기(디버그) 화면은 8개 부분으로 구성됩니다: 이벤트 타임라인·태그·변수·데이터 영역·동의·콘솔·헤더·컨테이너 세부정보. 페이지가 로드될 때마다 동의 초기화 → 초기화 → 컨테이너 로드 → DOM 사용 가능 → 창 로드 5개 기본 이벤트가 순서대로 뜹니다. 태그 탭에서는 태그가 실행/미실행된 이유(트리거 조건 충족 여부)를, 변수 탭에서는 각 변수의 확인된 값을 볼 수 있습니다.

 

이 글에서 알 수 있는 것

• GTM 미리보기 디버그 화면의 8개 구성 요소
• 모든 페이지에 항상 5개 기본 이벤트가 뜨는 이유와 각 이벤트의 의미
• 태그 탭에서 태그 실행/미실행 이유를 진단하는 법
• 트리거 조건 충족 여부(녹색 체크 vs 빨간 X) 읽는 법
• 태그 세부정보에서 '이름' vs '값' 전환하기
• 변수 탭에서 변수 값을 확인하고 {{}}로 사용하는 법

✳️ 난이도 : 초급~중급 | 소요 시간 : 약 11분 | 시리즈 : GTM 미리보기 모드 (2편 – 화면 구성)

이전 글 : 미리보기 모드 1편 – 개요/활성화

 

GTM 미리보기(디버그) 화면은 어떻게 구성되어 있나요?

지난 1편에서 미리보기 모드를 켜고 사이트에 연결했다면, 이번 2편에서는 디버그 화면에서 다루는 화면과 항목을 살펴봅니다. GTM 미리보기 모드는 8가지 주요 부분으로 구성됩니다.

 

GTM 미리보기 디버그 화면의 8개 구성 요소 위치를 표시한 화면

#	구성 요소	표시 내용
①	이벤트 타임라인	모든 이벤트(페이지 조회·양식 제출·클릭·스크롤 등)
②	태그	선택 이벤트에서 실행된/실행되지 않은 태그
③	변수	선택 이벤트의 변수 정보(유형·반환 데이터·확인된 값)
④	데이터 영역	선택 이벤트에 데이터 영역으로 푸시된 데이터
⑤	동의	Google 동의 모드 사용 시 동의 상태
⑥	콘솔	숫자가 뜨면 클릭해 오류 원인 확인
⑦	헤더	미리보기 연결 상태(웹사이트 창 연결 여부)
⑧	컨테이너 세부정보	컨테이너 이름·ID·구현 방식·버전·환경

이 중 핵심인 이벤트 타임라인·태그·변수를 자세히 살펴봅니다.

 

① 이벤트 타임라인 : 모든 이벤트가 여기 표시됩니다

모든 이벤트는 미리보기 모드 왼쪽의 이벤트 타임라인에 표시됩니다.

 

GTM 이벤트 타임라인에 5개 기본 이벤트와 페이지 이동이 표시된 화면

페이지가 로드될 때마다 5개의 이벤트가 목록에 표시됩니다: 동의 초기화, 초기화, 컨테이너 로드, DOM 사용 가능, 창 로드.

표시	의미
① 첫 번째 페이지 로드	5개 기본 이벤트 표시
② 페이지 이동(1→2페이지)	구분되어 새로 표시됨

 

왜 모든 페이지에 항상 5개 이벤트가 있나요?

GTM 컨테이너가 로드되는 과정에서 순서대로 발생하는 기본 이벤트이기 때문입니다. 각 이벤트의 의미는 다음과 같습니다.

순서	이벤트(내부 이름)	발생 순간
①	동의 초기화 (gtm.init_consent)	동의 관련 설정을 로드하는 순간 (쿠키 동의 배너·동의 모드 태그 등)
②	초기화 (gtm.init)	자바스크립트 라이브러리를 로드하는 주요 추적 코드 실행 순간 (Google 태그 등)
③	컨테이너 로드 (gtm.js)	구성 태그가 아닌 페이지뷰 관련 태그를 실행할 수 있는 순간
④	DOM 사용 가능 (gtm.dom)	HTML이 다운로드되고 문서가 렌더링되어 방문자가 요소를 보기 시작할 때
⑤	창 로드 (gtm.load)	자바스크립트 포함 모든 요소 로드가 완료될 때

✅ 참고 : 예전에는 컨테이너 로드(gtm.js) 가 가장 먼저 발생하는 이벤트였지만, 지금은 동의 초기화·초기화가 그 앞에 발생합니다.

 

② 태그 탭 : 태그가 실행/미실행된 이유를 확인합니다

태그 탭에는 사용 가능한 모든 태그가 '실행된 태그'와 '실행되지 않은 태그' 두 그룹으로 표시됩니다. 이 섹션의 가장 큰 장점은 특정 태그가 실행되거나 실행되지 않은 '이유'를 확인할 수 있다는 것입니다.

 

GTM 태그 탭에서 실행된 태그와 세부정보를 확인하는 화면

순서	동작
①	이벤트 타임라인에서 이벤트 선택
②	태그 탭에서 실행된 태그 수 확인 → 태그 클릭 시 세부정보 표시

 

태그 세부정보 읽기

태그를 클릭하면 아래 정보가 표시됩니다.

항목	내용
태그 속성	태그 유형·실행 상태 등 기본 속성
태그의 트리거 실행	트리거 조건 상태 — 녹색 체크 = 충족, 빨간 X = 미충족
트리거 차단	차단 트리거 표시

 

이름 ↔ 값 전환

GTM 태그 세부정보에서 이름과 값을 전환하는 화면

태그 세부정보 오른쪽 상단에서 "이름"과 "값" 을 전환할 수 있습니다.

• "이름" 선택 → 실제 변수·설정 이름 표시
• "값" 선택 → 확인된 실제 값 표시

이를 통해 트리거의 값이 요구 사항과 일치하는지 빠르게 확인할 수 있습니다.

 

③ 변수 탭: 각 변수의 실제 값을 확인합니다

변수 탭에는 선택한 이벤트의 변수에 대한 자세한 정보가 표시됩니다.

 

GTM 변수 탭에서 각 변수의 확인된 값을 확인하는 화면

순서	동작
①	변수를 확인하고 싶은 이벤트 클릭
②	변수 탭으로 이동
③	확인하려는 변수의 값 확인

이렇게 확인한 변수는 언제든지 사용할 수 있으며, 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) · 구글애널리틱스를 활용하여 기업의 마케팅 성과를 향상시키는 방법을 연구합니다.