GAECTK 설정법
최종수정일: 2021 09 10
Google Analytics Enhanced Ecommerce 코드를
빠르고 정확하게 설치하세요.
책임과 한계
본 설명서에서 안내하는 자바스크립트 코드를 PC 페이지와 Mobile 페이지에 각각 적용해야 합니다.
PC와 Mobile 공통 사용하는 반응형 레이아웃일 경우에는 한번만 설치합니다.
본 설명서에서 안내하는 코드 블록은 http 혹은 https 브라우저 기반 쇼핑몰에서만 작동합니다.
문서의 본문 중에서 아래의 표시를 주의해 주세요.
노란색 배경 문장은 간략한 설명입니다.
빨간색 배경 단어는 쇼핑몰 엔진에서 반드시 대치예약어로 입력해야 하는 입력변수입니다.
회색 배경 단어는 쇼핑몰 엔진에서 제공하지 않거나 추적이 필요하지 않은 경우 빈문자열('' 혹은 "")으로 입력할 수 있는 입력변수입니다. 빈문자열로 입력해도 GA 추적에 오류가 발생하지는 않지만 추적 정밀도가 낮아집니다.
GA v3 공통 enhanced ecommerce 설정
Enhanced Ecommerce Settings의 FUNNEL STEPS에
1단계 제목에 "cart page" 입력
2단계 제목 "order page" 입력
추가 gaectkSettlement.patch( step_number, step_title )로 지정한 funnel step 입력
Referral Exclusion List 설정
도메인.com(co.kr)
m.도메인.com(co.kr)
www.도메인.com(co.kr)
pay.naver.com
m.pay.naver.com
xpay.lgdacom.net
xpay.lgdacom.net:7080
utm_medium 자동 분류값
디스플레이 광고: display, cpm, banner
유튜브 광고하는 구글애즈와 연결하면 유튜브는 자동으로 google / cpc로 분류됨
이 현상을 singleview naming convention으로 통일하려면 아래의 설정을 활성화시켜야함
Admin -> Property Settings -> Advanced Setting -> Allow manual tagging (UTM values) to override auto-tagging (GCLID values) for Google Ads and Search Ads 360 integration 활성화
검색 광고: cpc, ppc, paidsearch
동영상 광고: cpv, cpa, cpp
SNS: social, social-network, social-media, sm, social network, social media
기본 Goal 설정
아래의 Goal은 Google Ads와 연동할 경우에 반드시 목표 메뉴에서 채택 여부를 검토해야 함
ATC Goal setup: Template > engagement > Add to cart
ATC Goal descriptionName: Add to cart, Type: Event
ATC Goal details
Category Equals to 'button', Action Equals to 'clicked', Label Begins with 'atc_', Value Greater than '0', Use the Event value as the Goal Value for the conversion: Yes
BI Goal setup: Template > Revenue > place an order
BI Goal descriptionName: buy_immediate, Type: Event
BI Goal details
Category Equals to 'button', Action Equals to 'clicked', Label Begins with 'bi_', Value Greater than '0', Use the Event value as the Goal Value for the conversion: Yes
gt_4pages_reader Goal setup: custom
gt_4pages_reader Goal descriptionName: gt_4pages_reader, Type: Pages/Screens per session
gt_4pages_reader Goal details
Pages/Screens per session Greater than '4', Value optional '5000' ₩KRW
longer_than_5mins_staying Goal setup: custom
longer_than_5mins_staying Goal descriptionName: longer_than_5mins_staying, Type: Duration
longer_than_5mins_staying Goal detailsDuration Greater than Hours '0' Minutes '5' Seconds '0', Value optional '10000' ₩KRW
공통 헤더와 푸터 추적 코드 설치
1. Google Analytics v3만 사용
</head> 바로 위에 아래의 코드 추가
모든 GAECTK 추적 스크립트보다 우선 실행되어야 합니다.
2. Google Analytics v3와 v4 병행
</head> 바로 위에 아래의 코드 추가
모든 GAECTK 추적 스크립트보다 우선 실행되어야 합니다.
2. Google Analytics v4만 사용
</head> 바로 위에 아래의 코드 추가
모든 GAECTK 추적 스크립트보다 우선 실행되어야 합니다.
4. 페이지 최종 정보 전송 및 API 연결 종료
</body> 바로 위에 아래의 코드 추가
모든 GAECTK 추적 스크립트보다 나중에 실행되어야 합니다.
상품 카탈로그 목록 추적 코드 설치
1. 모듈 초기화
상품 리스트 반복문 전에 아래의 리스트 초기화 코드를 삽입
gaectkList.loadPromoInfo('what_they_100', 'what_they_100', 'what_they_100', 'what_they_100_pc_main');
2. 프로모션 정보 설정
gaectkList.init() 후 gaectkList.queueItemInfo() 전에 설정해야 함
3. 상품 목록 정보 메모리 적재
상품 목록 반복문 내부에 아래의 코드를 설치
4. 상품 목록 정보 전송
상품 목록 반복문 종료 직후에 아래의 코드를 설치
5. 상품 클릭 이벤트 전송
상품의 상세 페이지로 연결되는 <A HREF 클릭 핸들러에 연결
상품 상세 페이지 추적 코드 설치
1. 모듈 초기화
상품상세화면을 관리하는 소스에서 작업합니다.
페이지 상단에 추가 코드 설치
2. 상품 상세 정보 메모리 적재
동일한 상품고유번호와 상품명은 GAECTK 추적 코드 전체에서 일관되게 적용되어야 합니다.
카테고리명, 브랜드명, 색상 등의 베리에이션명은 추적이 필요하지 않을 경우 공란으로 입력할 수 있습니다.
3. 상품 상세 정보 전송
동일한 상품고유번호와 상품명은 GAECTK 추적 코드 전체에서 일관되게 적용되어야 합니다.
4. 바로구매 이벤트 발생 시 상품 상세 정보 전송
바로구매하기 이벤트가 발생하면 아래의 코드를 실행해야 합니다.
아래의 코드가 작동되기 전에 gaectkDetail.init(), gaectkDetail.loadItemInfo(), gaectkDetail.patchDetail() 함수가 실행되어야 합니다.
5. 장바구니 담기 이벤트 발생 시 상품 상세 정보 전송
장바구니 담기 이벤트가 발생하면 아래의 코드를 실행해야 합니다.
아래의 코드가 작동되기 전에 gaectkDetail.init(), gaectkDetail.loadItemInfo(), gaectkDetail.patchDetail() 함수가 실행되어야 합니다.
장바구니 화면 추적 코드 설치
1. 모듈 초기화
장바구니에 담긴 상품목록 페이지를 관리하는 소스에서 작업합니다.
페이지 상단부 자바스크립트 영역에 추가 코드 설치
2. 장바구니 상품 정보 메모리 적재
장바구니 목록 반복 영역 추가 코드 설치
카테고리명, 브랜드명, 색상 등의 베리에이션명, 쿠폰고유번호는 추적이 필요하지 않을 경우 공란(빈문자열; '' 혹은 "")으로 입력할 수 있습니다.
장바구니고유번호는 쇼핑몰 솔루션의 장바구니고유번호체계와 무관하며, GAECTK가 장바구니에 담긴 상품을 개별적으로 구분하기 위해 인식하는 임시 일련번호입니다. 이 일련번호는 현재 표시된 페이지에서 장바구니 항목의 순서 인덱스만으로 충분합니다. 하지만 하나의 장바구니고유번호에는 한가지 종류의 상품이 할당되어야 합니다.
3. 장바구니 열람 이벤트 전송
Google Analytics v3만 사용하는 경우에는 무시 가능
4. 장바구니에서 전체 상품 주문 이벤트 발생 시 상품 정보 전송
장바구니 모든 상품 결제하기 행동 추적 코드 설치
5. 장바구니에서 개별 상품 주문 이벤트 발생 시 상품 정보 전송
장바구니 목록 중에서 개별 상품 결제하기 선택하는 행동 추적 코드 설치
삭제선택된장바구니고유번호배열은 gaectkCart.queueItemInfo()에서 입력한 장바구니고유번호 목록 중에서 삭제 요청된 고유번호의 자바스크립트 배열 변수입니다. 자바스크립트 배열 변수의 구조는 아래와 같아야 합니다. 이 배열 원소의 개수는 gaectkCart.queueItemInfo()에서 입력된 개수를 초과하지 않는 것을 권장합니다.
var ArrayExample[0] = 삭제요청된장바구니임시인덱스
var ArrayExample[n] = 삭제요청된장바구니임시인덱스
6. 장바구니 비우기 이벤트 발생 시 상품 정보 전송
장바구니 모두 비우는 행동 추적 코드 설치
7. 장바구니에서 개별 상품 삭제 이벤트 발생 시 상품 정보 전송
장바구니에서 개별 항목 삭제하는 행동 추적 코드 설치
삭제선택된장바구니고유번호배열은 gaectkCart.queueItemInfo()에서 입력한 장바구니임시인덱스 목록 중에서 삭제 요청된 장바구니임시인덱스의 자바스크립트 배열 변수입니다. 자바스크립트 배열 변수의 구조는 아래와 같아야 합니다. 이 배열 원소의 개수는 gaectkCart.queueItemInfo()에서 입력된 원소 개수를 초과하지 않는 것을 권장합니다.
var ArrayExample[0] = 삭제요청된장바구니임시인덱스1
var ArrayExample[n] = 삭제요청된장바구니임시인덱스n
구매시작 화면 추적 코드 설치
1. 모듈 초기화
결제화면의 상품리스트 페이지를 관리하는 소스에서 작업합니다.
2. 구매시작 화면 상품 정보 메모리 적재
결제 목록 반복문 내부애 아래의 추가 코드 삽입
카테고리명, 브랜드명, 색상 등의 베리에이션명, 쿠폰고유번호는 추적이 필요하지 않을 경우 공란 (빈문자열: '' 혹은 "")으로 입력할 수 있습니다.
3. 구매시작 화면 상품 정보 전송
결제 목록 반복문이 끝난 영역, 페이지 소스의 하단에 아래의 추가 코드 삽입
결제완료 화면 추적 코드 설치
1. 모듈 초기화
페이지 상단에 추가 코드 설치
2. 결제완료 화면 상품 정보 메모리 적재
결제 결과 내역/품목을 표시하는 반복문 내부에 코드 설치
카테고리명 ,브랜드명, 색상 등의 베리에이션명, 쿠폰고유번호는 추적이 필요하지 않을 경우 공란(빈문자열:'' 혹은 "")으로 입력할 수 있습니다.
3. 결제완료 화면 상품 정보 전송
페이지 마지막에 추가 코드 설치
주문관리 화면의 추적 코드 설치
1. 모듈 초기화
주문관리 화면에서 실행
2. 주문관리 화면 상품 정보 메모리 적재
주문 내역이 표시되는 반복문 내부에 아래의 코드 설치
3. 주문 취소 이벤트발생 시 상품 정보 전송
주문취소와 환불 요청 시 실행 코드
기타 추적 코드 설치
1. 마우스 클릭 추적, Google Analytics v3 전용
onClick handler에 배치
2. 가상 페이지뷰 생성, Google Analytics v3 전용
필요한 곳에 배치
3. 스크롤 추적, Google Analytics v3 전용
수직 스크롤 화면의 여러 위치에 배치
4. 현재 URI 인식, pure JS
설치 시 주의 사항과 장애 복구 조치
본 설명서에서 안내하는 자바스크립트 코드는 설치 대상 쇼핑몰 솔루션을 영구적으로 손상시키는 위험성이 매우 낮습니다. 하지만 기존에 설치된 코드들과 테스트 과정에서 예측할 수 없었던 특이한 충돌이 발생하여 쇼핑몰 기능의 일부가 작동하지 않을 수 있습니다.
오류의 원인은 매우 다양하고 해결안도 그 만큼 다양하기 때문에 정확한 원인이 밝히고 해결책을 정의하는 것이 매우 중요합니다.
따라서, 이런 경우를 발견하셨을 경우 아래의 두 가지 조치를 순서대로 시행해 주십시오.
1. 오류가 발생한 페이지에 존재하는 자바스크립트 소스코드에서 gaectk 전치사가 존재하는 모든 함수를 설치 전 상태로 roll back합니다.
2. singleview.co.kr과 해당 오류를 공유하고, 후속 조치를 논의합니다.