0. 구글 태그 매니저(GTM)란?
구글 태그 매니저, GTM(Google Tag Manager)이란?
구글 태그 매니저, GTM(Google Tag Manager)이란?
1. 구글 태그 매니저(Google Tag Manager)란?웹사이트에서 다양한 분석도구(구글 애널리틱스, 페이스북 픽셀, 전환 스크립트 등)나 광고 추적 코드를 사용하려면각 코드(스크립트)를 직접 웹페이지에
ad-sunbae.tistory.com
1. 데이터 레이어란?
데이터 레이어(Data Layer)는 웹사이트나 앱에서 발생하는 다양한 이벤트와 관련 정보를 일관성 있게 담아두는 객체(또는 배열)를 말합니다.
보통은 Google Tag Manager(GTM)에서 window.dataLayer라는 전역 배열을 사용해 구현하지만,
사실상 다른 태그 매니저나 마케팅·분석 솔루션(예: Tealium IQ, Adobe Launch 등)에서도 유사하게 사용되는 보편적 구조입니다.
데이터 레이어를 통해 이벤트와 데이터를 사이트(또는 앱)에서 GTM으로 보내주면,
마케터는 GTM 인터페이스에서 트리거, 태그, 변수 등을 설정하여 이 정보를 다양하게 활용할 수 있습니다.
간단히 ‘데이터 레이어에서 이벤트와 값을 가져와, 필요한 태그를 발동하거나, 분석 도구로 전송하는 과정’이라고 생각하시면 됩니다.
데이터 레이어를 통해 주로 구현하는 대표적인 이벤트들은 다음과 같습니다.
- pageView(페이지뷰): 사용자 방문 시 페이지가 로드됨을 기록
- addToCart(장바구니 담기): 상품을 장바구니에 추가
- purchaseComplete(구매 완료): 결제 완료, 주문 확정
- userSignUp(회원가입): 새 사용자가 가입을 마쳤을 때
- formSubmit(폼 제출): 사용자 폼 입력 완료
이 외에도, 사이트나 앱 운영 목적에 따라 필요한 모든 이벤트를 정의할 수 있으며,
이벤트가 발생할 때마다 dataLayer에 push()하여 정보를 누적해 둡니다.
2. 데이터 레이어가 왜 필요할까?
👉마케터 입장
- 장점
- 추적 및 분석 태그 통합 관리: GA, Facebook 픽셀, 광고 전환 태그 등 여러 도구가 필요로 하는 데이터를 한 번에 수집
- 빠른 수정 및 배포: 태그 변경 사항은 GTM과 같은 태그 매니저에서 처리하면 되므로, 사이트 코드 직접 수정 없이 대응 가능
- 유연한 확장성: 새 마케팅 채널을 연동하거나 새로운 이벤트를 추적해야 할 때, 데이터 레이어에 정의만 추가하면 쉽게 확장 가능
- 단점
- 사전 기획 필요: 어떤 이벤트를 추적하고, 각 이벤트에서 어떤 필드를 넘길지 미리 정의해야 하므로, 마케터와 개발자의 협업이 필수
- 데이터 레이어 구조 설계 부담: 이벤트 이름, 필드명, 데이터 형식에 대한 표준을 잡지 않으면, 추적 데이터가 중구난방이 될 위험이 있음
👉개발자 입장
- 장점
- 코드 간소화: 예전에는 각 페이지마다 개별 스크립트를 삽입해야 했지만, 데이터 레이어 방식은 특정 시점에 dataLayer에 값만 푸시하면 됨
- 유지보수 용이: 마케팅·분석에 필요한 로직이 사이트 코드와 분리되어, 사이트 운영상 수정할 부분이 줄어듦
- 중앙집중적 관리: 마케팅 태그가 난립하지 않고 GTM을 비롯한 태그 매니저에서 한꺼번에 관리되므로, 사이트 코드 안정성에 이점
- 단점
- 협의 과정 필수: 어떤 이벤트를 어디서, 어떤 방식으로 dataLayer에 푸시해야 하는지 정확한 요구사항(스펙)이 필요
- 낯선 개념: 개발자 입장에서는 “데이터 레이어”라는 용어가 마케팅·분석 분야에서 왔기 때문에 처음엔 생소할 수 있음
3. 개발자 입장에서의 작업 난이도
실제로 데이터 레이어 구현은 난이도가 높지 않은 편입니다.
- 페이지나 앱 코드에서 window.dataLayer(또는 유사 배열)를 선언하고, 특정 이벤트 발생 시점에처럼 JSON 객체를 밀어넣는 형태가 전부입니다.
window.dataLayer.push({
event: 'purchaseComplete',
transactionId: '12345',
transactionTotal: 100000
// ...
});- 개발자가 해야 할 일은 “언제, 어떤 데이터를 전달할지” 스펙대로 구현하는 것이며, 마케팅/분석 담당자가 GTM(또는 타 태그 매니저)에서 해당 이벤트와 필드를 활용해 실제 태그를 세팅합니다.
4. 데이터 레이어의 동작 방식
👉초기 선언
- 보통 웹페이지의 <head> 혹은 시작 부분에서
<script>
window.dataLayer = window.dataLayer || [];
</script>- 이후, GTM 스니펫(또는 다른 태그 매니저)을 불러오면 이 dataLayer를 모니터링하기 시작합니다.
👉이벤트 발생 시점에 데이터 푸시(push)
- 구매 완료, 장바구니 담기, 회원가입 등 추적하려는 이벤트가 발생하면, 해당 시점에서
<script>
window.dataLayer.push({
'event': 'Login',
'Method': 'Kakao'
});
</script>- 여기서 event는 태그 매니저가 이벤트 발생을 식별하는 핵심 필드입니다.
👉태그 매니저(GTM)에서 이벤트 감지 & 태그 발동
- GTM은 dataLayer 변경사항을 실시간으로 확인합니다.
- event: 'Login'이 감지되면, “로그인” 트리거 설정에 의해 연결된 태그(예: Google Analytics 이벤트, Facebook 전환 태그 등)를 발동하거나, 추가로 Method 등의 데이터를 활용합니다.
5. 데이터 레이어 구현 시 유의사항
👉구글에서 추천하는 이벤트명 활용
- Google Analytics 4(이하 GA4) 등에서 표준화한 이벤트 명칭(예: purchase, add_to_cart, view_item_list)을 사용하면, 보고서 상에서 자동 매핑되는 기능 등을 더욱 편리하게 쓸 수 있습니다.
- 가능하면 GA4 권장 이벤트 이름과 필드 구조를 따르는 것이 추후 분석 편의를 높이는 데 유리합니다.
- 👇GA4 추천 이벤트 공식 가이드👇
[GA4] 추천 이벤트 - 애널리틱스 고객센터
도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요
support.google.com
👉ecommerce처럼 부모 객체와 자식 프로퍼티가 나뉘는 구조
- 전자상거래(eCommerce) 데이터의 경우, 단순히 event: 'purchaseComplete'뿐 아니라, 더 세분화된 정보(상품 목록, 거래금액, 결제 방식 등)가 필요합니다.
- 예를 들어 아래와 같이 GA4 표준에 따르면, ecommerce라는 부모 객체 안에, transaction_id, value, items와 같은 하위 프로퍼티들을 담아 넘기는 구조를 권장합니다.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "T_12345",
// Sum of (price * quantity) for all items.
value: 72.05,
tax: 3.60,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 10.01,
quantity: 3
},
{
item_id: "SKU_12346",
item_name: "Google Grey Women's Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 3.33,
index: 1,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "gray",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 21.01,
promotion_id: "P_12345",
promotion_name: "Summer Sale",
quantity: 2
}]
}
});- 위의 GA4 추천 이벤트 공식 가이드에서 각 이벤트를 클릭하면 코드 예시 확인 가능
- 링크에 오류가 있을 경우 가이드 문서를 "영어"로 확인하거나 👇아래의 레퍼런스 가이드 링크 활용👇
Recommended events | Google Analytics | Google for Developers
Send feedback Recommended events Stay organized with collections Save and categorize content based on your preferences. Google Analytics sends some event types automatically. This page describes optional, additional events you can configure to measure more
developers.google.com
👉이벤트 및 필드명 표준화
- 이벤트 이름(purchaseComplete vs. purchase_done vs. purchase)이나 필드명(transactionTotal vs. value) 등은 미리 규칙을 정하고 일관성 있게 사용해야 합니다.
- 혼용되면 태그 매니저나 분석 도구에서 데이터를 올바르게 수집·분석하기가 어려워집니다.
👉중복·누락 방지
- 구매 완료 이벤트가 여러 번 푸시되지 않도록 주의합니다(예: 결제 확인 페이지 새로고침 시 같은 이벤트가 재발생하는 경우).
- 이벤트가 정상적으로 한 번씩만 전달되도록, 개발 단계부터 트리거 조건을 꼼꼼히 확인해야 합니다.
👉디버깅 및 테스트
- GTM 디버그(Preview) 모드를 활용하면, 어떤 이벤트와 데이터가 dataLayer에 들어왔는지, 그에 따라 어떤 태그가 발동됐는지 실시간으로 확인할 수 있습니다.
- 개발자 도구 콘솔에서 window.dataLayer 입력 후 배열 내용을 직접 점검하는 것도 간단한 방법입니다.
[ 광고선배 인스타그램 바로가기 ]
'마케팅 툴 > GTM(Google Tag Manager)' 카테고리의 다른 글
| 구글 태그 매니저(GTM)에서 이벤트 구현하는 대표적인 6가지 방법 (0) | 2025.03.17 |
|---|---|
| 구글 태그 매니저(GTM)에 구글 애널리틱스(GA4) 공통 스크립트 설치하는 방법 (0) | 2025.03.16 |
| 구글 태그 매니저, GTM(Google Tag Manager) 기본 태그 설치 방법 (0) | 2025.03.15 |
| 구글 태그 매니저, GTM(Google Tag Manager)이란? (0) | 2025.03.15 |
