imhamburger 님의 블로그
A/B 테스트할 때는 어떤걸 쓸까 gtm과 gtag 본문
gtm(Google Tag Manager)과 gtag(Global Site Tag)는 모두 구글에서 제공하는 웹사이트 태깅 도구이지만, 목적과 사용 방식에 중요한 차이가 있다.
| 항목 | GTM | gtag |
| 목적 | 태그 관리 플랫폼 | 직접 삽입하는 태그 스크립트 |
| 설명 | 다양한 태그(예: GA, Google Ads 등)를 하나의 인터페이스(GTM 콘솔)에서 중앙 관리할 수 있는 도구 | 구글 제품(예: GA4, Google Ads 등)을 웹사이트에 직접 연동하기 위해 사용하는 자바스크립트 코드 |
| 사용 방식 | GTM 컨테이너 코드를 사이트에 1번만 삽입 후, 웹 UI에서 원하는 태그 추가/수정 | 각 구글 서비스마다 gtag.js 코드를 HTML에 직접 삽입해야 함 |
각각의 장단점이 있다.
GTM
- 장점
- 개발자 없이도 마케팅팀이 직접 태그 추가/수정 가능
- 버전 관리 및 디버깅 기능 제공
- 다양한 3rd-party 태그(GA 외에도 Meta Pixel, Hotjar 등) 통합 관리
- 단점
- 학습 곡선이 있음 (초보자에겐 설정이 복잡할 수 있음)
- 퍼포먼스 측면에서 약간의 오버헤드가 생길 수 있음
gtag.js
- 장점
- 간단하고 직관적인 코드 삽입
- 별도 UI 없이 빠르게 설치 가능
- 단점
- 각 페이지에 직접 수정 필요 → 유지 보수 어려움
- 여러 서비스 연동 시 코드가 복잡해짐
- 태그 관리 기능 부족 (UI 없음)
그럼 어떤 상황에서 써야할까?
gtag.js의 사용 용도
| 사용사례 | 설명 |
| Google Analytics(UA/GA4) 연결 | GA에 사용자 방문, 이벤트, 전자상거래 데이터 전송 |
| Google Ads 전환 추적 | 광고 클릭 → 구매 등 전환 추적 설정 |
| Google Ads 리마케팅 | 특정 행동을 한 사용자에게 광고 재노출 |
| 간단한 추적 | 한두 개의 구글 제품만 사용하는 단순 사이트에 적합 |
| 페이지별로 직접 코드 관리 가능할 때 | 개발자가 직접 HTML을 수정할 수 있는 경우 |
기억할 점: gtag.js는 개별 페이지마다 직접 코드 삽입이 필요하므로, 규모가 커질수록 유지보수가 어려워진다.
GTM (Google Tag Manager)의 사용 용도
| 사용 사례 | 설명 |
| Google Analytics, Google Ads, Facebook Pixel 등 통합 관리 | 다양한 추적 태그를 하나의 도구에서 관리 |
| 이벤트 기반 사용자 행동 추적 | 클릭, 스크롤, 페이지뷰, 전환 등 다양한 이벤트 설정 |
| 비개발자가 태그 관리 | 마케터나 데이터팀이 코드 수정 없이 UI에서 직접 태그 추가 가능 |
| A/B 테스트 태그 삽입 | 실험 도구나 테스트용 스크립트도 쉽게 삽입 가능 |
| 동적 값 전달 | 데이터 계층(dataLayer)을 통해 제품명, 가격, 카테고리 등의 값 전달 |
| 태그 버전 관리 및 디버깅 | 변경 이력 추적, 미리보기 기능 제공 |
기억할 점: 사이트 규모가 크거나 추적 항목이 많을 경우 GTM이 훨씬 효율적입니다.
요약
| 상황 | 추천도구 |
| 단순하게 GA나 Google Ads 추적만 할 것 | gtag.js |
| 여러 태그(다양한 플랫폼)를 통합 관리하고 싶음 | GTM |
| 마케팅팀이 태그를 자주 바꾸는 구조 | GTM |
| 개발 리소스 없이 태그를 운영하고 싶음 | GTM |
A/B 테스트를 할 때는 목적에 따라 gtag.js와 GTM(Google Tag Manager) 중 적합한 도구가 다를 수 있지만, 실무에서는 대부분 GTM을 사용하는 것이 유리하다고 한다.
Google Optimize는 2023년에 종료되었지만, 과거에는 GTM과 잘 연동되었고, 현재는 타 도구 Optimizely, VWO 등이 대체로 사용된다. 이런 도구들을 쉽게 연동할 수 있는 건 GTM이다.
이번에 회사에 A/B 테스트를 진행한다고해서 이것저것 리서치를 해봤는데 이미 GTM을 사용하고 있기도 하고 훨씬 구현하는게 수월할 것 같아 GTM으로 진행하기로 결정됐다.
코드 예제
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'ab_experiment_loaded',
'experiment_id': 'home_banner_test',
'variant': 'A' // 또는 'B'
});
</script>
→ GTM에서는 variant = 'A' 또는 'B' 조건을 트리거로 사용해 각각의 전환 이벤트를 추적 가능
태그별로 실험 그룹 제어
- A/B 그룹에 따라 서로 다른 콘텐츠 태그 삽입 (예: 다른 이미지, CTA 버튼 클릭 추적)
- 실험 결과를 GA4, BigQuery 등으로 전송
데이터 엔지니어쪽에서는 어떤 코드를 수정하거나 할 필요가 없지만? 참고로 알아두면 좋을 것 같아 정리해보았다.

'끄적끄적' 카테고리의 다른 글
| UI/UX 개선을 위한 A/B 테스트 (with GTM) (1) | 2025.06.25 |
|---|---|
| 컬럼형 DB ClickHouse?? (0) | 2025.06.19 |
| DBT unique_key 값 설정하기 (0) | 2025.05.23 |
| ERROR: Lambda is initializing your function (0) | 2025.05.11 |
| 인스타그램 API 에러... (Impressions를 더이상 제공하지 않는다..!) (0) | 2025.04.27 |
