[GA4] GTM 서버사이드태깅 - GA4 전자상거래 태그 적용

GTM 서버사이드태깅 - GA4 전자상거래 태그 적용

 

---

 

1. 들어가며

GA4도 기존 UA(Universal Analytics)와 같이 전자상거래(ecommerce) 기능을 제공합니다. GA4 공식문서에  '추천 이벤트' 목록이 있는데 기존 UA에서 사용하던 전자상거래 이벤트와 네이밍이 다른 부분이 많아 해당 부분을 고려하여 적용 또는 마이그레이션하여야 합니다. Simo Ahava 블로그(Available Actions)에 해당 부분에 대한 상세한 비교가 있으니 참고할 것을 권장드립니다. 
 

2. GA4 공식문서 리뷰

1) 전자상거래 사전정의 이벤트

아래 내용은 구글 공식 문서 링크에서 발췌하여 정리하였습니다. 
생각보다 바뀐 이벤트명이 많으니 공식문서를 참고하여 실제 이벤트 태깅작업을 진행하는 것이 필요해 보입니다.

GA4 이벤트	UA 향상된 전자상거래	트리거 시점
add_payment_info		결제정보 제출(a user submits their payment information)
add_shipping_info		배송정보 제출(a user submits their shipping information)
add_to_cart	add	장바구니 담기(a user adds items to cart)
add_to_wishlist	-	위시리스트 추가(a user adds items to a wishlist)
begin_checkout	checkout	결제 시작(a user begins checkout)
generate_lead	-	폼 제출(a user submits a form or a request for information)
purchase	purchase	구매완료(a user completes a purchase)
refund	refund	환불(a user receives a refund)
remove_from_cart	remove	장바구니 삭제(a user removes items from a cart)
select_item	click	아이템 선택(a user selects an item from a list)
select_promotion	promoClick	프로모션 선택(a user selects a promotion)
view_cart	-	장바구니 보기(a user views their cart)
view_item	detail	특정 아이템 보기(a user views an item)
view_item_list	impressions	아이템 목록 보기(a user sees a list of items/offerings)
view_promotion	promoView	프로모션 보기(a user sees a promotion)

 

2) 전자상거래 구매 보고서

[GA4] 전자상거래 구매 보고서 - 애널리틱스 고객센터

 

3. 데이터 수집에 필요한 개발진행

저는 전자상거래 테스트를 위해 기존에 사용하던 Node Express 환경에서 구현을 진행하였습니다.
먼저 GTM 컨테이너를 활용하여 GA4 전자상거래 기능을 구현하기 위해 dataLayer 선언하는 script를 추가하겠습니다. (gtag.js를 활용한 전자상거래 기능 적용을 고려하신다면, 이 링크에 있는 구글 공식문서를 참고하시기 바랍니다.)

GTM을 통한 GA4 전자상거래 기능은 아래 구글 공식문서를 참고하여 작성합니다. 

GA4 전자상거래(태그 관리자): GA4 이벤트 전송  |  전자상거래를 위한 개발자 이전  |  Google for De

 

GTM 컨테이너 스크립트

<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

제가 사용하는 소스는 pug template으로 되어 있어서 아래와 같이 변환하였습니다. (참고로 pug 사용법이 익숙하지 않다면 https://html2jade.org/를 사용하시면 됩니다. 기존 HTML/Javascript 코드를 pug 변경이 가능합니다. 다만 요즘엔 React 또는 Vue를 활용하는 경우가 많아 pug 샘플코드가 크게 중요하진 않을 것 같습니다.) 

// GTM Data Layer
script.
  dataLayer = window.dataLayer || [];

// Google Tag Manager
script.
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-MXGSVLV');
// End Google Tag Manager

이제 다음으로 ecommerce 관련 스크립트 코드를 추가합니다. dataLayer.push()함수에 테스트로 사전정의 이벤트명인 add_to_cart와 ecommerce 매개변수를 지정합니다.

장바구니 담기 (add_to_cart)

// 코드생략
$('#btnAddToCart').on('click', (e) => {
    e.preventDefault();

    dataLayer.push({
        event: 'add_to_cart',
        ecommerce: {
            items: [{
                item_name: 'Nike Air Jordan 34',
                item_id: 'item12345',
                price: '99.90',
                item_brand: 'NIKE',
                item_category: 'Apparel',
                item_category2: 'Mens',
                item_category3: 'Shoes',
                item_category4: 'Basketball',
                item_variant: 'White Red',
                quantity: '1'
            }]
        }
    });
});
// 코드생략

코드적용이 완료되었다면, 다음은 GTM에 GA4 이벤트 태그를 추가합니다.
저는 기존에 만들어둔 SST(Server-side Tag)를 통해 데이터를 수집할 예정입니다.
먼저 기존에 생성한 두개의 GTM 컨테이너 중 Client(웹 클라이언트)에 GA4 이벤트를 추가합니다. Event Name에 'add_to_cart'를 입력하고 items 정보를 읽어오기 위해 GTM Variables를 추가로 생성하였습니다.

 

장바구니 담기 태그 생성

Data Layer Variable 생성

 
SST에는 기존에 생성한 GA4 태그가 있어서 별도로 작업할 부분은 없습니다.
그럼 Preview 테스트를 해보겠습니다. 버튼이벤트 클릭 시 해당 ecommerce script가 실행되도록 위 예시에서 구현하였습니다. 아래 그림과 같이 'add_to_cart' 이벤트가 잘 호출되었습니다.

GA4 Event - add to cart

전달된 add_to_cart Data Layer 값 확인

GTM Server-side Tag 쪽도 Preview 모드에서 확인해봅니다.

GTM Server-side 호출 확인

전달받은 ecommerce 데이터

최종적으로 Google Analytics에 데이터가 들어왔는지도 확인합니다. 구글리포트는 익일 반영되므로 앞서 먼저 테스트했던 데이터로 리포트결과만 현재 반영되어 있습니다. 장바구니 담기 이벤트 데이터가 1건 들어와 있네요 :)

 

테스트결과 장바구니 담기 결과가 데이터로 들어온 것이 보입니다.

구매하기(purchase) 

다음으로 구매하기 이벤트를 구현하겠습니다. ecommerce에는 add_to_cart와 달리 추가로 매개변수(event parameter)에 사용할 값들을 추가하였습니다. 

• currency: 통화
• value: 총구매금액
• tax: 부가세
• shipping: 배송비
• affiliation: 판매자
• transaction_id: 주문번호
• coupon: 사용쿠폰

// 구매하기 이벤트 스크립트
$('#btnPurchaseItem').on('click', (e) => {
    e.preventDefault();
    dataLayer.push({
        event: 'purchase',
        ecommerce: {
            currency: 'USD',
            value: 129.90,
            tax: 1.99,
            shipping: 5.00,
            affiliation: 'Jason Store',
            transaction_id: '200015499',
            coupon: 'flash_sale_coupon',
            items: [{
                item_name: 'Nike Air Jordan 34',
                item_id: 'item12345',
                price: '99.90',
                item_brand: 'NIKE',
                item_category: 'Apparel',
                item_category2: 'Mens',
                item_category3: 'Shoes',
                item_category4: 'Basketball',
                item_variant: 'White Red',
                quantity: '1'
            },
            {
                item_name: 'Underarmour Sleeve',
                item_id: 'item12204',
                price: '30.00',
                item_brand: 'UNDER ARMOUR',
                item_category: 'Apparel',
                item_category2: 'Mens',
                item_category3: 'T-Shirts',
                quantity: '1',
                item_coupon: 'summer_sale'
            }]
        }
    });
});

구매하기 이벤트 태그 생성

Realtime Report - 구매하기

 

3. 요약

GA4로 변경되면서 UA Enhanced Ecommerce(향상된 전자상거래)에서 변경된 부분이 꽤 있는 것을 확인하였습니다. 기존 UA와 달리 이벤트기반으로 데이터를 수집하는 방식이 훨씬 자유도도 높고 심플한 방식인 것 같습니다. 또한 GTM SST방식으로도 전자상거래 기능을 수집하는 방법에 큰 차이는 없는 점도 확인하였습니다. 
그럼 Happy Tagging하세요 :)

 

4. 참고자료

How to Pull Ecommerce Data From Data Layer in GTM | Optimize Smart

How to Pull Ecommerce Data From Data Layer in GTM - Optimize Smart

2. Simo Ahava's blog - GOOGLE ANALYTICS 4: ECOMMERCE GUIDE FOR GOOGLE TAG MANAGER

Google Analytics 4: Ecommerce Guide For Google Tag Manager

[GA4] Recommended events

전자상거래 데이터 수집하기

[Google Analytics 4] 전자상거래 데이터 수집하기

Data Layer Variable version 1과 2에 대한 개념 이해

#GTMTips: Data Layer Variable Versions Explained

Data Layer Variable in Google Tag Manager: Complete Guide [2022]