최종수정일: 2023 11 01
Google Analytics 4의 전자상거래 추적 코드를 빠르고 정확하게 설치하세요.
책임과 한계
본 설명서에서 안내하는 자바스크립트 코드를 PC 페이지와 Mobile 페이지에 각각 적용해야 합니다.
PC와 Mobile 공통 사용하는 반응형 레이아웃일 경우에는 한번만 설치합니다.
본 설명서에서 안내하는 코드 블록은 http 혹은 https 브라우저 기반 쇼핑몰에서만 작동합니다.
문서의 본문 중에서 아래의 표시를 주의해 주세요.
노란색 배경 문장은 간략한 설명입니다.
빨간색 배경 단어는 쇼핑몰 엔진에서 반드시 대치 예약어로 입력해야 하는 입력변수입니다.
회색 배경 단어는 쇼핑몰 엔진에서 제공하지 않거나 추적이 필요하지 않은 경우 빈문자열(” 혹은 “”)으로 입력할 수 있는 입력변수입니다. 빈문자열로 입력해도 GA 추적에 오류가 발생하지는 않지만 추적 정밀도가 낮아집니다.
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
공통 헤더와 푸터 추적 코드 설치
1. Google Analytics v4 vanila JS 방식
</head> 바로 위에 아래의 코드 추가
모든 GAECTK 추적 스크립트보다 우선 실행되어야 합니다.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
<!-- Google Analytics Code Begin (2024-02-15 12:22:12) singleview.co.kr -->
<script type="text/javascript" src="https://svapi.co.kr:5018/gaectk.js"></script>
<script>
gaectkHeader.init(['G-XXXXXXXXXX']);
</script>
<!-- Google Analytics Code End (2024-02-15 12:22:12) singleview.co.kr -->2. Google Analytics v4 GTM API 방식
<head>에서 최대한 위에 아래의 코드 추가
모든 GAECTK 추적 스크립트보다 우선 실행되어야 합니다.
<!-- 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-XXXXXXX');</script>
<!-- End Google Tag Manager -->
<!-- Google Analytics Code Begin (2024-02-15 12:22:12) singleview.co.kr -->
<script type="text/javascript" src="https://svapi.co.kr:5018/gaectk.js"></script>
<script>
gaectkHeader.init(['GTM-XXXXX']);
</script>
<!-- Google Analytics Code End (2024-02-15 12:22:12) singleview.co.kr -->여는 </body> 태그 바로 뒤에 아래의 코드 추가
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->4. 페이지 최종 정보 전송 및 API 연결 종료
</body> 바로 위에 아래의 코드 추가
모든 GAECTK 추적 스크립트보다 나중에 실행되어야 합니다.
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script>
gaectkHeader.close();
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->상품 카탈로그 목록 추적 코드 설치
1. 모듈 초기화
상품 리스트 반복문 전에 아래의 리스트 초기화 코드를 삽입
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkList.init('페이지혹은모듈제목', '카테고리목록페이지번호', '페이지당목록수');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->페이지혹은모듈제목 필수, 카테고리목록페이지번호 선택, 페이지당목록수 선택
gaectkList.loadPromoInfo(‘what_they_100’, ‘what_they_100’, ‘what_they_100’, ‘what_they_100_pc_main’);
2. 프로모션 정보 설정
gaectkList.init() 후 gaectkList.queueItemInfo() 전에 설정해야 함
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkList.loadPromoInfo('프로모션ID', '프로모션명칭', '크리에이티브명칭', '개재위치');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->3. 상품 목록 정보 메모리 적재
상품 목록 반복문 내부에 아래의 코드를 설치
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkList.queueItemInfo('상품고유번호', '상품명', '카테고리명', '브랜드명', '색상 등의 베리에이션명', '상품가격');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->상품고유번호 필수, 상품명 필수, 카테고리명 선택, 브랜드명 선택, 색상 등의 베리에이션명 선택
4. 상품 목록 정보 전송
상품 목록 반복문 종료 직후에 아래의 코드를 설치
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkList.patchImpression('한번에전송할상품목록갯수');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->한번에전송할상품목록갯수 선택(리스트 목록이 약 80개를 초과하는 경우, 분할 전송할 목록의 1회 갯수를 지정함, 지정하지 않으면 30개로 설정
5. 상품 클릭 이벤트 전송
상품의 상세 페이지로 연결되는 <A HREF 클릭 핸들러에 연결
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkList.sendClicked('상품고유번호');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->상품고유번호 필수
상품 상세 페이지 추적 코드 설치
1. 모듈 초기화
상품상세화면을 관리하는 소스에서 작업합니다.
페이지 상단에 추가 코드 설치
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkDetail.init();
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->2. 상품 상세 정보 메모리 적재
동일한 상품고유번호와 상품명은 GAECTK 추적 코드 전체에서 일관되게 적용되어야 합니다.
카테고리명, 브랜드명, 색상 등의 베리에이션명은 추적이 필요하지 않을 경우 공란으로 입력할 수 있습니다.
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkDetail.loadItemInfo('상품고유번호', '상품명', '카테고리명', '브랜드명', '색상 등의 베리에이션명', '상품가격');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->상품고유번호 필수, 상품명 필수, 카테고리명 선택, 브랜드명 선택, 색상 등의 베리에이션명 선택, 상품가격 필수
3. 상품 상세 정보 전송
동일한 상품고유번호와 상품명은 GAECTK 추적 코드 전체에서 일관되게 적용되어야 합니다.
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkDetail.patchBuyImmediately('구매수량');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->구매수량 필수
5. 장바구니 담기 이벤트 발생 시 상품 상세 정보 전송
장바구니 담기 이벤트가 발생하면 아래의 코드를 실행해야 합니다.
아래의 코드가 작동되기 전에 gaectkDetail.init(), gaectkDetail.loadItemInfo(), gaectkDetail.patchDetail() 함수가 실행되어야 합니다.
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkDetail.patchAddToCart('구매수량');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->구매수량 필수
장바구니 화면 추적 코드 설치
1. 모듈 초기화
장바구니에 담긴 상품목록 페이지를 관리하는 소스에서 작업합니다.
페이지 상단부 자바스크립트 영역에 추가 코드 설치
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkCart.init();
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->2. 장바구니 상품 정보 메모리 적재
장바구니 목록 반복 영역 추가 코드 설치
카테고리명, 브랜드명, 색상 등의 베리에이션명, 쿠폰고유번호는 추적이 필요하지 않을 경우 공란(빈문자열; ” 혹은 “”)으로 입력할 수 있습니다.
장바구니고유번호는 쇼핑몰 솔루션의 장바구니고유번호체계와 무관하며, GAECTK가 장바구니에 담긴 상품을 개별적으로 구분하기 위해 인식하는 임시 일련번호입니다. 이 일련번호는 현재 표시된 페이지에서 장바구니 항목의 순서 인덱스만으로 충분합니다. 하지만 하나의 장바구니고유번호에는 한가지 종류의 상품이 할당되어야 합니다.
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkCart.queueItemInfo('장바구니임시인덱스', '상품고유번호', '상품명', '카테고리명', '브랜드명', '색상 등의 베리에이션명', '상품가격', '담은수량', '쿠폰고유번호');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->장바구니임시인덱스 필수, 상품고유번호 필수, 상품명 필수, 카테고리명 선택, 브랜드명 선택, 색상 등의 베리에이션명 선택, 상품가격 필수, 담은수량 필수, 쿠폰고유번호 선택
3. 장바구니 열람 이벤트 전송
Google Analytics v3만 사용하는 경우에는 무시 가능
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkCart.viewCart();
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->4. 장바구니에서 전체 상품 주문 이벤트 발생 시 상품 정보 전송
장바구니 모든 상품 결제하기 행동 추적 코드 설치
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkCart.checkoutAll();
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->5. 장바구니에서 개별 상품 주문 이벤트 발생 시 상품 정보 전송
장바구니 목록 중에서 개별 상품 결제하기 선택하는 행동 추적 코드 설치
삭제선택된장바구니고유번호배열은 gaectkCart.queueItemInfo()에서 입력한 장바구니고유번호 목록 중에서 삭제 요청된 고유번호의 자바스크립트 배열 변수입니다. 자바스크립트 배열 변수의 구조는 아래와 같아야 합니다. 이 배열 원소의 개수는 gaectkCart.queueItemInfo()에서 입력된 개수를 초과하지 않는 것을 권장합니다.
var ArrayExample[0] = 삭제요청된장바구니임시인덱스
var ArrayExample[n] = 삭제요청된장바구니임시인덱스
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
function makeList()
{
var list = new Array();
jQuery(':checkbox:checked').each(function(idx, elem){
list[list.length] = jQuery(elem).attr('data-cart_temp_idx');
});
return list;
}
function submit_form()
{
var cartnos = makeList();
if (!cartnos.length)
return;
gaectkCart.checkoutSelected( cartnos );
document.order.submit();
}
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->주문 선택된장바구니임시인덱스배열 필수
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<input type="checkbox" data-cart_temp_idx="삭제선택된장바구니임시인덱스배열">
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->주문 선택된장바구니임시인덱스배열 필수
6. 장바구니 비우기 이벤트 발생 시 상품 정보 전송
장바구니 모두 비우는 행동 추적 코드 설치
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkCart.removeAll();
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->7. 장바구니에서 개별 상품 삭제 이벤트 발생 시 상품 정보 전송
장바구니에서 개별 항목 삭제하는 행동 추적 코드 설치
삭제선택된장바구니고유번호배열은 gaectkCart.queueItemInfo()에서 입력한 장바구니임시인덱스 목록 중에서 삭제 요청된 장바구니임시인덱스의 자바스크립트 배열 변수입니다. 자바스크립트 배열 변수의 구조는 아래와 같아야 합니다. 이 배열 원소의 개수는 gaectkCart.queueItemInfo()에서 입력된 원소 개수를 초과하지 않는 것을 권장합니다.
var ArrayExample[0] = 삭제요청된장바구니임시인덱스1
var ArrayExample[n] = 삭제요청된장바구니임시인덱스n
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkCart.removeSelected('삭제선택된장바구니임시인덱스배열');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->삭제선택된장바구니임시인덱스배열 필수
구매시작 화면 추적 코드 설치
1. 모듈 초기화
결제화면의 상품리스트 페이지를 관리하는 소스에서 작업합니다.
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkSettlement.init();
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->2. 구매시작 화면 상품 정보 메모리 적재
결제 목록 반복문 내부애 아래의 추가 코드 삽입
카테고리명, 브랜드명, 색상 등의 베리에이션명, 쿠폰고유번호는 추적이 필요하지 않을 경우 공란 (빈문자열: ” 혹은 “”)으로 입력할 수 있습니다.
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkSettlement.queueItemInfo('상품고유번호', '상품명', '카테고리명', '브랜드명', '색상 등의 베리에이션명', '상품가격', '상품수량');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->상품고유번호 필수, 상품명 필수, 카테고리명 선택, 브랜드명 선택, 색상 등의 베리에이션명 선택, 상품가격 필수, 상품수량 필수
3. 구매시작 화면 상품 정보 전송
결제 목록 반복문이 끝난 영역, 페이지 소스의 하단에 아래의 추가 코드 삽입
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkSettlement.patch();
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->결제완료 화면 추적 코드 설치
1. 모듈 초기화
페이지 상단에 추가 코드 설치
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkPurchase.init();
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->2. 결제완료 화면 상품 정보 메모리 적재
결제 결과 내역/품목을 표시하는 반복문 내부에 코드 설치
카테고리명 ,브랜드명, 색상 등의 베리에이션명, 쿠폰고유번호는 추적이 필요하지 않을 경우 공란(빈문자열:” 혹은 “”)으로 입력할 수 있습니다.
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkPurchase.queueItemInfo('상품고유번호', '상품명', '카테고리명', '브랜드명', '색상 등의 베리에이션명', '상품가격', '상품수량', '쿠폰고유번호');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->상품고유번호 필수, 상품명 필수, 카테고리명 선택, 브랜드명 선택, 색상 등의 베리에이션명 선택, 상품가격 필수, 상품수량 필수, 쿠폰고유번호 선택
3. 결제완료 화면 상품 정보 전송
페이지 마지막에 추가 코드 설치
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkPurchase.patchPurchase('주문고유번호', '협력사코드', '결제금액', '배송비', '쿠폰고유번호');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->주문고유번호 필수, 협력사코드 선택, 결제금액 필수, 배송비 필수, 쿠폰고유번호 선택
주문관리 화면의 추적 코드 설치
1. 모듈 초기화
주문관리 화면에서 실행
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkMypage.init();
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->2. 주문관리 화면 상품 정보 메모리 적재
주문 내역이 표시되는 반복문 내부에 아래의 코드 설치
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkMypage.queueItemInfo('상품고유번호', '상품명', '카테고리명', '브랜드명', '색상 등의 베리에이션명', '상품가격', '상품수량', '쿠폰고유번호');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->상품고유번호 필수, 상품명 필수, 카테고리명 선택, 브랜드명 선택, 색상 등의 베리에이션명 선택, 상품가격 필수, 상품수량 필수, 쿠폰고유번호 선택
3. 주문 취소 이벤트발생 시 상품 정보 전송
주문취소와 환불 요청 시 실행 코드
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
gaectkMypage.refund('주문고유번호');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->주문고유번호 필수
기타 추적 코드 설치
1. 마우스 클릭 추적, Google Analytics v3 전용
onClick handler에 배치
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
sendClickEventGaectk('GA에표시될이벤트종류', 'GA에표시될이벤트이름', '클릭후이동할링크주소', '목표윈도우');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->GA에표시될이벤트종류 필수, GA에표시될이벤트이름 필수, 클릭후이동할링크주소 선택(공란 혹은 ‘#’이면 이동 안함), 목표윈도우 선택(윈도우 타이틀)
2. 가상 페이지뷰 생성, Google Analytics v3 전용
필요한 곳에 배치
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
checkNonEcConversionGaectk('가상URL', '페이지제목');
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->가상URL 필수(GA에 표시될 가상 URL, /thankyou.html), 페이지제목 필수
4. 현재 URI 인식, vanlia JS
<!-- Google Analytics Code Begin (2024-02-15 17:17:39) singleview.co.kr -->
<script type="text/javascript">
var sFullUri = window.location.href;
var sCurrentUri = window.location.pathname;
var sCurrentHostName = window.location.origin;
var sCurrentHash = window.location.hash;
if( sCurrentUri.length == 0 || sCurrentUri == '/' )
sTrackingPrefix = 'mainpage';
else
sTrackingPrefix = 'subpage_' + sCurrentUri;
</script>
<!-- Google Analytics Code End (2024-02-15 17:17:39) singleview.co.kr -->설치 시 주의 사항과 장애 복구 조치
본 설명서에서 안내하는 자바스크립트 코드는 설치 대상 쇼핑몰 솔루션을 영구적으로 손상시키는 위험성이 매우 낮습니다. 하지만 기존에 설치된 코드들과 테스트 과정에서 예측할 수 없었던 특이한 충돌이 발생하여 쇼핑몰 기능의 일부가 작동하지 않을 수 있습니다.
오류의 원인은 매우 다양하고 해결안도 그 만큼 다양하기 때문에 정확한 원인이 밝히고 해결책을 정의하는 것이 매우 중요합니다.
따라서, 이런 경우를 발견하셨을 경우 아래의 두 가지 조치를 순서대로 시행해 주십시오.
1. 오류가 발생한 페이지에 존재하는 자바스크립트 소스코드에서 gaectk 전치사가 존재하는 모든 함수를 설치 전 상태로 roll back합니다.
2. singleview.co.kr과 해당 오류를 공유하고, 후속 조치를 논의합니다.