GA4 이벤트 태깅 방식

1) DOM 이벤트 기반 데이터 수집

웹페이지의 특정 요소(버튼, 링크 등)에 대한 사용자 동작을 감지하면 데이터를 GA4로 전송하는 방식이다. 이를 위해, 해당 요소의 Class, ID 또는 Text 값을 기준으로 이벤트 트리거 설정하고 이벤트가 발생하면 GTM을 통해 GA4로 데이터를 전송한다. 이 방식은 GTM에서 설정하는데 아래의 예시를 보면 이해할 수 있다. 

 

💡 예시: 장바구니 추가 (add_to_cart) 이벤트 발생

- 트리거 : '장바구니에 추가' 버튼 클릭 감지

• 트리거 설정
  • Click - All Elements 트리거 추가
  • Click Classes 또는 Click ID를 사용해 특정 버튼을 감지
  • 예: Click ID = add-to-cart-btn
• 태그 설정
  • Tag Type: 구글애널리틱스 GA4 이벤트
  • Event Name: add_to_cart
  • 이벤트 매개변수:
    
    • item_name → {{Click Text}} (클릭한 버튼의 텍스트)
    • page_path → {{Page Path}} (사용자가 클릭한 페이지 URL)

 

2) Data Layer 기반 데이터 수집

Data Layer 기반 데이터 수집은 정확한 이벤트 데이터를 확보할 수 있다. DOM 기반 방식은 HTML이 변경되면 이벤트 태깅이 깨질 위험이 있다. 또한, 데이터 표준화가 이뤄져 다양한 페이지(리스트, 상세페이지 등)에서 일관된 데이터가 수집된다. 또한, GA4, GTM, BigQuery, CRM과 연계하며 더욱 강력한 데이터 수집 구조를 이룬다. 

 

💡 예시: '장바구니 추가' 버튼 클릭 시 add_to_cart 이벤트 발생

아래는 장바구니 버튼을 클릭할 때 Data Layer 이벤트를 발생시키는 코드이다. 이 코드를 GTM의 맞춤형 HTML(Custom HTML) 태그로 삽입하면 GA4 이벤트가 실행되어 관련 매개변수(item_name, item_id, price 등)를 수집할 수 있다.

 

• GTM에서 "맞춤 HTML 태그" 추가
  • 태그 유형: "맞춤 HTML(Custom HTML)"
  • HTML 코드: 하단의 html 코드 입력
• 트리거 설정 예시
  • add_to_cart → "Click - All Elements" (버튼 클릭 감지)
  • view_item → "Page View" (특정 상품 페이지에서 실행)
  • purchase → "Page View" (결제 완료 페이지에서 실행)
• 이벤트 매개변수
  • item_name → {{Click Text}}
  • item_id → {{Click ID}}
  • price → {{Click Data Attribute - data-price}}
  • currency → "KRW"

 

  

    
    
    
    
  
<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'event': 'add_to_cart',
    'ecommerce': {
      'items': [{
        'item_name': '김치 2kg',
        'item_id': '12345',
        'price': 20000,
        'quantity': 1,
        'category': '식품'
      }]
    }
  });
</script>

 

이처럼 맞춤형 HTML 태그를 활용해 Data Layer 기반으로 구매, 장바구니 추가 같은 전자상거래 이벤트를 정의할 수 있다. 이후, 결제 금액, 주문 ID, 상품 정보 데이터는 이커머스 분석에 활용된다.

 

3) 총정리

DOM 이벤트 기반 방식 vs Data Layer 기반 방식

설정 방법	HTML 요소의 ID, Class를 기준으로 이벤트 감지	dataLayer.push()를 이용하여 데이터 저장 후 GA4로 전송
개발자 협업 필요성	❌ 불필요 (GTM에서 직접 설정 가능)	✅ 필요 (개발자가 dataLayer 설정)
데이터 정확성	❌ HTML 구조 변경 시 오류 발생 가능	✅ 일관된 데이터 전송 가능
적용 추천 상황	빠른 테스트, 클릭 이벤트 추적	정확한 이커머스 데이터 분석 (ex. 장바구니, 결제 이벤트)