GA4 + GTM 마스터 노트 시리즈 2편. 태그·트리거·변수의 What-When-Info 모델, 컨테이너 설치 — head 스니펫 + body iframe, GA4 Google Tag와 Event Tag 차이, 클릭·폼·맞춤 이벤트 트리거 설정, 데이터레이어 변수와 DOM 변수 활용, Preview 모드 디버깅과 워크스페이스 버전 관리까지.
이 글은 GA4 + GTM 마스터 노트 시리즈의 두 번째 편입니다. 1편(입문)에서 GA4의 이벤트·세션·사용자 모델을 잡았다면, 이번엔 그 모델을 실제로 추적하는 도구 — Google Tag Manager 입니다.
GA4를 직접 코드로만 구현하면 한 가지 변경사항마다 개발자에게 부탁해야 해요. 마케터·분석가가 이벤트 하나 추가하려고 매번 배포 일정을 잡는 게 비효율의 정점입니다. GTM은 이 문제를 해결하는 태그 관리 시스템이에요.
이번 편의 목표 — 태그·트리거·변수 세 단어를 손에 잡히게 만들기. 이 세 개념이 잡히면 3편 이벤트 구현부터 5편 이커머스까지 같은 패턴이 반복됩니다.
처음 GTM이 어렵게 느껴지는 이유
이유는 두 가지예요.
첫째, 세 가지 추상 개념이 한꺼번에 들어옵니다. 태그가 뭐고 트리거가 뭐고 변수가 뭔지 한 번에 안 들어와요. 그리고 이 셋이 서로 참조하면서 동작하니까 하나만 빠져도 작동이 안 되는데, 어디가 문제인지 디버깅이 처음엔 막막합니다.
둘째, GTM 인터페이스가 여러 단계로 나뉘어 있어요. 워크스페이스에서 변경 → Preview로 테스트 → Submit으로 버전 생성 → Publish로 라이브 반영. 한 단계라도 빼먹으면 사용자에게 안 보이는데, 처음엔 어느 버튼이 진짜 적용 버튼인지 헷갈립니다.
해결법은 한 가지예요. GTM = What-When-Info 모델 한 줄로 외우세요. 무엇을(태그) 언제(트리거) 어떤 정보로(변수) 실행할지 — 이 세 질문에 답하는 게 모든 GTM 작업입니다.
What-When-Info 모델 — GTM 사고법의 핵심
GTM의 모든 동작은 세 질문에 답하는 거예요.
What (태그) → 무엇을 할 것인가?
When (트리거) → 언제 할 것인가?
Info (변수) → 어떤 정보와 함께?
예시 1 — 기본 페이지뷰
What: GA4 측정 코드 실행 (Google Tag)
When: 모든 페이지 로드 시 (All Pages)
Info: Measurement ID = G-XXXXXXXXXX
예시 2 — 상품 클릭 추적
What: GA4 Event 'product_click' 전송
When: 상품 이미지 클릭 시 (Click - All Elements + Click Classes 조건)
Info: 클릭된 상품의 ID·이름·카테고리 (데이터레이어 변수)
이 모델만 머리에 박아두면 어떤 추적 요구사항도 What/When/Info 세 줄로 분해 가능해요.
GTM 계층 구조와 컨테이너
GTM 계정 (Account)
└── 컨테이너 (Container, GTM-XXXXXXX)
├── 태그 (Tags)
├── 트리거 (Triggers)
└── 변수 (Variables)
| 계층 | 역할 |
|---|---|
| 계정 | 회사·조직 단위 |
| 컨테이너 | 사이트 하나당 하나 (Container ID: GTM-XXXXXXX) |
여기서 시험 함정이 하나 있어요. GTM 컨테이너 ID는 GA4 Measurement ID와 다릅니다. GTM은 GTM-XXXXXXX 형식, GA4는 G-XXXXXXXXXX 형식. 둘이 헷갈리면 사이트가 추적 안 돼요.
GTM 설치 — head + body 두 군데
GTM 컨테이너 스니펫은 두 부분으로 나뉘어요.
<!-- 1. head 안 (가능한 한 위쪽) -->
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
</head>
<!-- 2. body 시작 직후 (JavaScript 비활성 사용자용 noscript) -->
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
</body>
WordPress 설치 위치
// header.php에서 wp_head() 바로 위
<?php wp_head(); ?>
// body 시작 직후
<?php wp_body_open(); ?>
설치 확인
- GTM 인터페이스에서 Preview 클릭
- 사이트 URL 입력 → Connect
- "Tag Assistant Connected" 메시지 확인
여기서 시험 함정이 하나 있어요. head 스니펫은 가능한 한 위쪽에 박아야 합니다. 페이지 로드 초기에 GTM이 발동돼야 모든 트리거가 정상 작동해요. 다른 스크립트(jQuery 등)보다 뒤에 두면 일부 자동 이벤트(gtm.dom, gtm.load)가 누락될 수 있습니다.
태그 (Tags) — 무엇을 할 것인가
태그는 실제로 실행되는 코드/액션이에요.
| 태그 유형 | 용도 |
|---|---|
| Google Tag | GA4 기본 연결 (Measurement ID 설정) |
| GA4 Event | GA4 이벤트 전송 |
| Custom HTML | 직접 작성한 HTML/JavaScript |
| Custom Image | 픽셀 이미지 태그 (Facebook 등) |
GA4 Google Tag — 기본 연결의 시작
GTM → Tags → New
→ Tag Configuration: Google Analytics → Google Tag
→ Tag ID: G-XXXXXXXXXX (GA4 Measurement ID)
→ Trigger: All Pages
→ 저장
이 한 태그가 모든 페이지에 GA4 페이지뷰를 발생시키는 기본 연결이에요. 이게 빠지면 GA4가 텅 빈 보고서만 보여줍니다.
GA4 Event Tag — 커스텀 이벤트
GTM → Tags → New
→ Tag Configuration: Google Analytics → GA4 Event
→ Configuration Tag: [위에서 만든 Google Tag 선택]
→ Event Name: product_click
→ Event Parameters:
- product_id: {{DLV - product_id}}
- product_name: {{DLV - product_name}}
→ Trigger: [관련 트리거 선택]
→ 저장
여기서 정말 중요한 시험 함정 — GA4 Event Tag는 Google Tag를 참조해야 합니다. Configuration Tag에 위에서 만든 Google Tag를 지정해야 해요. 이게 없으면 이벤트가 어느 GA4 속성으로 갈지 모르고 발송이 실패합니다.
Custom HTML — 직접 코드 작성
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'custom_event',
'user_data': {
'add_to_cart': 'yes'
}
});
</script>
복잡한 로직이나 다른 추적 도구(Facebook Pixel·Hotjar 등)를 박을 때 사용. 다만 자유도가 높은 만큼 위험도 커요 — JavaScript 오류가 사이트 전체를 망가뜨릴 수 있습니다.
트리거 (Triggers) — 언제 할 것인가
트리거는 태그가 발동되는 조건이에요.
| 트리거 | 발동 시점 |
|---|---|
| Page View | 페이지 로드 시작 (DOM 준비 전) |
| DOM Ready | DOM 완전 로드 후 |
| Window Loaded | 모든 리소스(이미지·스크립트) 로드 후 |
| Click - All Elements | 모든 요소 클릭 |
| Click - Just Links | 링크(<a>) 클릭 |
| Form Submission | 폼 제출 |
| Custom Event | 데이터레이어 이벤트 발생 |
| Scroll Depth | 스크롤 깊이 도달 |
| Timer | 일정 시간 경과 |
페이지뷰 트리거
Trigger Type: Page View
Fires On: All Pages (기본값)
특정 페이지만 추적하려면:
Fires On: Some Page Views
Page Path contains /checkout
클릭 트리거 — 특정 요소만
Trigger Type: Click - All Elements
Fires On: Some Clicks
Condition: Click Classes contains product-image
조건에 자주 쓰이는 변수:
| 변수 | 의미 |
|---|---|
Click Element |
클릭된 DOM 요소 자체 |
Click Classes |
요소의 CSS 클래스 |
Click ID |
요소의 ID 속성 |
Click URL |
링크의 href |
Click Text |
요소 내부 텍스트 |
폼 제출 트리거
Trigger Type: Form Submission
Wait for Tags: 체크 (폼 제출 전 태그 실행 보장)
Check Validation: 체크 (유효한 폼만 추적)
Fires On: Some Forms
Form ID equals contact-form
여기서 시험 함정이 하나 있어요. Wait for Tags 옵션을 안 켜면 폼 제출 직전에 GA4 이벤트 전송이 끊길 수 있어요. 사용자가 Submit 버튼 누르고 페이지가 리디렉션되는 짧은 순간 사이에 이벤트가 사라지는 함정. 폼 추적엔 거의 항상 켜는 게 안전합니다.
Custom Event 트리거 — 데이터레이어 감지
Trigger Type: Custom Event
Event Name: add_to_cart
JavaScript에서 dataLayer.push({event: 'add_to_cart'}) 호출하면 발동. GTM과 사이트 코드의 가장 흔한 연결 패턴 이에요.
변수 (Variables) — 어떤 정보로
변수는 트리거 조건이나 태그 매개변수에 쓰이는 동적 값이에요.
내장 변수 (Built-in Variables)
GTM이 기본 제공하는 변수들. Variables → Configure에서 활성화.
페이지 관련:
- Page URL — 현재 페이지 전체 URL
- Page Path — URL 경로 (/products/123)
- Page Hostname — 도메인 (example.com)
클릭 관련:
- Click Element, Click Classes, Click ID, Click Target, Click Text, Click URL
폼 관련:
- Form Element, Form ID, Form Target
데이터레이어 변수 — GTM 작업의 절반
Variables → New → Variable Configuration
→ Data Layer Variable
→ Data Layer Variable Name: product_id
→ Data Layer Version: Version 2 (권장)
JavaScript에서 데이터레이어로 푸시한 값을 GTM이 변수로 받습니다.
// 페이지에서 데이터레이어 푸시
dataLayer.push({
'event': 'product_click',
'product_id': 'SKU-001',
'product_name': 'Blue T-Shirt'
});
// GTM에서는 {{DLV - product_id}} 변수로 'SKU-001' 접근
JavaScript 변수 — 동적 계산
function() {
var cartElement = document.getElementById('cart-total');
if (cartElement) {
return cartElement.innerText;
}
return '';
}
DOM 요소 변수 — 페이지에서 직접 추출
Variables → New → DOM Element
→ Selection Method: ID
→ Element ID: cart-total
→ Attribute Name: innerText
여기서 정말 중요한 시험 함정 — 변수가 빈 값을 반환하는 자리에서 디버깅 80%가 걸려요. Page Path가 /checkout인 자리에서 트리거가 발동을 안 한다고 하소연하기 전에, Preview 모드의 Variables 탭에서 실제 값이 무엇인지 먼저 확인하세요. 대소문자·공백·후행 슬래시 한 글자 차이로 매칭이 안 되는 경우가 흔합니다.
프리뷰 모드 — 디버깅의 핵심
GTM → Preview → 사이트 URL 입력 → Connect
Preview 모드 활성화 시 Tag Assistant 창이 열리고, 사이트에 띄워진 모든 GTM 활동을 실시간으로 볼 수 있어요.
| Tab | 확인 가능 항목 |
|---|---|
| Tags Fired | 발동된 태그 목록 |
| Tags Not Fired | 미발동 태그와 그 이유 |
| Variables | 현재 변수 값들 |
| Data Layer | 데이터레이어 이벤트 흐름 |
GA4 DebugView 연동
Preview 모드 활성 상태에서 GA4 Admin → DebugView를 열면 이벤트가 실시간으로 표시됩니다.
GTM Preview ON → 사이트에서 액션 수행
↓
GA4 DebugView에서 즉시 확인 (이벤트 + 매개변수)
여기서 시험 함정이 하나 있어요. DebugView는 GTM Preview 모드 또는 Chrome 확장 프로그램(GA Debugger) 활성화 상태에서만 작동해요. 일반 사용자 트래픽은 표시되지 않습니다. 디버깅용 도구지 모니터링 도구가 아니에요.
워크스페이스와 게시 흐름
GTM의 변경 사항은 즉시 라이브에 반영되지 않아요.
변경 → 워크스페이스(임시 저장) → Preview 테스트 → Submit → Publish (라이브 반영)
Submit 단계
- 버전 이름 입력 (예: "GA4 product_click 추가")
- 변경 사항 설명 작성
- Publish 클릭 → 라이브 환경에 즉시 반영
버전 롤백
GTM → Versions → 원하는 버전 선택 → Publish
문제 발생 시 이전 버전으로 즉시 복구 가능. 여기서 시험 함정이 하나 있어요. 버전 이름·설명 작성을 귀찮아서 비워두면 나중에 어느 버전이 무엇이었는지 안 보입니다. 평생 후회하지 않으려면 변경 한 줄 설명은 항상 적어두세요.
환경 (Environments) — 스테이징과 프로덕션 분리
| 환경 | 용도 |
|---|---|
| Live | 실제 사이트 (기본 환경) |
| Latest | 최신 미발행 변경 |
| Custom | 개발/스테이징 |
Admin → Environments → New → Custom
→ Environment Name: Staging
→ URL: https://staging.example.com
→ 스니펫 복사 → 스테이징 사이트에 적용
스테이징 환경의 GTM 스니펫은 라이브와 다른 gtm_auth 파라미터가 들어가서, 테스트 데이터가 라이브 GA4 속성에 섞이지 않아요. 7편(베스트 프랙티스)에서 자세히.
GTM과 GA4 연결 흐름 — 한 그림
사이트 (HTML/PHP)
│
├── GTM 스니펫 (head + body)
↓
GTM 컨테이너 로드
│
├── Trigger: All Pages
↓
Google Tag (Measurement ID: G-XXXXXXXXXX)
│
↓
GA4 서버로 데이터 전송
│
↓
GA4 보고서 반영
이벤트 추적 흐름은 한 단계 더.
사용자가 상품 이미지 클릭
↓
GTM Click Trigger 발동 (Click Classes contains 'product-image')
↓
GA4 Event 태그 실행 (Event Name: product_click)
↓
이벤트 매개변수 수집 ({{Click Classes}}, {{DLV - product_id}})
↓
GA4로 이벤트 전송
↓
GA4 Reports → Events에 반영
모범 사례 — 네이밍 컨벤션
대규모 사이트가 되면 태그·트리거·변수가 수십~수백 개로 늘어요. 네이밍이 안 잡히면 관리 불가능.
태그 네이밍
GA4 - [이벤트 유형] - [대상]
GA4 - Page View - All Pages
GA4 - Event - Product Click
GA4 - Event - Add to Cart
GA4 - Event - Purchase
트리거 네이밍
[이벤트 유형] - [조건]
Click - Product Image
Form Submission - Contact Form
Custom Event - Add to Cart
Page View - Checkout
변수 네이밍
DLV - [변수명] → 데이터레이어 변수
JS - [변수명] → JavaScript 변수
DOM - [변수명] → DOM 요소 변수
URL - [변수명] → URL 파라미터 변수
디버깅 체크리스트
- GTM 스니펫이 모든 페이지의 head/body에 있나?
- Preview 모드에서 태그가 발동되나?
- 데이터레이어 이벤트가 올바르게 푸시되나?
- GA4 DebugView에서 이벤트가 보이나?
- Submit 후 Live에 반영됐나?
시험 직전 한 번 더 — 자주 헷갈리는 함정 모음
여기까지가 2편의 핵심입니다. 시험 직전 또는 실무에서 헷갈릴 때 다시 펼쳐 볼 수 있게 압축 노트로 마무리할게요.
- GTM = What-When-Info (태그·트리거·변수)
- GTM ID(GTM-XXXXXXX) ≠ GA4 ID(G-XXXXXXXXXX) — 헷갈리면 추적 안 됨
- 컨테이너 스니펫 = head 안 + body 시작 두 군데
- head 스니펫은 가능한 한 위쪽에 박기
- 4가지 태그 — Google Tag / GA4 Event / Custom HTML / Custom Image
- Google Tag = GA4 기본 연결, All Pages 트리거 필수
- GA4 Event Tag는 Configuration Tag(Google Tag)를 참조해야
- 트리거 — Page View / DOM Ready / Window Loaded 차이
- DOM Ready = DOM만, Window Loaded = 이미지·스크립트까지
- Click 변수 — Click Element/Classes/ID/Text/URL
Wait for Tags= 폼 제출 시 거의 항상 켜기- Custom Event 트리거 =
dataLayer.push({event: '...'})감지 - 데이터레이어 변수 =
{{DLV - 변수명}} - DOM 요소 변수 = ID·CSS Selector + Attribute
- 변수 빈 값 = 디버깅 80% (Variables 탭 먼저 확인)
- Preview 모드 = Tag Assistant + 4개 탭(Tags Fired/Not Fired/Variables/Data Layer)
- DebugView는 Preview 모드 또는 GA Debugger 확장에서만
- 워크스페이스 → Preview → Submit → Publish (마지막이 진짜 적용)
- 버전 이름·설명 작성 필수 (롤백 시 후회 X)
- 스테이징 환경 = 별도 컨테이너 ID·gtm_auth로 분리
- 네이밍 —
GA4 - [유형] - [대상],DLV - 이름 - 태그 발동 안 됨 = Preview Tags Not Fired에서 이유 확인
- JavaScript 오류는 Console에서 빨간 에러로 즉시 잡힘
시리즈 다른 편
같은 시리즈의 다른 글들도 같은 톤으로 묶어 정리되어 있어요. 2편 GTM 도구가 잡히면 3편부터 본격 이벤트 구현이 같은 패턴 반복으로 보입니다.
- 1편 — GA4 입문 (이벤트·세션·사용자 모델)
- 2편 — GTM 설정 (현재 글)
- 3편 — GA4 이벤트 구현
- 4편 — 전환 이벤트와 잠재고객
- 5편 — 이커머스 추적 (Enhanced Ecommerce)
- 6편 — 탐색 보고서·Looker Studio·BigQuery
- 7편 — 디버깅과 모범 사례
공식 문서: Google Tag Manager Help Center와 GTM Templates Gallery에서 더 많은 템플릿을 가져올 수 있어요.
다음 글(3편)에서는 자동 수집 이벤트·향상된 측정·커스텀 이벤트 — 세 갈래로 GA4 이벤트 구현을 풀어 갑니다. 데이터 속성·전역 변수·로컬 스토리지를 활용한 데이터 추출 패턴까지.