GTM으로 전환 이벤트 추가하기

1. GTM 3요소 — 태그 · 트리거 · 변수

GTM의 모든 구현은 세 가지 블록의 조합입니다. 이 셋의 역할을 혼동하지 않는 게 출발점이에요.

한 줄로: “언제(트리거) 이런 값(변수)을 가지고 이걸(태그) 발동시켜줘”

2. 전환 태그 설치 전체 흐름

3. 실전 시나리오 4가지

시나리오 A: 감사 페이지 URL로 구매 전환 잡기 (가장 쉬움)

상황: 결제 완료 후 /order/complete URL로 이동하는 쇼핑몰. 이 페이지 방문 = 구매 1건.

1. 태그 > 새로 만들기 > "Google Ads 전환 추적"
   - 전환 ID / 라벨 입력
   - (선택) 전환 가치: 고정값 또는 {{dlv - value}}
   - 통화 코드: KRW

2. 트리거 > 새로 만들기 > "페이지 뷰"
   - 유형: "일부 페이지 뷰"
   - 조건: Page URL contains /order/complete

3. 저장 > 미리보기 > 실제 결제 완료 후 Tag Assistant에서 발동 확인

시나리오 B: 버튼 클릭으로 상담 신청 리드 잡기

상황: “상담 신청” 버튼(class="btn-consult")을 누르면 모달이 열리고 제출되는 구조. 클릭 자체를 전환으로 잡자.

1. 변수 > 구성 > 기본 제공 변수
   - "Clicks" 그룹의 Click Classes, Click ID, Click Element 모두 체크

2. 트리거 > 새로 만들기 > "클릭 - 모든 요소"
   - 유형: "일부 클릭"
   - 조건: Click Classes contains btn-consult

3. 태그 > 새로 만들기 > "Google Ads 전환 추적"
   - 해당 리드 전환의 ID/라벨 입력
   - 트리거: 방금 만든 클릭 트리거

4. 미리보기 > 버튼 클릭 후 "gtm.click" 이벤트에서 태그 발동 확인

시나리오 C: 폼 제출 전환 (기본 방식)

상황: 표준 HTML 폼이 있고, 제출 시 감사 페이지로 이동하지 않는다.

1. 트리거 > 새로 만들기 > "양식 제출"
   - "양식 유효성 검증 대기" 체크 (필수 필드 오류로 제출 실패한 경우 제외)
   - 일부 양식 > Form ID equals consult-form

2. 태그: Google Ads 전환 추적 (리드 카테고리)

3. 미리보기에서 "gtm.formSubmit" 이벤트가 잡히는지 확인

시나리오 D: dataLayer 이벤트로 SPA·AJAX·복합 행동 잡기 (가장 권장)

상황: React/Vue SPA이거나 AJAX로 제출되는 폼, 또는 결제값·주문 ID 같은 동적 데이터가 필요한 경우.

1) 개발자와의 “계약”

폼 제출 성공 또는 결제 완료 시점에 다음 코드를 넣어달라고 요청:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'purchase',
  value: 150000,
  currency: 'KRW',
  transaction_id: 'ORD-2026-00123',
  items: [{ id: 'SKU-A', name: '필라테스 4주권', price: 150000 }],
});

2) GTM 쪽 설정

변수 > 사용자 정의 > 새로 만들기
  - 유형: "데이터 영역 변수"
  - 변수 이름: dlv - value
  - 데이터 레이어 변수 이름: value
  (같은 방식으로 dlv - currency, dlv - transaction_id 생성)

트리거 > 새로 만들기 > "맞춤 이벤트"
  - 이벤트 이름: purchase

태그 > "Google Ads 전환 추적"
  - 전환 ID / 라벨
  - 전환 가치: {{dlv - value}}
  - 통화 코드: {{dlv - currency}}
  - 주문 ID: {{dlv - transaction_id}}  ← 중복 집계 방지
  - 트리거: 맞춤 이벤트 "purchase"

4. 데이터 레이어(dataLayer) 기본기

왜 dataLayer를 써야 하나?

• 정확성: URL·클릭 파싱은 사이트 구조가 바뀌면 깨지지만, dataLayer는 개발자와 합의된 “계약”이라 안정적
• 풍부한 값 전달: 주문 ID, 매출, 카테고리, 사용자 ID(해시) 같은 복잡한 데이터를 한 번에 전달
• SPA 대응: 라우터 변경 직후 푸시해서 가상 페이지뷰·전환을 정확히 잡음
• GA4와 공용: 같은 이벤트를 Ads 전환 + GA4 이벤트 + Meta 픽셀이 모두 소비 가능

표준 이벤트 이름 권장

행동	이벤트 이름	포함 필드
결제 완료	purchase	value, currency, transaction_id, items
결제 시작	begin_checkout	value, currency, items
장바구니 담기	add_to_cart	value, items
리드 전송	generate_lead	value (선택)
회원가입	sign_up	method
영상 재생	video_start	video_id

GA4 기본 이벤트 명명 규칙을 따르면 GA4와 Ads 양쪽에서 재사용할 수 있습니다.

5. SPA 대응 (React · Vue · Next.js 등)

문제

SPA는 라우터로 화면을 전환해도 브라우저의 페이지 로드가 일어나지 않음 → GTM의 “페이지 뷰” 트리거가 발동 안 됨.

해결 방법 (권장 순)

1. 라우터 훅 + dataLayer.push (best)
   • 라우터의 route change 이벤트에서 dataLayer.push({ event: 'virtual_pageview', page_path: '/new-path' })
   • GTM: 맞춤 이벤트 트리거 “virtual_pageview” + 데이터 영역 변수 page_path
2. History Change 트리거 (차선)
   • GTM 기본 제공 트리거. URL이 바뀌는 모든 경우에 발동
   • 빠르게 붙이기 좋지만 라우터 내부 로직이 복잡하면 중복 발동 위험

6. 미리보기(Preview) 모드로 검증

단계

1. GTM 우측 상단 “미리보기” 클릭
2. Tag Assistant 창이 뜨면 검증할 URL 입력 → “Connect”
3. 실제 사이트에서 의도한 행동 수행 (결제, 클릭, 폼 제출 등)
4. Tag Assistant의 왼쪽 이벤트 목록에서 해당 행동 이벤트 클릭
5. 중앙 “Tags Fired” 섹션에 우리 태그가 떴는지 확인
6. 태그 클릭 → Properties 탭에서 전달된 값(전환 ID·라벨·value·currency) 검증

미리보기에서 꼭 체크할 4가지

• 의도한 트리거만 발동했는가? (다른 페이지에서 실수로 발동 안 됐는지)
• 태그가 중복 발동되진 않았나?
• 값/통화가 올바르게 넘어가는가? (숫자인지, 문자열 "150000"인지)
• Transaction ID가 비어있지 않은가?

그다음 24~48시간 후 Google Ads 전환 보고서에서 실제 집계가 되는지 최종 확인합니다.

7. 게시(Publish)와 버전 관리

• 미리보기 OK → “제출” → 버전 이름·설명 입력 → “게시”
• 버전 이름 예시:
  • ✅ 2026-04-23 · 상담 전환 추가, 결제 통화 KRW 고정
  • ❌ update (무슨 변경인지 알 수 없음)
• 사고 발생 시 버전 관리 탭에서 이전 버전을 선택해 “현재 버전으로 설정” → 즉시 롤백
• 여러 명이 협업한다면 작업 공간(Workspace)을 나눠 PR처럼 격리해서 작업

8. 자주 발생하는 오류와 해결

증상	원인	해결
태그가 발동 안 함	트리거 조건 오타, 미리보기 연결 실패	Tag Assistant의 “Tags Not Fired”에서 조건 불일치 확인
전환이 2배로 집계	새로고침/뒤로가기, Ads+GA4 모두 기본 전환	Transaction ID 필드 추가, 기본 전환은 1개만 유지
전환값이 0원/없음	dataLayer 비어있음, 변수 매핑 오타	미리보기 Variables 탭에서 dlv - value 값 확인
SPA에서 URL 트리거 실패	페이지 로드 이벤트가 없음	dataLayer virtual_pageview 또는 History Change
모바일에서만 실패	ITP 쿠키 만료, 제3자 쿠키 차단	Enhanced Conversions 활성화
미리보기는 OK인데 Ads에 안 잡힘	반영 지연(최대 48h), 계정 미연결	24~48h 대기, Ads ↔ GTM 컨테이너 연결 확인

9. Enhanced Conversions (강화된 전환)

쿠키 기반 매칭이 약해진 지금(iOS ITP 등) 필수에 가까운 옵션입니다.

개념

전환 발생 시 해시된 이메일·전화번호를 같이 보내서 Google 로그인 사용자와 매칭 → 쿠키가 없어도 전환 집계.

GTM 설정 요약

1. Google Ads 전환 설정에서 Enhanced Conversions 활성화
2. dataLayer에 해시된 사용자 데이터 푸시

   dataLayer.push({
     event: 'purchase',
     user_data: {
       email: 'hashed...',   // SHA-256
       phone_number: 'hashed...'
     },
     value: 150000, currency: 'KRW', transaction_id: 'ORD-...'
   });

3. GTM 전환 태그 내 “사용자 제공 데이터” 섹션을 “Manual Configuration” 또는 “Code”로 설정, dataLayer 변수 매핑

10. 최종 체크리스트

• GTM 컨테이너가 모든 페이지에 설치돼 있는가?
• 주 전환(구매 또는 리드) 태그가 존재하는가?
• 트리거 조건이 최소한으로 좁혀져 있는가? (의도치 않은 발동 방지)
• 전환값·통화·Transaction ID가 전달되는가?
• 미리보기로 발동과 값을 검증했는가?
• Google Ads 전환 상태가 “운영 중”인가? (24~48h 후)
• Ads + GA4 기본 전환이 중복돼있지 않은가?
• Enhanced Conversions가 활성화돼 있는가?
• 버전 이름에 변경 내역을 명시했는가?

이해도 체크

짧은 퀴즈 4문항

0 / 4

1. Q1. GTM의 3요소 중 "언제 태그를 발동시킬지"를 정의하는 것은?

   • A.태그
   • B.트리거
   • C.변수
   • D.컨테이너

   태그 = 무엇을, 트리거 = 언제, 변수 = 어떤 값을. 세 요소의 역할이 다릅니다.

2. Q2. 결제 완료 후 같은 주문을 새로고침으로 두 번 카운트하는 것을 막으려면 GTM 전환 태그에 꼭 넣어야 하는 값은?

   • A.전환 가치(value)
   • B.통화 코드(currency)
   • C.주문 고유 ID(transaction_id)
   • D.사용자 이메일

   Google Ads는 같은 Transaction ID로 들어온 전환을 자동으로 중복 제거해줍니다.

3. Q3. React/Vue 같은 SPA에서 페이지 전환을 가장 정확히 측정하는 방법은?

   • A.기본 "페이지 뷰" 트리거를 그대로 사용
   • B.GTM 컨테이너를 각 라우트에 따로 설치
   • C.라우터 변경 시 dataLayer에 virtual_pageview 이벤트를 push하고 맞춤 이벤트 트리거 사용
   • D.GTM 대신 Google Analytics를 직접 붙인다

   SPA는 실제 페이지 로드가 없으므로 라우터 훅에서 dataLayer로 알려주는 게 가장 정확합니다. History Change는 차선책.

4. Q4. Enhanced Conversions(강화된 전환)에서 사용자 이메일을 GTM으로 넘길 때 지켜야 할 원칙은?

   • A.원문 그대로 전달한다
   • B.반드시 SHA-256으로 해시해서 전달한다
   • C.Base64 인코딩만 하면 된다
   • D.암호화 없이 쿠키에 저장한다

   개인정보보호 준수를 위해 해시는 필수. GTM의 자동 해시 옵션을 켜두면 안전합니다.

다시 풀기

여기까지 오면 운영 사이클의 측정 인프라는 완성입니다. 다음은 쌓인 데이터를 해석하는 쪽 → 검색어 & 품질 관리와 성과지표 읽기로 이어집니다.