이번 포스팅에서는
구글 태그 매니저를 이용해서
구글 애널리틱스 4(=신버전)의
이커머스 데이터 수집 설정 방법을
살펴보겠습니다.
유니버설 애널리틱스(=구버전)의
이커머스 데이터 수집 설정 방법이 궁금하시다면
전 포스팅을 확인해 주세요.
이 포스팅의 목적은
구글 애널리틱스 4와 구글 태그 매니저를 설정해서
실무에 필요한 모든 이커머스 데이터 수집 기능을
즉시 정확하게 활성화하는 것입니다.
구글 애널리틱스 4와 구글 태그 매니저를
살펴보고 실습하는 정보가 필요하시면
더 좋은 정보를 찾아보시길 부탁드립니다.
1. 구글 태그 매니저 로그인 하기
이 화면을 확인하셨다면
태그명: GA4 global tag
태그 유형: Google 애널리틱스: GA4 구성
측정 ID: G-XXXXXXX (구글 애널리틱스 4 관리자에서 확인한 Measurement ID입니다.)
트리거: All Pages (GTM이 이미 제공하는 트리거를 선택하세요.)
구글 애널리틱스 4의 측정 아이디는
아래의 화면에서 확인할 수 있습니다.
구글 애널리틱스 4 관리자 -> Data Stream -> Web stream details
이제 글로벌 태그를 생성하고 설정했습니다.
하나의 태그을 설정할 때마다
Tag Assistant라는 구글 태그 매니저의
독특한 디버거를 사용해서
게시하려는 사이트에서 문제없이 작동하는지
쉽게 확인할 수 있습니다.
Tag Assistant 사용법은
아래의 포스팅에서 3항을 살펴보세요.
이제
일반적인 쇼핑몰 구매 고객의 행동 순서를 따라서
카탈로그 조회 태그를 생성할 차례입니다.
사이트 방문자의 쇼핑 행동이
구글 애널리틱스 4를 사용했다고 변할 수 없어서
설정 내용은 유니버설 애널리틱스와 동일하고
세부 사항이 조금 다른데,
구글 애널리틱스 4가 유니버설 애널리틱스에 비해
설정 내용이 좀 더 직관적이고 간단합니다.
DLV.ecommerce.items 변수 생성
좌측 메뉴에서 [변수] 탭을 클릭합니다.
변수명: DLV.ecommerce.items (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: ecommerce.items (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
참고로,
DLV는 저희 싱글뷰가 정한
DataLayer Variable의 약자일 뿐입니다.
ga4_view_item_list 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: ga4_view_item_list (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: GA4 이벤트
구성 태그: GA4 global tag (2항에서 생성했습니다.)
이벤트 이름: view_item_list (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
아래의 배경 지식을 참고하세요.
{{DLV.ecommerce.items}}는
방금 전에 생성한 변수를 사용하겠다는 예약어입니다.
스크롤을 내리면 트리거 설정 화면이 표시됩니다.
이 섹션을 클릭해서 트리거를 생성합니다.
좌측 메뉴에서 [트리거] 탭을 클릭해서 접근할 수도 있습니다.
ga4_view_item_list 트리거 생성
트리거명: ga4_view_item_list (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: view_item_list (텍스트를 복사하여 붙여넣으세요)
카탈로그에서 상품 목록을 보던 중
어떤 상품의 상세 페이지 링크를 클릭하는
이벤트를 처리하는 태그를 생성합니다.
ga4_select_item 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: ga4_select_item (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: GA4 이벤트
구성 태그: GA4 global tag (2항에서 생성했습니다.)
이벤트 이름: select_item (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
ga4_select_item 트리거 생성
트리거명: ga4_select_item (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: select_item (텍스트를 복사하여 붙여넣으세요)
어떤 상품의 상세 페이지를 조회하는
이벤트를 처리하는 태그를 생성합니다.
ga4_view_item 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: ga4_view_item (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: GA4 이벤트
구성 태그: GA4 global tag (2항에서 생성했습니다.)
이벤트 이름: view_item (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
ga4_view_item 트리거 생성
트리거명: ga4_view_item (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: view_item (텍스트를 복사하여 붙여넣으세요)
어떤 상품의 상세 페이지에서
해당 상품을 장바구니에 담는
이벤트를 처리하는 태그를 생성합니다.
ga4_add_to_cart 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: ga4_add_to_cart (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: GA4 이벤트
구성 태그: GA4 global tag (2항에서 생성했습니다.)
이벤트 이름: add_to_cart (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수1 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수1 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
이벤트 매개변수2 - 매개변수 이름: value (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수2 - 값: {{DLV.ecommerce.value}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
참고로, value를 정확하게 전송하지 않아서 event value가 0으로 기록되면 이후에
add_to_cart 이벤트를 Goal로 설정하여 추적하는 작업이 원활하지 않을 수 있습니다.
ga4_add_to_cart 트리거 생성
트리거명: ga4_add_to_cart (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: add_to_cart (텍스트를 복사하여 붙여넣으세요)
어떤 상품의 상세 페이지에서
해당 상품을 지금 구매하는
이벤트를 처리하는 태그를 생성합니다.
ga4_begin_checkout 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: ga4_begin_checkout (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: GA4 이벤트
구성 태그: GA4 global tag (2항에서 생성했습니다.)
이벤트 이름: begin_checkout (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수1 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수1 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
이벤트 매개변수2 - 매개변수 이름: value (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수2 - 값: {{DLV.ecommerce.value}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
참고로, value를 정확하게 전송하지 않아서 event value가 0으로 기록되면 이후에
begin_checkout 이벤트를 Goal로 설정하여 추적하는 작업이 원활하지 않을 수 있습니다.
ga4_begin_checkout 트리거 생성
트리거명: ga4_begin_checkout (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: begin_checkout (텍스트를 복사하여 붙여넣으세요)
장바구니 목록 페이지를 조회하는
이벤트를 처리하는 태그를 생성합니다.
유니버설 애널리틱스에서
구글 애널리틱스 4로 버전업 되면서
Recommended Events로 변경되었습니다.
이러한 안내가 어색하시면
아래의 페이지에서 관련 정보를 살펴보세요.
구글 애널리틱스 4의 Recommended Events 알아보기
그런데
유니버설 애널리틱스와 병행하시는 경우에도
이 태그를 생성하면
구글 애널리틱스 버전과 무관하게
gaectk.js와 연동하여 필요한 태그를 실행합니다.
실제로 gaectk.js 라이브러리에서는
구글 애널리틱스 버전과 무관하게
gaectkCart.viewCart()라는
동일한 인터페이스를 제공합니다.
ga4_view_cart 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: ga4_view_cart (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: GA4 이벤트
구성 태그: GA4 global tag (2항에서 생성했습니다.)
이벤트 이름: view_cart (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
ga4_view_cart 트리거 생성
트리거명: ga4_view_cart (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: view_cart (텍스트를 복사하여 붙여넣으세요)
장바구니 목록 페이지에서
개별 품목을 삭제하하는
이벤트를 처리하는 태그를 생성합니다.
ga4_remove_from_cart 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: ga4_remove_from_cart (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: GA4 이벤트
구성 태그: GA4 global tag (2항에서 생성했습니다.)
이벤트 이름: remove_from_cart (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
ga4_remove_from_cart 트리거 생성
트리거명: ga4_remove_from_cart (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: remove_from_cart (텍스트를 복사하여 붙여넣으세요)
결제 완료 페이지가 표시되는
이벤트를 처리하는 태그를 생성합니다.
구글 애널리틱스 4와 GTM 설정 과정에서
유일하게 변수 설정이 까다롭습니다.
DLV.ecommerce.transaction_id 변수 생성
변수명: DLV.ecommerce.transaction_id (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: ecommerce.transaction_id (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
동일한 방식으로 아래의 변수를 생성합니다.
변수명: DLV.ecommerce.tax (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: ecommerce.tax (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
변수명: DLV.ecommerce.shipping (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: ecommerce.shipping (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
변수명: DLV.ecommerce.value (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: ecommerce.value (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
변수명: DLV.ecommerce.affiliation (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: ecommerce.affiliation (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
변수명: DLV.ecommerce.currency (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: ecommerce.currency (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
변수명: DLV.ecommerce.coupon (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: ecommerce.coupon (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
ga4_purchase 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: ga4_purchase (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: GA4 이벤트
구성 태그: GA4 global tag (2항에서 생성했습니다.)
이벤트 이름: purchase (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
이벤트 매개변수 - 매개변수 이름: transaction_id (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 값: {{DLV.ecommerce.transaction_id}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
이벤트 매개변수 - 매개변수 이름: tax (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 값: {{DLV.ecommerce.tax}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
이벤트 매개변수 - 매개변수 이름: shipping (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 값: {{DLV.ecommerce.shipping}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
이벤트 매개변수 - 매개변수 이름: value (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 값: {{DLV.ecommerce.value}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
이벤트 매개변수 - 매개변수 이름: affiliation (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 값: {{DLV.ecommerce.affiliation}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
이벤트 매개변수 - 매개변수 이름: currency (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 값: {{DLV.ecommerce.currency}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
이벤트 매개변수 - 매개변수 이름: coupon (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 값: {{DLV.ecommerce.coupon}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
ga4_purchase 트리거 생성
트리거명: ga4_purchase (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: purchase (텍스트를 복사하여 붙여넣으세요)
checkNonEcConversionGaectk(sVirtualUrl, sPageTitle)
sendClickEventGaectk(sCategory, sEventLbl, sLocation, sWindow)
sendDisplayEventGaectk(sDisplayedObject)
필요한 변수를 추가합니다.
변수명: DLV.sv_event_info.page_location (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: sv_event_info.page_location (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
동일한 방식으로 아래의 변수를 생성합니다.
변수명: DLV.sv_event_info.page_title (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: sv_event_info.page_title (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
변수명: DLV.sv_event_info.value (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: sv_event_info.value (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
변수명: DLV.sv_event_info.label (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: sv_event_info.label (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
checkNonEcConversionGaectk(sVirtualUrl, sPageTitle)를
실행하기 위해서 GTM 컨테이너에 아래의 태그를 추가합니다.
ga4_virtual_pv 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: ga4_virtual_pv (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: GA4 이벤트
측정 ID: {{var_ga4_measurement_id}} (GA4 measurement ID를 직접 입력하거나 대응 변수 입력)
이벤트 이름: page_view (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 매개변수 이름: page_title (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 값: {{DLV.sv_event_info.page_title}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
이벤트 매개변수 - 매개변수 이름: page_location (텍스트를 복사하여 붙여넣으세요)
이벤트 매개변수 - 값: {{DLV.sv_event_info.page_location}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
ga4_virtual_pv 트리거 생성
트리거명: ga4_virtual_pv (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: virtula_pv (텍스트를 복사하여 붙여넣으세요)
동일한 방식으로
sendClickEventGaectk()를
실행하기 위해서 GTM 컨테이너에 아래의 태그를 추가합니다.
ga4_clicked 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: ga4_clicked (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: GA4 이벤트
측정 ID: {{var_ga4_measurement_id}} (GA4 measurement ID를 직접 입력하거나 대응 변수 입력)
이벤트 이름: {{DLV.sv_event_info.label}} (텍스트를 복사하여 붙여넣으세요)
ga4_clicked 트리거 생성
트리거명: ga4_virtual_pv (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: clicked (텍스트를 복사하여 붙여넣으세요)
동일한 방식으로
sendDisplayEventGaectk()를
실행하기 위해서 GTM 컨테이너에 아래의 태그를 추가합니다.
ga4_displayed 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: ga4_clicked (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: GA4 이벤트
측정 ID: {{var_ga4_measurement_id}} (GA4 measurement ID를 직접 입력하거나 대응 변수 입력)
이벤트 이름: {{DLV.sv_event_info.label}} (텍스트를 복사하여 붙여넣으세요)
ga4_displayed 트리거 생성
트리거명: ga4_displayed (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: displayed (텍스트를 복사하여 붙여넣으세요)
수고하셨습니다.
이제
사이트에 이미 설치하신 gaectk.js 라이브러리와
GTM 연결 작업이 완료되었습니다.
12. GA4 폴더 생성
언제나 칼퇴를 향한 노력은 계속되어야 합니다.
위의 캡처 화면과 같이
Google Analytics 4 폴더를 생성하신 후
이번에 생성한 변수, 태그, 트리거를 모두
Google Analytics 4 폴더로 이동하세요.
Tag Assistant를 사용하여
설정 과정에서 오류가 없었는지 확인하신 후에
[제출] 버튼을 클릭하여
GTM이 목표 홈페이지에 태그를 게시하도록 허락합니다.
게시하시는 버전을 식별할 수 있는
자세한 정보를 자세히 기록해 두시는 습관이
GTM으로 여러가지 이벤트를 추적하다보면
GTM 관리자가 태그 무더기가 뒤섞인 상태일 수 있고
이번에 설정하신 후에 전혀 손대지 않으신다 해도
한참 후에 다시 보면 아무것도 기억이 안날 수도 있습니다.
여러 개의 복잡한 시스템을 관리하실 때에는
기록은 기억을 지배한다는 격언을
항상 잊지 않으셔야 합니다.
수고가 많으셨습니다.
지금까지
gaectk.js 라이브러리를 이용하여
유니버설 애널리틱스,
구글 애널리틱스 4을 JS API로 직접 연결하거나
GTM과 연동하는 방법을 알아봤습니다.
구글 애널리틱스 4의 구매 전환 FUNNEL 보고서 활용법 - 1
구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - Univ...
