싱글뷰 – 온라인 사업 성장 파트너

Menu

카페24 GA4 간단 설치 가이드

이 포스팅의 목차

GAECTK cafe24 설정법
최종수정일: 2021 09 10

gaectk.js github

cafe24몰에 Google Analytics 4 전자상거래 코드를 빠르고 정확하게 설치하세요.

책임과 한계

본 설명서에서 안내하는 자바스크립트 코드를 PC 페이지와 Mobile 페이지에 각각 적용해야 합니다.
PC와 Mobile 공통 사용하는 반응형 레이아웃일 경우에는 한번만 설치합니다.
cafe24몰의 기능 특성으로 인한 GA 기능 제약은 싱글뷰가 개선해드릴 수 없습니다..
본 설명서에서 안내하는 코드 블록은 http 혹은 https 브라우저 기반 쇼핑몰에서만 작동합니다.

문서의 본문 중에서 아래의 표시를 주의해 주세요.
노란색 배경 문장은 간략한 설명입니다.
빨간색 배경 단어는 쇼핑몰 엔진에서 반드시 대치예약어로 입력해야 하는 입력변수입니다.
회색 배경 단어는 쇼핑몰 엔진에서 제공하지 않거나 추적이 필요하지 않은 경우 빈문자열(” 혹은 “”)으로 입력할 수 있는 입력변수입니다. 빈문자열로 입력해도 GA 추적에 오류가 발생하지는 않지만 추적 정밀도가 낮아집니다.

cafe24몰의 한계

카테고리와 브랜드 효율성을 cafe24의 기본 기능으로 추적할 수 없습니다.
상품명에 규격화된 식별자를 부여하고, 이를 parsing하여 적용할 수 있습니다.

장바구니 진행율과 바로구매 진행율을 정확히 추적할 수 없습니다.
cafe24몰은 관련 코드를 수정할 수 없기 때문에 사용자 상황에 따라서 오차가 큽니다.

결제 완료 상황을 정확히 추적할 수 없습니다.
cafe24몰은 결제 완료 페이지의 코드를 세밀하게 제어할 수 없기 때문에 사용자 상황에 따라서 오차가 큽니다.

PC 공통 헤더와 푸터 추적 코드 설치

1.    Google Analytics와 singleview API 초기화

스킨 폴더 루트의 index.html에서 @layout() 명령어에 지정된 레이아웃 파일을 확인, 해당 파일의 </head> 바로 위에 아래의 코드 추가
스킨 폴더/layout/basic/layout.html의 </head> 바로 위에 아래의 코드 추가
페이지 마다 다른 종류의 레이아웃 파일이 적용될 경우, 모든 레이아웃에 추가해야 함
‘GA tracking ID는 초기에 공란으로 입력하고 추적코드 디버깅이 완료된 후 Google Anlaytics에서발행한 UA-XXXXXXXXX-X와 같은 형태의 고유번호로 대치합니다.
모든 GAECTK 추적 스크립트보다 우선 실행되어야 합니다.
장바구니와 결제화면에서 카테고리제목을 지정할 수 있는 _getCategoryTitleBySrl()함수 추가

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript" src="https://svapi.co.kr:5018/gaectk.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
gaectkHeader.init( 'UA-XXXXXXXXX-X' );
 
var aCategory = {category_no_1: 'CATEGORY_TITLE_1', category_no_2: 'CATEGORY_TITLE_2' };
function _getCategoryTitleBySrl(nSrl)
{
    if( aCategory[nSrl] === undefined )
        return nSrl;
    else
        return aCategory[nSrl];
}
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    페이지 최종 정보 전송 및 API 연결 종료

스킨 폴더 루트의 index.html에서 @layout() 명령어에 지정된 레이아웃 파일을 확인, 해당 파일의 </body> 바로 위에 아래의 코드 추가
스킨 폴더/layout/basic/layout.html의 </body> 바로 위에 아래의 코드 추가
페이지 마다 다른 종류의 레이아웃 파일이 적용될 경우, 모든 레이아웃에 추가해야 함
모든 GAECTK 추적 스크립트보다 나중에 실행되어야 합니다.

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script>
gaectkHeader.close();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

PC 상품 카탈로그 목록 추적 코드 설치

1.    모듈 초기화

스킨폴더/index.html에서 상품 목록 루프 외부 위쪽에 아래의 코드 삽입

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};
var nPage = getUrlParameter('page');
if( nPage === undefined )
    nPage = 1;
gaectkList.init( nPage, '페이지당목록수' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

스킨폴더/product/list.html에서 상품 목록 루프 외부 위쪽에 아래의 코드 삽입

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
var g_cate_name = '{$title_text_or_image|upper}';
function getParameterByName(name, url)
{
    if(!url)
        url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
     
    if (!results) 
        return null;
    if (!results[2]) 
        return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var page = getParameterByName('page');
gaectkList.init( nPage, '페이지당목록수' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    상품 목록 정보 메모리 적재

스킨폴더/index.html에서 목록 루프 내부에 아래의 코드 삽입

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkList.queueItemInfo( '{$product_no}', '{$product_name_tag}', '카테고리명', '브랜드명', '색상 등의 베리에이션명', '상품가격' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

스킨폴더/product/list.html에서 목록 루프 내부에 아래의 코드 삽입

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkList.queueItemInfo( '{$product_no}', '{$product_name_tag}', g_cate_name, '브랜드명', '색상 등의 베리에이션명', '상품가격' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

3.    상품 목록 정보 전송

스킨폴더/index.html에서 목록 루프 외부에 아래쪽에 아래의 코드 삽입
스킨폴더/product/list.html에서 목록 루프 외부에 아래쪽에 아래의 코드 삽입

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkList.patchImpression('한번에전송할상품목록갯수');
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

한번에전송할상품목록갯수 선택(리스트 목록이 약 80개를 초과하는 경우, 분할 전송할 목록의 1회 갯수를 지정함, 지정하지 않으면 30개로 설정

4.    상품 클릭 이벤트 전송

스킨폴더/index.html에서 상품의 상세 페이지로 연결되는 <A HREF 클릭 핸들러에 연결
스킨폴더/product/list.html에서 상품의 상세 페이지로 연결되는 <A HREF 클릭 핸들러에 연결

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkList.sendClicked( '{$product_no}' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

PC 상품 상세 페이지 추적 코드 설치

1.    모듈 초기화

상품상세화면을 관리하는 소스에서 작업합니다.
스킨폴더/product/detail.html에 추가 코드 설치

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkDetail.init();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    상품 상세 정보 메모리 적재와 전송

<div module=”product_detail”> 영역에 코드 설치
동일한 상품고유번호와 상품명은 GAECTK 추적 코드 전체에서 일관되게 적용되어야 합니다.
카테고리명, 브랜드명, 색상 등의 베리에이션명은 추적이 필요하지 않을 경우 공란으로 입력할 수 있습니다.

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkDetail.loadItemInfo( '{$product_no}', '{$name}', '', '{$prd_brand}', '', '{$product_price}' );
gaectkDetail.patchDetail();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    바로구매 이벤트 발생 시 상품 상세 정보 전송

바로구매하기 이벤트가 발생하면 아래의 코드를 실행해야 합니다.
아래의 코드가 작동되기 전에 gaectkDetail.init(), gaectkDetail.loadItemInfo(), gaectkDetail.patchDetail() 함수가 실행되어야 합니다.

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
function buyNow()
{
    var iQuantity = checkQuantity();
    gaectkDetail.patchBuyNow( iQuantity );
}
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->
<!--- 회원만 구매할 수 있게 설정했다면, cafe24몰 특성에 맞춰서 로그인 비로그인 상태를 구분 -------->
<div id="button" module="Layout_statelogon">
    <div id="button" module="product_action">
        <a href="#none" class="first {$buy_display|display} abtn1" onclick="{$action_buy}; buyNow();" id="buy"><!--BUY NOW-->BUY</a>
    </div>
</div>
<div id="button" module="Layout_statelogoff">
    <div id="button" module="product_action">
        <a href="#none" class="first {$buy_display|display} abtn1" onclick="{$action_buy}; buyNow();" id="buy"><!--BUY NOW-->BUY</a>
    </div>
</div>

3.    장바구니 담기 이벤트 발생 시 상품 상세 정보 전송

장바구니 담기 이벤트가 발생하면 아래의 코드를 실행해야 합니다.
아래의 코드가 작동되기 전에 gaectkDetail.init(), gaectkDetail.loadItemInfo(), gaectkDetail.patchDetail() 함수가 실행되어야 합니다.

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
function addToCart()
{
    var iQuantity = checkQuantity();
    gaectkDetail.patchAddToCart( iQuantity );
}
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->
<a href="#none" class="{$basket_display|display} abtn2" onclick="{$action_basket}; addToCart();"><!--ADD TO CART-->CART </a>

PC 장바구니 화면 추적 코드 설치

1.    모듈 초기화

스킨폴더/order/basket.html에 추가 코드 설치

cafe24몰은 장바구니 페이지에서 구매 제품별 카테고리 제목을 제공하지 않음

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkCart.init();
 
var nCartIdx = 0;
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    장바구니 상품 정보 메모리 적재

스킨폴더/order/basket.htm의 l<module=”Order_list”>의 <td class=”product”> 직후에 장바구니 목록 반복 영역 추가 코드 설치
{$product_name}가 불능이면, {$name_alt} 시도

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
var sPrice = '{$sum_price_front}';
sPrice = sPrice.replace('₩', '');
var nPrice = parseInt(sPrice.replace(',', ''));
var sUrlParam = '{$param}';
sUrlParam = sUrlParam.replace('?', '');
var aUrlParam = sUrlParam.split('&');
var nElements = aUrlParam.length;
for (i = 0; i < nElements; i++) 
{
    var aValuePair = aUrlParam[i].split('=');
    if(aValuePair[0] == 'product_no')
        var sProductNo=aValuePair[1];
    else if(aValuePair[0] == 'cate_no')
        var sCateNo=aValuePair[1];
}
var sSumPrice = '{$sum_price_front}';
var nSumPrice = parseInt( sSumPrice.replace(',', '') );
var nQty = Math.floor(nSumPrice/nPrice);
console.log(sProductNo);
console.log(sCateNo);
console.log(nPrice);
console.log(nQty);
gaectkCart.queueItemInfo( nCartIdx++, sProductNo, '{$name}', sCateNo, '', '', nPrice, nQty, '' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

3.    장바구니 열람 이벤트 전송

Google Analytics v3만 사용하는 경우에는 무시 가능
스킨폴더/order/basket.html에서 장바구니 목록 Loop 하단에 아래의 코드 추가

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkCart.viewCart();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

4.    장바구니에서 개별 상품 주문/삭제 이벤트 발생 시 상품 정보 전송

장바구니 목록 중에서 개별 상품 주문하기/삭제하기 선택하는 행동 추적 코드 설치
스킨폴더/order/basket.html에 아래의 코드 추가
삭제선택된장바구니고유번호배열은 gaectkCart.queueItemInfo()에서 입력한 장바구니고유번호 목록 중에서 삭제 요청된 고유번호의 자바스크립트 배열 변수입니다. 자바스크립트 배열 변수의 구조는 아래와 같아야 합니다. 이 배열 원소의 개수는 gaectkCart.queueItemInfo()에서 입력된 개수를 초과하지 않는 것을 권장합니다.

var ArrayExample[0] = 삭제요청된장바구니임시인덱스
var ArrayExample[n] = 삭제요청된장바구니임시인덱스

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
function _makeList()
{
    var alist = new Array();
    jQuery(':checkbox:checked').each(function(idx, elem){
        var sCheckBoxId = jQuery(elem).attr('id');
        var nCheckBoxId = parseInt(sCheckBoxId.replace('basket_chk_id_', ''));
        alist[alist.length]=nCheckBoxId;
    });
    return alist;
}
function _checkoutSingle(sBasketChkId)
{
    var nCheckBoxId = parseInt(sBasketChkId.replace('basket_chk_id_', ''));
    gaectkCart.checkoutSelected(nCheckBoxId);
}
function _removeSingle(sBasketChkId)
{
    var nCheckBoxId = parseInt(sBasketChkId.replace('basket_chk_id_', ''));
    gaectkCart.removeSelected(nCheckBoxId);
}
function _checkoutSelection()
{
    var cartnos = _makeList();
    gaectkCart.checkoutSelected( cartnos );
}
function _removeSelection()
{
    var cartnos = _makeList();
    gaectkCart.removeSelected( cartnos );
}
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

5.    장바구니 비우기 이벤트 발생 시 상품 정보 전송

장바구니 모두 비우는 행동 추적 코드 설치
스킨폴더/order/basket.html에 아래의 코드 추가

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkCart.removeAll();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

6.    장바구니에서 전체 상품 주문하기 이벤트 발생 시 상품 정보 전송

장바구니에서 개별 항목 삭제하는 행동 추적 코드 설치
스킨폴더/order/basket.html에 아래의 코드 추가

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkCart.checkoutAll();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

PC 구매시작 화면 추적 코드 설치

1.    모듈 초기화

스킨폴더/order/orderform.html의 상단부에 아래의 코드 추가

cafe24몰은 결제 페이지에서 구매 제품별 카테고리 제목을 제공하지 않음

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkSettlement.init();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    구매시작 화면 상품 정보 메모리 적재

스킨폴더/order/orderform.html 결제 목록 반복문 내부에 아래의 추가 코드 삽입
카테고리명, 브랜드명, 색상 등의 베리에이션명, 쿠폰고유번호는 추적이 필요하지 않을 경우 공란 (빈문자열: ” 혹은 “”)으로 입력할 수 있습니다.

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
var sPrice = '{$product_price_front}';
var nPrice = parseInt(sPrice.replace(',', ''));
nPrice = nPrice || 0;
var sQty = '{$product_quantity_text}';
var nQty = parseInt(sQty.replace(',', ''));
nQty = nQty || 0;
var sUrlParam = '{$param}';
sUrlParam = sUrlParam.replace('?', '');
var aUrlParam = sUrlParam.split('&');
var nElements = aUrlParam.length;
for (i = 0; i < nElements; i++) 
{
    var aValuePair = aUrlParam[i].split('=');
    if(aValuePair[0] == 'product_no')
        var sProductNo=aValuePair[1];
    else if(aValuePair[0] == 'cate_no')
        var sCategoryTitle=aValuePair[1];
}
if( nPrice > 0 && nQty > 0 )
    gaectkSettlement.queueItemInfo( sProductNo, '{$product_name}', sCategoryTitle, '브랜드명', '', nPrice, nQty );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

3.    구매시작 화면 상품 정보 전송

스킨폴더/order/orderform.html의 결제 목록 반복문이 끝난 영역, 페이지 소스의 하단에 아래의 추가 코드 삽입

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkSettlement.patch();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

결제단계번호 선택(반드시 1보다 커야 함), 결제단계제목 선택, 일반적으로 2번, ‘order page’ 입력

PC 결제완료 화면 추적 코드 설치

1.    모듈 초기화

스킨폴더/order/order_result.html의 상단에 아래의 코드 설치

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkPurchase.init();
var nDeliveryCost = 0;
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    결제완료 화면 상품 정보 메모리 적재하고 배송비 합산

결제 결과 내역/품목을 표시하는 반복문 내부에 코드 설치
카테고리명 ,브랜드명, 색상 등의 베리에이션명, 쿠폰고유번호는 추적이 필요하지 않을 경우 공란(빈문자열:” 혹은 “”)으로 입력할 수 있습니다.

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<!---- 배송비 합산 코드 블록 시작 ----->
<script type="text/javascript">
var sNormalTotal = '{$normal_total_delv_price}';
nNormalTotal = parseInt(sNormalTotal.replace(',', ''));
nNormalTotal = nNormalTotal || 0;
var sSpecialTotal = '{$normal_total_special_delv_price}';
nSpecialTotal = parseInt(sSpecialTotal.replace(',', ''));
nSpecialTotal = nSpecialTotal || 0;
nDeliveryCost += parseInt(nNormalTotal)+parseInt(nSpecialTotal);
</script>
<!---- 배송비 합산 코드 블록 끝 ----->
<!---- 상품 정보 코드 블록 시작 ----->
<script type="text/javascript">
var sPrice = '{$product_price_front}';
var nPrice = parseInt(sPrice.replace(',', ''));
nPrice = nPrice || 0;
var sQty = '{$product_quantity}';
var nQty = parseInt(sQty.replace(',', ''));
nQty = nQty || 0;
var sUrlParam = '{$param}';
sUrlParam = sUrlParam.replace('?', '');
var aUrlParam = sUrlParam.split('&');
var nElements = aUrlParam.length;
for (i = 0; i < nElements; i++) 
{
    var aValuePair = aUrlParam[i].split('=');
    if(aValuePair[0] == 'product_no')
        var sProductNo=aValuePair[1];
    else if(aValuePair[0] == 'cate_no')
        var sCategoryTitle=aValuePair[1];
}
if( nPrice > 0 && nQty > 0 )
    gaectkPurchase.queueItemInfo( sProductNo, '{$product_name}', sCategoryTitle, '브랜드명', '', nPrice, nQty, '' );
</script>
<!---- 상품 정보 코드 블록 끝 ----->
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

3.    결제완료 화면 상품 정보 전송

{ # footer } 바로 위에 추가 코드 설치

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
var sTotalPrice = '{$total_order_price}';
var nTotalPrice = parseInt(sTotalPrice.replace(',', ''));
gaectkPurchase.patchPurchase( '{$order_id}', '', nTotalPrice, nDeliveryCost, '' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

PC 주문관리 화면의 추적 코드 설치

1.    모듈 초기화

주문관리 화면에서 실행

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkMypage.init();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    주문관리 화면 상품 정보 메모리 적재

주문 내역이 표시되는 반복문 내부에 아래의 코드 설치

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkMypage.queueItemInfo( '상품고유번호', '상품명', '카테고리명', '브랜드명', '색상 등의 베리에이션명', '상품가격', '상품수량', '쿠폰고유번호' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

상품고유번호 필수, 상품명 필수, 카테고리명 선택, 브랜드명 선택, 색상 등의 베리에이션명 선택, 상품가격 필수, 상품수량 필수, 쿠폰고유번호 선택

3.    주문 취소 이벤트발생 시 상품 정보 전송

주문취소와 환불 요청 시 실행 코드

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkMypage.refund( '주문고유번호' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

주문고유번호 필수

MOB 공통 헤더와 푸터 추적 코드 설치

모바일 사이트에 GA 추적 코드를 추가하기 전에 아래의 두가지 패치가 적용되어야 합니다.
1.모바일샵 상품 이미지 등록 개선 (150730)
2.모바일샵 메인, 리스트, 브랜드 페이지를 스킨에서 수정 가능하도록 개선 (150730)

1.    Google Analytics와 singleview API 초기화

선택스킨/layout/basic/main.html의 </head> 바로 위에 아래의 코드 추가
페이지 마다 다른 종류의 레이아웃 파일이 적용될 경우, 모든 레이아웃에 추가해야 함
‘GA tracking ID는 초기에 공란으로 입력하고 추적코드 디버깅이 완료된 후 Google Anlaytics에서발행한 UA-XXXXXXXXX-X와 같은 형태의 고유번호로 대치합니다.
모든 GAECTK 추적 스크립트보다 우선 실행되어야 합니다.

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript" src="https://svapi.co.kr:5018/gaectk.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
gaectkHeader.init( 'UA-XXXXXXXXX-X' );
var aCategory = {category_no_1: 'CATEGORY_TITLE_1', category_no_2: 'CATEGORY_TITLE_2' };
function _getCategoryTitleBySrl(nSrl)
{
    if( aCategory[nSrl] === undefined )
        return nSrl;
    else
        return aCategory[nSrl];
}
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    페이지 최종 정보 전송 및 API 연결 종료

선택스킨/layout/basic/main.html의 </body> 바로 위에 아래의 코드 추가
페이지 마다 다른 종류의 레이아웃 파일이 적용될 경우, 모든 레이아웃에 추가해야 함
모든 GAECTK 추적 스크립트보다 나중에 실행되어야 합니다.

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script>
gaectkHeader.close();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

MOB 상품 카탈로그 목록 추적 코드 설치

1.    모듈 초기화

스킨폴더/index.html에서 상품 목록 루프 외부 위쪽에 아래의 코드 삽입

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};
var nPage = getUrlParameter('page');
if( nPage === undefined )
    nPage = 1;
gaectkList.init(nPage, '페이지당목록수' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

스킨폴더/product/list.html에서 상품 목록 루프 외부 위쪽에 아래의 코드 삽입

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
var g_cate_name = '';
function getParameterByName(name, url)
{
    if(!url)
        url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
     
    if (!results) 
        return null;
    if (!results[2]) 
        return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var page = getParameterByName('page');
gaectkList.init( '{$title_text_or_image|upper}', page, '페이지당목록수' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    상품 목록 정보 메모리 적재

스킨폴더/index.html에서 목록 루프 내부에 아래의 코드 삽입

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkList.queueItemInfo( '{$product_no}', '{$product_name}', '카테고리명', '브랜드명', '색상 등의 베리에이션명', '상품가격' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

스킨폴더/product/list.html에서 목록 루프 내부에 아래의 코드 삽입

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkList.queueItemInfo( '{$product_no}', '{$product_name}', g_cate_name, '브랜드명', '색상 등의 베리에이션명', '상품가격' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

3.    상품 목록 정보 전송

스킨폴더/index.html에서 목록 루프 외부에 아래쪽에 아래의 코드 삽입
스킨폴더/product/list.html에서 목록 루프 외부에 아래쪽에 아래의 코드 삽입

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkList.patchImpression();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

4.    상품 클릭 이벤트 전송

스킨폴더/index.html에서 상품의 상세 페이지로 연결되는 <A HREF 클릭 핸들러에 연결
스킨폴더/product/list.html에서 상품의 상세 페이지로 연결되는 <A HREF 클릭 핸들러에 연결

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkList.sendClicked( '{$product_no}' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

MOB 상품 상세 페이지 추적 코드 설치

1.    모듈 초기화

상품상세화면을 관리하는 소스에서 작업합니다.
스킨폴더/product/detail.html에 추가 코드 설치

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkDetail.init();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    상품 상세 정보 메모리 적재와 전송

동일한 상품고유번호와 상품명은 GAECTK 추적 코드 전체에서 일관되게 적용되어야 합니다.
카테고리명, 브랜드명, 색상 등의 베리에이션명은 추적이 필요하지 않을 경우 공란으로 입력할 수 있습니다.

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkDetail.loadItemInfo( '{$product_no}', '{$name}', '', '{$prd_brand}', '', '{$product_price}' );
gaectkDetail.patchDetail();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    바로구매 이벤트 발생 시 상품 상세 정보 전송

바로구매하기 이벤트가 발생하면 아래의 코드를 실행해야 합니다.
아래의 코드가 작동되기 전에 gaectkDetail.init(), gaectkDetail.loadItemInfo(), gaectkDetail.patchDetail() 함수가 실행되어야 합니다.

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
function buyNow()
{
    var iQuantity = checkQuantity();
    gaectkDetail.patchBuyNow( iQuantity );
}
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->
<!--- cafe24몰 특성에 맞춰서 로그인 비로그인 상태를 구분 -------->
<div id="" module="Layout_statelogon">
    <div id="button" module="product_action">
        <a href="#none" class="first {$buy_display|display} abtn1" onclick="{$action_buy}; buyNow();" id="buy"><!--BUY NOW-->BUY</a>
    </div>
</div>
<div id="" module="Layout_statelogoff">
    <div id="button" module="product_action">
        <a href="#none" class="first {$buy_display|display} abtn1" onclick="{$action_buy}; buyNow();" id="buy"><!--BUY NOW-->BUY</a>
    </div>
</div>

3.    장바구니 담기 이벤트 발생 시 상품 상세 정보 전송

장바구니 담기 이벤트가 발생하면 아래의 코드를 실행해야 합니다.
아래의 코드가 작동되기 전에 gaectkDetail.init(), gaectkDetail.loadItemInfo(), gaectkDetail.patchDetail() 함수가 실행되어야 합니다.

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
function addToCart()
{
    var iQuantity = checkQuantity();
    gaectkDetail.patchAddToCart( iQuantity );
}
<a href="#none" class="{$basket_display|display} abtn2" onclick="{$action_basket}; addToCart();"><!--ADD TO CART-->CART </a>
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

MOB 장바구니 화면 추적 코드 설치

1.    모듈 초기화

스킨폴더/order/basket.html에 추가 코드 설치

cafe24몰은 장바구니 페이지에서 구매 제품별 카테고리 제목을 제공하지 않음

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkCart.init();
var nCartIdx = 0;
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    장바구니 상품 정보 메모리 적재

스킨폴더/order/basket.html에 장바구니 목록 반복 영역 추가 코드 설치

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
var sPrice = '{$product_sale_price}';
sPrice = sPrice.replace('원', '');
var nPrice = parseInt(sPrice.replace(',', ''));
var sUrlParam = '{$param}';
sUrlParam = sUrlParam.replace('?', '');
var aUrlParam = sUrlParam.split('&');
var nElements = aUrlParam.length;
for (i = 0; i < nElements; i++) 
{
    var aValuePair = aUrlParam[i].split('=');
    if(aValuePair[0] == 'product_no')
        var sProductNo=aValuePair[1];
    else if(aValuePair[0] == 'cate_no')
        var sCategoryTitle=aValuePair[1];
}
var sSumPrice = '{$$sum_price_front}';
var nSumPrice = parseInt( sSumPrice.replace(',', '') );
var nQty = Math.floor(nSumPrice/nPrice);
gaectkCart.queueItemInfo( nCartIdx++, sProductNo, '{$product_name}', sCategoryTitle, '브랜드명', '', nPrice, nQty, '' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

3.    장바구니 열람 이벤트 전송

Google Analytics v3만 사용하는 경우에는 무시 가능
스킨폴더/order/basket.html에서 장바구니 목록 Loop 하단에 아래의 코드 추가

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkCart.viewCart();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

4.    장바구니에서 개별 상품 주문/삭제 이벤트 발생 시 상품 정보 전송

장바구니 목록 중에서 개별 상품 주문하기/삭제하기 선택하는 행동 추적 코드 설치
스킨폴더/order/basket.html에 아래의 코드 추가
삭제선택된장바구니고유번호배열은 gaectkCart.queueItemInfo()에서 입력한 장바구니고유번호 목록 중에서 삭제 요청된 고유번호의 자바스크립트 배열 변수입니다. 자바스크립트 배열 변수의 구조는 아래와 같아야 합니다. 이 배열 원소의 개수는 gaectkCart.queueItemInfo()에서 입력된 개수를 초과하지 않는 것을 권장합니다.

var ArrayExample[0] = 삭제요청된장바구니임시인덱스
var ArrayExample[n] = 삭제요청된장바구니임시인덱스

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
function _makeList()
{
    var alist = new Array();
    jQuery(':checkbox:checked').each(function(idx, elem){
        var sCheckBoxId = jQuery(elem).attr('id');
        var nCheckBoxId = parseInt(sCheckBoxId.replace('basket_chk_id_', ''));
        alist[alist.length]=nCheckBoxId;
    });
    return alist;
}
function _chckoutSelection(sTmpCartIdx)
{
    if( sTmpCartIdx === null || sTmpCartIdx === undefined || sTmpCartIdx.length == 0 )
        var cartnos = _makeList();
    else
    {
        var cartnos = new Array();
        cartnos[0] = parseInt( sTmpCartIdx.replace('basket_chk_id_', '') );
    }
    gaectkCart.checkoutSelected( cartnos );
}
function _removeSelection(sTmpCartIdx)
{
    var cartnos;
    if( sTmpCartIdx === null || sTmpCartIdx === undefined || sTmpCartIdx.length == 0 )
        var cartnos = _makeList();
    else
    {
        var cartnos = new Array();
        cartnos[0] = parseInt( sTmpCartIdx.replace('basket_chk_id_', '') );
    }
    gaectkCart.removeSelected( cartnos );
}
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

개별 장바구니 상품 주문하기 버튼에 적용

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<a href="#none" onclick="{$action_buy_item}; gaectkCart.checkoutSelected( '{$chk_id}' );" class="btnStrong">주문하기</a>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

5.    장바구니 비우기 이벤트 발생 시 상품 정보 전송

장바구니 모두 비우는 행동 추적 코드 설치
스킨폴더/order/basket.html에 아래의 코드 추가

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkCart.removeAll();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

6.    장바구니에서 전체 상품 주문하기 이벤트 발생 시 상품 정보 전송

장바구니에서 개별 항목 삭제하는 행동 추적 코드 설치
스킨폴더/order/basket.html에 아래의 코드 추가

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkCart.checkoutAll();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

MOB 구매시작 화면 추적 코드 설치

1.    모듈 초기화

스킨폴더/order/orderform.html의 상단부에 아래의 코드 추가

cafe24몰은 결제 페이지에서 구매 제품별 카테고리 제목을 제공하지 않음

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkSettlement.init();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    구매시작 화면 상품 정보 메모리 적재

스킨폴더/order/orderform.html 결제 목록 반복문 내부에 아래의 추가 코드 삽입
카테고리명, 브랜드명, 색상 등의 베리에이션명, 쿠폰고유번호는 추적이 필요하지 않을 경우 공란 (빈문자열: ” 혹은 “”)으로 입력할 수 있습니다.

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
var sPrice = '{$product_price_front}';
var nPrice = parseInt(sPrice.replace(',', ''));
nPrice = nPrice || 0;
var sQty = '{$product_quantity_text}';
var nQty = parseInt(sQty.replace(',', ''));
nQty = nQty || 0;
var sUrlParam = '{$param}';
sUrlParam = sUrlParam.replace('?', '');
var aUrlParam = sUrlParam.split('&');
var nElements = aUrlParam.length;
for (i = 0; i < nElements; i++) 
{
    var aValuePair = aUrlParam[i].split('=');
    if(aValuePair[0] == 'product_no')
        var sProductNo=aValuePair[1];
    else if(aValuePair[0] == 'cate_no')
        var sCategoryTitle=aValuePair[1];
}
if( nPrice > 0 && nQty > 0 )
    gaectkSettlement.queueItemInfo( sProductNo, '{$product_name}', sCategoryTitle, '브랜드명', '', nPrice, nQty );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

3.    구매시작 화면 상품 정보 전송

스킨폴더/order/orderform.html의 결제 목록 반복문이 끝난 영역, 페이지 소스의 하단에 아래의 추가 코드 삽입

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkSettlement.patch();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

MOB 결제완료 화면 추적 코드 설치

1.    모듈 초기화

스킨폴더/order/order_result.html의 상단에 아래의 코드 설치

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkPurchase.init();
var nDeliveryCost = 0;
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    결제완료 화면 상품 정보 메모리 적재

결제 결과 내역/품목을 표시하는 반복문 내부에 코드 설치
카테고리명 ,브랜드명, 색상 등의 베리에이션명, 쿠폰고유번호는 추적이 필요하지 않을 경우 공란(빈문자열:” 혹은 “”)으로 입력할 수 있습니다.

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<!---- 상품 정보 코드 블록 시작1 ----->
<script type="text/javascript">
var sPrice = '{$product_price_front}';
var nPrice = parseInt(sPrice.replace(',', ''));
nPrice = nPrice || 0;
var sQty = '{$product_quantity}';
var nQty = parseInt(sQty.replace(',', ''));
nQty = nQty || 0;
var sUrlParam = '{$param}';
sUrlParam = sUrlParam.replace('?', '');
var aUrlParam = sUrlParam.split('&');
var nElements = aUrlParam.length;
for (i = 0; i < nElements; i++) 
{
    var aValuePair = aUrlParam[i].split('=');
    if(aValuePair[0] == 'product_no')
        var sProductNo=aValuePair[1];
    else if(aValuePair[0] == 'cate_no')
        var sCategoryTitle=aValuePair[1];
}
if( nPrice > 0 && nQty > 0 )
    gaectkPurchase.queueItemInfo( sProductNo, '{$product_name}', sCategoryTitle, '브랜드명', '', nPrice, nQty, '' );
</script>
<!---- 상품 정보 코드 블록 끝 ----->
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    결제완료 화면 배송비 합산

결제 결과 배송비를 표시하는 코드 블록 내부에 코드 설치

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
var sNormalTotal = '';
var nNormalTotal = parseInt(sNormalTotal.replace(',', ''));
var sSpecialTotal = '';
var nSpecialTotal = parseInt(sSpecialTotal.replace(',', ''));
nDeliveryCost += parseInt(nNormalTotal)+parseInt(nSpecialTotal);
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

3.    결제완료 화면 상품 정보 전송

{ # footer } 바로 위에 추가 코드 설치

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
var sTotalPrice = '{$total_order_price}';
var nTotalPrice = parseInt(sTotalPrice.replace(',', ''));
gaectkPurchase.patchPurchase( '{$order_id}', '', nTotalPrice, nDeliveryCost, '' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

MOB 주문관리 화면의 추적 코드 설치

1.    모듈 초기화

주문관리 화면에서 실행

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkMypage.init();
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

2.    주문관리 화면 상품 정보 메모리 적재

주문 내역이 표시되는 반복문 내부에 아래의 코드 설치

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkMypage.queueItemInfo( '상품고유번호', '상품명', '카테고리명', '브랜드명', '색상 등의 베리에이션명', '상품가격', '상품수량', '쿠폰고유번호' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

상품고유번호 필수, 상품명 필수, 카테고리명 선택, 브랜드명 선택, 색상 등의 베리에이션명 선택, 상품가격 필수, 상품수량 필수, 쿠폰고유번호 선택

3.    주문 취소 이벤트발생 시 상품 정보 전송

주문취소와 환불 요청 시 실행 코드

<!-- Google Analytics Code Begin (2024-02-22 14:13:27) singleview.co.kr -->
<script type="text/javascript">
gaectkMypage.refund( '주문고유번호' );
</script>
<!-- Google Analytics Code End (2024-02-22 14:13:27) singleview.co.kr -->

주문고유번호 필수

설치 시 주의 사항과 장애 복구 조치

본 설명서에서 안내하는 자바스크립트 코드는 설치 대상 쇼핑몰 솔루션을 영구적으로 손상시키는 위험성이 매우 낮습니다. 하지만 기존에 설치된 코드들과 테스트 과정에서 예측할 수 없었던 특이한 충돌이 발생하여 쇼핑몰 기능의 일부가 작동하지 않을 수 있습니다.

오류의 원인은 매우 다양하고 해결안도 그 만큼 다양하기 때문에 정확한 원인이 밝히고 해결책을 정의하는 것이 매우 중요합니다.

따라서, 이런 경우를 발견하셨을 경우 아래의 두 가지 조치를 순서대로 시행해 주십시오.

  • 오류가 발생한 페이지에 존재하는 자바스크립트 소스코드에서 gaectk 전치사가 존재하는 모든 함수를 주석 처리합니다. 왜냐하면, 정밀한 추적보다 판매 활동이 우선이기 때문입니다.
  • singleview.co.kr과 해당 오류를 공유하고, 후속 조치를 논의합니다.

Share the Post:
위로 스크롤

무엇을 찾으시나요?

Menu