imhamburger 님의 블로그

A/B 테스트할 때는 어떤걸 쓸까 gtm과 gtag 본문

끄적끄적

A/B 테스트할 때는 어떤걸 쓸까 gtm과 gtag

imhamburger 2025. 5. 29. 17:20

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 등으로 전송

데이터 엔지니어쪽에서는 어떤 코드를 수정하거나 할 필요가 없지만? 참고로 알아두면 좋을 것 같아 정리해보았다.