목차
1) DataLayer 는 왜 필요할까?
1.GA4가 정해놓은 형식 (중첩된 객체 구조)을 만들어 데이터를 받기 위해서
gtm을 통해 클릭,스크롤 등 이벤트 태그를 세팅하고 ga4로 보내주는 과정에는 DOM scraping 방식이 사용된다.
DOM 방식의 한계가 있는데
첫째. dom 에서 변수는 "값" 하나만 담을 수 있다.
예를 들어,
변수1 = "사과"
변수2 = 2000
이렇게 변수 하나에 값 하나를 담게 된다.
하지만, 이커머스에는 여러 정보를 묶은 객체 단위로 데이터 수집이 필요한 경우가 많다.
예를 들어,
변수3 = { 'item_name' : '사과' , 'price' : 2000 }
이렇게 변수에 상품 이름과 가격 정보를 같이 담는게 필요한데 dom 으로는 불가능하다.
둘째. 배열을 만들 수 없다.
예를 들어,
items = [상품1, 상품2, 상품3]
이런 배열 형태를 만들 수 없다.
셋째.중첩구조를 만들 수 없다.
예를 들어
{'ecommerce' : {
'items' : "사과", 'price' : 2000
}
}
이러한 중첩 구조를 만들 수 없다.
GA4 에서 요구하는 데이터 형식이 있는데 이 형식에는 중첩과 객체 구조가 필요하다. 하지만 dom 스크래핑 방식으로는 중첩과 객체 구조를 만들 수 없기 때문에 datalayer 를 사용하는 것이다.
2. HTML 에 없는 정보들을 GA4에 보내기 위해서
전자상거래에 필요한 대부분의 정보는 화면에 안보이거나 다른 곳에 흩어져있는 경우가 많다.
예를 들어, 결제완료 페이지에
<!-- 화면에 보이는 것 -->
<h1>주문이 완료되었습니다!</h1>
<p>주문번호: ORD-20251019-001</p>
<p>총 결제 금액: 50,000원</p>
이렇게 뜨겠지만 실무적으로 데이터 분석을 하기 위해서
GA4에 보내야 할 정보는 이것보다 많다.
{
transaction_id: 'ORD-20251019-001', // ✅ HTML에 있음
value: 50000, // ✅ HTML에 있음
// ❌ 아래는 HTML에 없는 정보들!
tax: 5000, // 세금 (서버에서 계산)
shipping: 3000, // 배송비
coupon: 'SUMMER20', // 쿠폰 코드
payment_type: 'card', // 결제 수단
items: [{
item_id: 'SKU-001', // 상품 고유번호
item_name: '무선 이어폰', // ✅ HTML에 있을 수도
price: 89000,
quantity: 2,
item_category: '전자기기', // 카테고리
item_brand: 'Samsung' // 브랜드
}]
}
이 정보들을 DOM 스크래핑으로 모으는 것은 힘들고, 중복된 객체 구조의 데이터 그릇에 담아야 하기에 DataLayer가 필요하다
3.배열 구조를 만들어야함
데이터를 보낼 때 배열 형식으로 만들어 보내야하는데 DOM 스크래핑으로는 배열 구조를 만들 수 없다.
// 상품 1개만 구매해도 배열!
items: [
{item_name: '이어폰', price: 89000, quantity: 1}
]4. 데이터 타입 정확성
GA4 는 데이터 타입에 민감한데, 예를 들어 가격 정보의 경우 "50,000원" 이렇게 문자열로 수집이 되는 경우도 있다. 하지만, datalayer를 통해 정확한 타입 (숫자형)으로 ga4로 보내줄 수 있다.
(2) DataLayer 필수 항목
ga4에 데이터를 보내기 위해서는 ga4에서 정한 양식을 꼭 지켜야 한다. 양식이 틀리면 전자상거래 보고서에 안 뜰수도 있기 때문이다.
아래 형식에 맞춰 6개 정보를 필수로 넣어야한다. 특히! 대괄호 "[ ]"를 사용해서 items를 배열로 넣여야 한다.
{
'currency': 'KRW', // 1 통화 (필수) - 한국 돈인지, 달러인지
'value': 15000, // 2️ 총 가격 (필수)
'items': [{ // 3️ 상품 목록 (필수) - 대괄호[] 필수!
'item_id': 'SKU123', // 4 상품 고유번호 (필수)
'item_name': '커피', //5 상품 이름 (필수)
'price': 15000 // 6 개별 가격 (권장)
}]
}(3)DataLayer 스펙 문서에 꼭 포함해야 하는 정보
마케터가 개발자와 소통할 때 Datalayer 스펙 문서에 꼭 포함해야 하는 정보가 있다.
1. 이벤트명 & 발화시점
이벤트명: purchase
발화 시점: 결제 완료 버튼 클릭 후, "주문 완료" 페이지 로드 시
2.데이터 구조 & 타입 정의
{
'transaction_id': '문자열(String)', // 예: "ORD-12345"
'value': 숫자(Number), // 예: 15000 (따옴표 없음!)
'currency': '문자열(String)' // 예: "KRW"
}
3.필수/선택 파라미터 구분
[필수]
- transaction_id
- value
- currency
[선택]
- coupon (할인쿠폰 사용시)
4.샘플 코드
개발자에게 어떤 형식으로 코드를 짜야하는지 전달해줘야한다.
구글에서 ga4 정확한 코드 형식을 알 수 있는 사이트도 구현해놨다. 아래 주소에서 어떤 형식으로 데이터를 수집해야하는지 정확하게 확인 가능하다
https://enhancedecommerce.appspot.com/#!GA-homepage-8835a-6:ga4Gtag
// 실제 사용 예시
dataLayer.push({
'event': 'purchase',
'transaction_id': 'ORD-20251019-001',
'value': 15000,
'currency': 'KRW'
});
5. 이외에 QA 시나리오, 에러 처리 방안 등도 개발자에게 공유주면 좋다.
