지금까지 구글 애널리틱스의
이커머스 데이터 수집 방식에서
유니버설 애널리틱스와 구글 애널리틱스 4
구글 태그 매니저의 복잡한 상호 관계에 대해서
정확히 이해하기 위해
상당히 많은 시간을 할애했습니다.
이제
구글 태그 매니저를 이용해서
유니버설 애널리틱스(=구버전)의
이커머스 데이터 수집 설정 방법을
살펴 볼 차례입니다.
한번 더 말씀드리면 이 포스팅의 목적은
유니버설 애널리틱스와 구글 태그 매니저를 설정해서
실무에 필요한 모든 이커머스 데이터 수집 기능을
즉시 정확하게 활성화하는 것입니다.
유니버설 애널리틱스와 구글 태그 매니저를
단순히 살펴보고 실습하는 정보가 필요하시면
다른 더 좋은 정보를 찾아보시길 부탁드립니다.
1. 구글 태그 매니저 로그인 하기
이 화면을 확인하셨다면
변수명: UA Tracker
추적 ID: UA-XXXXXXX (유니버설 애널리틱스 관리자에서 확인한 Tracking ID입니다.)
UA global tag 태그 생성
태그명: UA global tag
태그 유형: Google 애널리틱스: 유니버설 애널리틱스
추적 유형: 페이지뷰
Google 애널리틱스 설정: {{UA Tracker}} (방금 전에 생성한 변수입니다.)
Trigger: All Pages (GTM이 이미 제공하는 트리거를 선택하세요.)
이제 글로벌 태그를 생성하고 설정했습니다.
하나의 태그 설정을 완료할 때마다
구글 태그 매니저는 Tag Assistant라는
독특한 디버거를 제공하기 때문에
게시하려는 사이트에서 문제없이 작동하는지
쉽게 확인할 수 있습니다.
이 포스팅을 작성한 2021년 10월 기준
Tag Assistant는 beta 버전입니다.
3. 미리보기 실행하기
구글 태그 매니저 관리자 화면 상단의
[미리보기] 단추를 클릭하세요.
Your wetsite's URL 입력란에 GTM을 적용하려는
사이트 주소를 입력한 후 Connect를 클릭하세요.
[Continue]를 클릭하시면 아래와 같은 화면이 나타나면서
특별한 문제가 없다면
입력한 URL의 페이지가 새창에서 표시되고
아래와 같은 화면으로 전환됩니다.
[Continue]를 클릭하시면 아래와 같은 화면이 표시됩니다.
[Tags Fired] 섹션에 UA global tag가 표시되었다면 축하드립니다!
현재 여러분의 화면이 아래의 캡처 화면과
조금 달라도 신경쓰실 필요가 없습니다.
저희가 캡처한 Tag Assistant 화면은 당연히,
모든 설정을 이상없이 완료한 상태이기 때문에
여러분도 모든 순서를 따르시면
결국 동일한 Tag Assistant 화면을 볼 것입니다.
지금은
[Tags Fired] 섹션에 UA global tag가
표시되었으면 성공입니다!
태그 한개를 완성하실 때마다
Tag Assitant를 실행시켜서
이상없이 작동하는지 확인하세요.
물론,
모든 태그를 생성한 후에
한번에 검토하는 방법도 가능하지만
구글 애널리틱스의 이커머스 태그는
암시적인 상호 의존 관계가 있어서
전단계의 태그를 생성할 때 사소한 실수가
후단계의 태그 실행에 악영향을 미칠 수 있습니다.
더하여,
아직은 사이트에도 gaectk.js 라이브러리를
문제없이 설치되었다고 확신하시면 안됩니다.
상호 의존성이 있는 오류가
복잡하게 뒤엉킨 상황을 피하시는 것이
GTM 설정 시간을 훨씬 더 단축시킵니다.
이제
일반적인 쇼핑몰 구매 고객의 행동 순서를 따라서
카탈로그 조회 태그를 생성할 차례입니다.
DLV.ecommerce.actionField.list 변수 생성
좌측 메뉴에서 [변수] 탭을 클릭합니다.
변수명: DLV.ecommerce.actionField.list (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: ecommerce.actionField.list (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
참고로,
DLV는 저희 싱글뷰가 정한
DataLayer Variable의 약자일 뿐입니다.
eec_add_impression 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: eec_add_impression (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: 유니버설 애널리틱스
추적 유형: 이벤트 (선택 상자에서 선택하세요.)
이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 작업: add_imp (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 라벨: Catalog:{{DLV.ecommerce.actionField.list}} (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 값: 공란
비 상호작용 조회: 참 (선택 상자에서 선택하세요.)
Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)
이 태그의 설정 재정의 사용: 체크박스 선택
기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)
기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택
참고로,
두 가지 배경 지식을 이해하셔야 합니다.
{{DLV.ecommerce.actionField.list}}는
방금 전에 생성한 변수를 사용하겠다는 예약어입니다.
이벤트 추적매개변수에 입력한
카테고리, 작업, 라벨의 값은
GTM 설정이 성공적으로 완료되면
아래의 캡쳐 화면과 같은
유니버설 애널리틱스 보고서에서
확인하실 수 있습니다.
EEC 카테고리를 클릭하시면
하위 수준의 액션과 라벨을
직관적으로 살펴보실 수 있습니다.
다시
GTM 관리자 화면으로 돌아와서
태그를 설정하면서 스크롤을 내리면
트리거 설정 화면이 표시됩니다.
이 섹션을 클릭해서 트리거를 생성합니다.
이후에 좌측 메뉴에서 [트리거] 탭을 클릭해서 접근할 수 있습니다.
eec.impressionView 트리거 생성
트리거명: eec.impressionView (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: eec.impressionView (텍스트를 복사하여 붙여넣으세요)
카탈로그에서 상품 목록을 보던 중
어떤 상품의 상세 페이지 링크를 클릭하는
이벤트를 처리하는 태그를 생성합니다.
DLV.sv_event_lbl 변수 생성
좌측 메뉴에서 [변수] 탭을 클릭합니다.
변수명: DLV.sv_event_lbl (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: sv_event_lbl (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
eec_click_item 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: eec_click_item (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: 유니버설 애널리틱스
추적 유형: 이벤트 (선택 상자에서 선택하세요.)
이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 작업: click_item (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 라벨: {{DLV.sv_event_lbl}} (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 값: 공란
비 상호작용 조회: 참 (선택 상자에서 선택하세요.)
Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)
이 태그의 설정 재정의 사용: 체크박스 선택
기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)
기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택
eec.impressionClick 트리거 생성
트리거명: eec.impressionClick (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: eec.impressionClick (텍스트를 복사하여 붙여넣으세요)
어떤 상품의 상세 페이지를 조회하는
이벤트를 처리하는 태그를 생성합니다.
DLV.ecommerce.detail.actionField.list 변수 생성
4항에서 이미 생성한
DLV.ecommerce.actionField.list와 혼동하지 마세요.
좌측 메뉴에서 [변수] 탭을 클릭합니다.
변수명: DLV.ecommerce.detail.actionField.list (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: ecommerce.detail.actionField.list (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
eec_view_detail 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: eec_view_detail (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: 유니버설 애널리틱스
추적 유형: 이벤트 (선택 상자에서 선택하세요.)
이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 작업: view_detail (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 라벨: {{DLV.ecommerce.detail.actionField.list}} (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 값: 공란
비 상호작용 조회: 참 (선택 상자에서 선택하세요.)
Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)
이 태그의 설정 재정의 사용: 체크박스 선택
기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)
기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택
eec.detail 트리거 생성
트리거명: eec.detail (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: eec.detail (텍스트를 복사하여 붙여넣으세요)
어떤 상품의 상세 페이지에서
해당 상품을 장바구니에 담는
이벤트를 처리하는 태그를 생성합니다.
DLV.sv_event_lbl 변수 생성
5항에서 이미 생성헸습니다.
eec_add_cart 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: eec_add_cart (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: 유니버설 애널리틱스
추적 유형: 이벤트 (선택 상자에서 선택하세요.)
이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 작업: add_cart (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 라벨: {{DLV.sv_event_lbl}} (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 값: {{DLV.sv_event_val}} (텍스트를 복사하여 붙여넣으세요)
비 상호작용 조회: 참 (선택 상자에서 선택하세요.)
Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)
이 태그의 설정 재정의 사용: 체크박스 선택
기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)
기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택
eec.add 트리거 생성
트리거명: eec.add (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: eec.add (텍스트를 복사하여 붙여넣으세요)
어떤 상품의 상세 페이지에서
해당 상품을 지금 구매하는
이벤트를 처리하는 태그를 생성합니다.
DLV.ecommerce.checkout.actionField.step 변수 생성
좌측 메뉴에서 [변수] 탭을 클릭합니다.
변수명: DLV.ecommerce.checkout.actionField.step (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: ecommerce.checkout.actionField.step (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
DLV.sv_event_val 변수 생성
변수명: DLV.sv_event_val (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: DLV.sv_event_val (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
DLV.sv_event_lbl 변수 생성
5항에서 이미 생성헸습니다.
eec_checkout_step_N 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: eec_checkout_step_N (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: 유니버설 애널리틱스
추적 유형: 이벤트 (선택 상자에서 선택하세요.)
이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 작업: checkout_step_{{DLV.ecommerce.checkout.actionField.step}} (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 라벨: {{DLV.sv_event_lbl}} (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 값: {{DLV.sv_event_val}} (텍스트를 복사하여 붙여넣으세요)
비 상호작용 조회: 참 (선택 상자에서 선택하세요.)
Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)
이 태그의 설정 재정의 사용: 체크박스 선택
기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)
기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택
eec.checkout 트리거 생성
트리거명: eec.checkout (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: eec.checkout (텍스트를 복사하여 붙여넣으세요)
장바구니 목록 페이지를 조회하는
이벤트를 처리하는 태그를 생성합니다.
이 이벤트는 유니버설 애널리틱스에서는
그저 일반 이벤트라서 무시하실 수 있습니다.
하지만
구글 애널리틱스 4로 이전을 준비하거나
구글 애널리틱스 4와 병행하시는 경우에
이 태그를 생성해서
구글 애널리틱스 버전과 무관하게
동일한 구조를 조성하는 것이
추후의 유지보수 업무에서 더 효율적입니다.
실제로 gaectk.js 라이브러리에서는
구글 애널리틱스 버전과 무관하게
gaectkCart.viewCart()라는
동일한 인터페이스를 제공합니다.
DLV.sv_event_val 변수 생성
8항에서 이미 생성했습니다.
DLV.sv_event_lbl 변수 생성
5항에서 이미 생성헸습니다.
eec_view_cart 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: eec_view_cart (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: 유니버설 애널리틱스
추적 유형: 이벤트 (선택 상자에서 선택하세요.)
이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 작업: view_cart (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 라벨: {{DLV.sv_event_lbl}} (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 값: {{DLV.sv_event_val}} (텍스트를 복사하여 붙여넣으세요)
비 상호작용 조회: 참 (선택 상자에서 선택하세요.)
Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)
이 태그의 설정 재정의 사용: 체크박스 선택
기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)
기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택
eec.viewCart 트리거 생성
트리거명: eec.viewCart (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: eec.viewCart (텍스트를 복사하여 붙여넣으세요)
장바구니 목록 페이지에서
개별 품목을 삭제하하는
이벤트를 처리하는 태그를 생성합니다.
DLV.ecommerce.remove.actionField.list 변수 생성
변수명: DLV.ecommerce.remove.actionField.list (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: ecommerce.remove.actionField.list (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
DLV.sv_event_val 변수 생성
8항에서 이미 생성했습니다.
eec_remove_cart 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: eec_remove_cart (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: 유니버설 애널리틱스
추적 유형: 이벤트 (선택 상자에서 선택하세요.)
이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 작업: remove_cart (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 라벨: {{DLV.ecommerce.remove.actionField.list}} (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 값: {{DLV.sv_event_val}} (텍스트를 복사하여 붙여넣으세요)
비 상호작용 조회: 참 (선택 상자에서 선택하세요.)
Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)
이 태그의 설정 재정의 사용: 체크박스 선택
기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)
기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택
eec.remove 트리거 생성
트리거명: eec.remove (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: eec.remove (텍스트를 복사하여 붙여넣으세요)
결제 완료 페이지가 표시되는
이벤트를 처리하는 태그를 생성합니다.
DLV.ecommerce.purchase.actionField.id 변수 생성
변수명: DLV.ecommerce.purchase.actionField.id (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: ecommerce.purchase.actionField.id (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
DLV.ecommerce.purchase.actionField.revenue 변수 생성
변수명: DLV.ecommerce.purchase.actionField.revenue (텍스트를 복사하여 붙여넣으세요)
변수 유형: 데이터 영역 변수
데이터 영역 변수 이름: ecommerce.purchase.actionField.revenue (텍스트를 복사하여 붙여넣으세요)
데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
eec_purchase 태그 생성
좌측 메뉴에서 [태그] 탭을 클릭합니다.
태그명: eec_purchase (텍스트를 복사하여 붙여넣으세요)
태그 유형: Google 애널리틱스: 유니버설 애널리틱스
추적 유형: 이벤트 (선택 상자에서 선택하세요.)
이벤트 추적매개변수 - 카테고리: EEC (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 작업: purchase (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 라벨: OrderID:{{DLV.ecommerce.purchase.actionField.id}} (텍스트를 복사하여 붙여넣으세요)
이벤트 추적매개변수 - 값: {{DLV.ecommerce.purchase.actionField.revenue}} (텍스트를 복사하여 붙여넣으세요)
비 상호작용 조회: 참 (선택 상자에서 선택하세요.)
Google 애널리틱스 설정: {{UA Tracker}} (선택 상자에서 선택하세요.)
이 태그의 설정 재정의 사용: 체크박스 선택
기타 설정 - 전자상거래 - 향상된 전자상거래 기능 사용: 참 (선택 상자에서 선택하세요.)
기타 설정 - 전자상거래 - 데이터 영역 사용: 체크박스 선택
eec.purchase 트리거 생성
트리거명: eec.purchase (텍스트를 복사하여 붙여넣으세요)
트리거 유형: 맞춤 이벤트
이벤트 이름: eec.purchase (텍스트를 복사하여 붙여넣으세요)
수고하셨습니다.
이제
사이트에 이미 설치하신 gaectk.js 라이브러리와
GTM 연결 작업이 완료되었습니다.
12. Universal Analytics 폴더 생성
언제나 칼퇴를 향한 노력은 계속되어야 합니다.
위의 캡처 화면과 같이
Universal Analytics 폴더를 생성하신 후
이번에 생성한 변수, 태그, 트리거를 모두
Universal Analytics 폴더로 이동하세요.
Tag Assistant를 사용하여
설정 과정에서 오류가 없었는지 확인하신 후에
[제출] 버튼을 클릭하여
GTM이 목표 홈페이지에 태그를 게시하도록 허락합니다.
게시하시는 버전을 식별할 수 있는
자세한 정보를 자세히 기록해 두시는 습관이
GTM으로 여러가지 이벤트를 추적하다보면
GTM 관리자가 태그 무더기가 뒤섞인 상태일 수 있고
이번에 설정하신 후에 전혀 손대지 않으신다 해도
한참 후에 다시 보면 아무것도 기억이 안나는 상태일 수도 있습니다.
여러 개의 복잡한 시스템을 관리하실 때에는
기록은 기억을 지배한다는 격언을
항상 잊지 않으셔야 합니다.
수고가 많으셨습니다.
다음 포스팅에서는
gaectk.js 라이브러리를 기반으로
구글 애널리틱스 4와 GTM을 연결하겠습니다.
구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - Goog...
구글 애널리틱스 4의 전자상거래 측정 방식을 알아보세요. - 2
