구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - Google Analytics 4 + GTM + gaectk.js

by singleview.co.kr posted Oct 16, 2021
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

이번 포스팅에서는

구글 태그 매니저를 이용해서

구글 애널리틱스 4(=신버전)의

이커머스 데이터 수집 설정 방법을

살펴보겠습니다.

 
동일한 상황에서

유니버설 애널리틱스(=구버전)의

이커머스 데이터 수집 설정 방법이 궁금하시다면

전 포스팅을 확인해 주세요.

 

이전 포스팅 보러가기

 

이 포스팅의 목적은

구글 애널리틱스 4와 구글 태그 매니저를 설정해서

실무에 필요한 모든 이커머스 데이터 수집 기능을

즉시 정확하게 활성화하는 것입니다.

 

구글 애널리틱스 4와 구글 태그 매니저를

살펴보고 실습하는 정보가 필요하시면

더 좋은 정보를 찾아보시길 부탁드립니다.

 

1. 구글 태그 매니저 로그인 하기

 
이 포스팅에서 안내해 드리는 방법은
계속하여 소개해 드린 gaectk.js 라이브러리를 
사용한다는 전제입니다.
 
gaectk.js 라이브러리를 설치하지 않고
본 포스팅에 따라 GTM만 설정하시면
이커머스 데이터가 수집되지 않습니다.
 
이러한 안내가 어색하시면
아래의 페이지를 먼저 세심하게 살펴보셔야 합니다.
 
 
여기까지 모두 숙지하셨다면
구글 태그 매니저에 로그인 하세요.
 
구글 태그 매니저의 계정 설정 방법은
매우 읽기 쉽고 자세한 정보가 너무 많기 때문에
이 포스팅에서는 생략하겠습니다.
 
구글 태그 매니저에 로그인하시면
아래와 같은 혹은 비슷한 화면을 볼 수 있습니다.
 
구글태그매니저_구글애널리틱스4_설정법_1.png.png

 

이 화면을 확인하셨다면

모든 사전 준비가 완료된 것입니다.
 
이제
구글 애널리틱스 4(=신버전) 기준으로
쇼핑몰 구매 고객의 일반적인 행동 순서를 따라서

 

구글 태그 매니저 설정을 시작하겠습니다.

 

2. 글로벌 태그 생성
  

태그명: GA4 global tag

태그 유형: Google 애널리틱스: GA4 구성

측정 ID: G-XXXXXXX (구글 애널리틱스 4 관리자에서 확인한 Measurement ID입니다.)

트리거: All Pages (GTM이 이미 제공하는 트리거를 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_2.png

 

구글 애널리틱스 4의 측정 아이디는

아래의 화면에서 확인할 수 있습니다.

 

구글 애널리틱스 4 관리자 -> Data Stream -> Web stream details

 

구글태그매니저_구글애널리틱스4_설정법_3.png

 

구글태그매니저_구글애널리틱스4_설정법_4.png.png

 

이제 글로벌 태그를 생성하고 설정했습니다.

 

하나의 태그을 설정할 때마다

Tag Assistant라는 구글 태그 매니저의

독특한 디버거를 사용해서

게시하려는 사이트에서 문제없이 작동하는지

쉽게 확인할 수 있습니다.

 

Tag Assistant 사용법은

아래의 포스팅에서 3항을 살펴보세요.

 

Tag Assistant 사용법 보러가기

 

3. 카탈로그(=상품목록) 조회 태그 생성
 

이제

일반적인 쇼핑몰 구매 고객의 행동 순서를 따라서

카탈로그 조회 태그를 생성할 차례입니다.

 

사이트 방문자의 쇼핑 행동이

구글 애널리틱스 4를 사용했다고 변할 수 없어서

설정 내용은 유니버설 애널리틱스와 동일하고

세부 사항이 조금 다른데,

 

구글 애널리틱스 4가 유니버설 애널리틱스에 비해

설정 내용이 좀 더 직관적이고 간단합니다.

 

DLV.ecommerce.items 변수 생성

 

좌측 메뉴에서 [변수] 탭을 클릭합니다.

 

변수명: DLV.ecommerce.items (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.items (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

참고로,

DLV는 저희 싱글뷰가 정한

DataLayer Variable의 약자일 뿐입니다.

 

구글태그매니저_구글애널리틱스4_설정법_5.png

 

ga4_view_item_list 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_view_item_list (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

구성 태그: GA4 global tag (2항에서 생성했습니다.)

이벤트 이름: view_item (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_6.png

 

구글태그매니저_구글애널리틱스4_설정법_7.png

 

아래의 배경 지식을 참고하세요.

 

{{DLV.ecommerce.items}}는

방금 전에 생성한 변수를 사용하겠다는 예약어입니다.

 

스크롤을 내리면 트리거 설정 화면이 표시됩니다.

 

구글태그매니저_구글애널리틱스4_설정법_8.png

 

이 섹션을 클릭해서 트리거를 생성합니다.

좌측 메뉴에서 [트리거] 탭을 클릭해서 접근할 수도 있습니다.

 

ga4_view_item 트리거 생성

 

트리거명: ga4_view_item (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: view_item (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_구글애널리틱스4_설정법_9.png

 

4. 카탈로그(=상품목록)에서 개별 상품 클릭 태그 생성
 

카탈로그에서 상품 목록을 보던 중

어떤 상품의 상세 페이지 링크를 클릭하는

이벤트를 처리하는 태그를 생성합니다.

 

ga4_select_item 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_select_item (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

구성 태그: GA4 global tag (2항에서 생성했습니다.)

이벤트 이름: select_item (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_10.png

 

ga4_select_item 트리거 생성

 

트리거명: ga4_select_item (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: select_item (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_구글애널리틱스4_설정법_11.png

 
5. 상품 상세페이지 조회 태그 생성
 

어떤 상품의 상세 페이지를 조회하는

이벤트를 처리하는 태그를 생성합니다.

 

ga4_view_item 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_view_item (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

구성 태그: GA4 global tag (2항에서 생성했습니다.)

이벤트 이름: view_item (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_12.png

 

ga4_view_item 트리거 생성

 

트리거명: ga4_view_item (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: view_item (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_구글애널리틱스4_설정법_13.png

 

6. 장바구니 담기 태그 생성
 

어떤 상품의 상세 페이지에서

해당 상품을 장바구니에 담는

이벤트를 처리하는 태그를 생성합니다.

 

ga4_add_to_cart 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_add_to_cart (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

구성 태그: GA4 global tag (2항에서 생성했습니다.)

이벤트 이름: add_to_cart (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_14.png

 

ga4_add_to_cart 트리거 생성

 

트리거명: ga4_add_to_cart (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: add_to_cart (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_구글애널리틱스4_설정법_15.png

 

8. 지금 구매하기 태그 생성
 

어떤 상품의 상세 페이지에서

해당 상품을 지금 구매하는

이벤트를 처리하는 태그를 생성합니다.

 

ga4_begin_checkout 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_begin_checkout (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

구성 태그: GA4 global tag (2항에서 생성했습니다.)

이벤트 이름: begin_checkout (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_16.png

 

ga4_begin_checkout 트리거 생성

 

트리거명: ga4_begin_checkout (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: begin_checkout (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_구글애널리틱스4_설정법_17.png

 

8. 장바구니 목록 조회하기 태그 생성
 

장바구니 목록 페이지를 조회하는

이벤트를 처리하는 태그를 생성합니다.

 

유니버설 애널리틱스에서

구글 애널리틱스 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}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_18.png

 

ga4_view_cart 트리거 생성

 

트리거명: ga4_view_cart (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: view_cart (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_구글애널리틱스4_설정법_19.png

 

9. 장바구니 품목 삭제하기 태그 생성
 

장바구니 목록 페이지에서

개별 품목을 삭제하하는

이벤트를 처리하는 태그를 생성합니다.

 

ga4_remove_from_cart 태그 생성

 

좌측 메뉴에서 [태그] 탭을 클릭합니다.

 

태그명: ga4_remove_from_cart (텍스트를 복사하여 붙여넣으세요)

태그 유형: Google 애널리틱스: GA4 이벤트

구성 태그: GA4 global tag (2항에서 생성했습니다.)

이벤트 이름: remove_from_cart (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)

이벤트 매개변수 - 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_20.png

 

ga4_remove_from_cart 트리거 생성

 

트리거명: ga4_remove_from_cart (텍스트를 복사하여 붙여넣으세요)

트리거 유형: 맞춤 이벤트

이벤트 이름: remove_from_cart (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_구글애널리틱스4_설정법_21.png

 

10. 결제 완료 태그 생성
 

결제 완료 페이지가 표시되는

이벤트를 처리하는 태그를 생성합니다.

 

구글 애널리틱스 4와 GTM 설정 과정에서

유일하게 변수 설정이 까다롭습니다.

 

DLV.ecommerce.transaction_id 변수 생성

 

변수명: DLV.ecommerce.transaction_id (텍스트를 복사하여 붙여넣으세요)

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.transaction_id (텍스트를 복사하여 붙여넣으세요)

데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

 

구글태그매니저_구글애널리틱스4_설정법_22.png

 

동일한 방식으로 아래의 변수를 생성합니다.

 

변수명: 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 (텍스트를 복사하여 붙여넣으세요)

 

구글태그매니저_구글애널리틱스4_설정법_24.png

 

수고하셨습니다.

 

이제

사이트에 이미 설치하신 gaectk.js 라이브러리와

GTM 연결 작업이 완료되었습니다.

 

11. Universal Analytics 폴더 생성

 
이 단계는 구글 애널리틱스 4를
유니버설 애널리틱스와 병행 사용하시려는
경우에 더욱 신경쓰셔야 합니다.
 
GTM을 열심히 활용하다보면
수 십가지 태그가 혼란스럽게
뒤섞인 상태가 될 수 있기 때문입니다.
 
물론,
GTM의 버전 관리 로그를 세심하게 살펴보시면
뒤엉킨 태그 무더기 속에서도
필요한 부분을 찾으시겠지만
틈틈히 정리를 해두시면 칼퇴는 일상이 됩니다.
 
구글태그매니저_구글애널리틱스4_설정법_25.png

 

언제나 칼퇴를 향한 노력은 계속되어야 합니다.

 

위의 캡처 화면과 같이

Google Analytics 4 폴더를 생성하신 후

이번에 생성한 변수, 태그, 트리거를 모두

Google Analytics 4 폴더로 이동하세요.

 

12. 게시하기

 

Tag Assistant를 사용하여

설정 과정에서 오류가 없었는지 확인하신 후에

[제출] 버튼을 클릭하여

GTM이 목표 홈페이지에 태그를 게시하도록 허락합니다.

 

구글태그매니저_구글애널리틱스4_설정법_26.png

 

게시하시는 버전을 식별할 수 있는

자세한 정보를 자세히 기록해 두시는 습관이

항상 더 좋다는 점을 명심하세요.

 

구글태그매니저_구글애널리틱스4_설정법_27.png

 

GTM으로 여러가지 이벤트를 추적하다보면

GTM 관리자가 태그 무더기가 뒤섞인 상태일 수 있고

 

이번에 설정하신 후에 전혀 손대지 않으신다 해도

한참 후에 다시 보면 아무것도 기억이 안날 수도 있습니다.

 

여러 개의 복잡한 시스템을 관리하실 때에는

기록은 기억을 지배한다는 격언을

항상 잊지 않으셔야 합니다.

 

수고가 많으셨습니다.

 

지금까지

gaectk.js 라이브러리를 이용하여

유니버설 애널리틱스,

구글 애널리틱스 4을 JS API로 직접 연결하거나

GTM과 연동하는 방법을 알아봤습니다.