[카페24에 향상된 전자상거래 적용하기] STEP6. 장바구니 비우기 + 장바구니에서 선택상품 삭제(Tracking removes from cart)

최근 업데이트 2019-10-16

장바구니에 상품들이 담겨져있을 때 상품들을 장바구니에서 제거하는 이벤트를 측정해봅니다.

아래와 같이 장바구니에서 상품을 제거하는 경로는 두 가지입니다.

 

(1) 장바구니 전체 비우기(make empty == remove all products)

(2) 장바구니에서 선택한 상품 삭제하기(remove some products selected)

 

[장바구니 비우기] 버튼과 [선택상품 삭제]버튼에 심어봅시다.

 

전 단계는 아래 링크에서 확인할 수 있습니다.

 

STEP5. 장바구니에 담기 측정하기(Tracking adds to cart)
STEP4. 상품 상세페이지 조회 측정하기(Tracking product detail views)
STEP3. 상품 클릭 측정하기(Measuring Product Clicks)
STEP2. 상품 노출 측정하기(Measuring Product Impressions View)
STEP1. 기본 셋팅 및 모든페이지뷰 태그만들기

 

1. 카페24 소스에 스크립트 추가하기

1) 아래와 같이 상품리스트 html 페이지의 하단에 스크립트를 삽입합니다. basket.html 페이지 하단에 작성했습니다.카페24에서 제공하는 변수들을 주로 사용했고 quantity같이 제공하지않는 변수에 대해서는 문자열을 잘라서 값을 가져왔습니다.

 

• 해당 변수들을 쓰려면 class와 module이 포함된 div태그내에 스크립트를 작성해야 변수들을 인식할 수 있습니다.
• 예로 div태그 내부에 쓰지 않으면 상품명이 {$name} 라고 그대로 들어가게되니 주의하세요!
• 카페24 디자인에 따라경우 변수명이 달라질 수 있습니다.
• 모바일 디자인의 경우에는 버튼엘리먼트나 테이블엘리먼트 등 html 코드가 다른 점이 많아서ㅠㅠ 각각 다르게 스크립트를 만들었습니다.

카페24 변수 참고링크 : http://sdsupport.cafe24.com/product/detail.html?product_no=3828&cate_no=66&display_group=1

웹 디자인 스크립트

1) 삽입할 코드

<div module="Order_NormNormal">
    <div module="Order_list"><!-- 일반 기본배송 -->
        <script>
            //  장바구니에 담겨있는 모든 상품정보 : echo_products
            if(!echo_products) var echo_products =[];

            echo_products.push({
                'id' : '{$product_no}',
                'name' : '{$name}',
                'price' : '{$product_sale_price}'.replace(',','').replace('원',''),
                'brand' : 'Healo',
                'category' : '{$cate_no}',
                'quantity': '{$form.quantity}'.substring('{$form.quantity}'.indexOf('value=')+7,'{$form.quantity}'.indexOf(' type=')-1)
            });

            // [장바구니 비우기] 버튼 클릭시 작동 : echo_products 사용
            function removeFromCart(){
                dataLayer.push({
                    'event': 'removeFromCart',
                    'ecommerce': {
                    'currencyCode': 'KRW',
                    'remove': { 
                        'products': echo_products
                    }
                    }
                });
            }

            // 선택상품이 담겨있는 상품정보 : document.checked_products
            $('.orderListAreatable input[type=checkbox]').on('click',function(){  
                //console.log($(this));
                document.checkedItemsIndex = []; // check한 인덱스들
                document.checked_products = []; //check한 인덱스순서에 있는 제품들 정보
                
                $('.orderListArea tbody.xans-order-list input[type=checkbox]').each(function(index, item){

                    if($(this).attr("checked")){
                        //console.log($(this).attr('id'));
                        // 체크한 상품의 인덱스를 담음
                        document.checkedItemsIndex.push($(this).attr('id').substring($(this).attr('id').lastIndexOf('id_')+3,$(this).attr('id').length))

                    }

                    if($('tbody.xans-order-list input[type=checkbox]').length === index+1) {
                        //console.log(document.checkedItemsIndex);
                        document.checkedItemsIndex.forEach(function(item, index, object) {
                                //체크한 인덱스에 있는 상품정보를 모음
                                document.checked_products.push(echo_products[item]);     
                        });
                    }      
                }) 

            })


            // [선택상품 삭제] 버튼 클릭시 작동 : document.checked_products 사용
            function removeFromCartIndivisual(){

                if(document.checked_products.length > 0){
                    dataLayer.push({
                        'event': 'removeFromCart',
                        'ecommerce': {
                            'currencyCode': 'KRW',
                            'remove': {
                                'products': document.checked_products
                            }
                        }
                    });
                }
            }
        </script>
    </div>
</div>

 

2) 삽입된 코드 모습

 

3) [선택상품 삭제]와 [장바구니비우기] 버튼의 onclick에 작성한 함수를 넣어줍니다.

 

모바일 디자인 스크립트

 

1) 삽입할 코드

<div module="Order_NormNormal">
    <div module="Order_list"><!-- 일반 기본배송 -->
        <script>
            // 체크된 상품들 장바구니에서 삭제
            function removeFromCartIndivisual(){
                if(document.checked_products.length > 0){
                    dataLayer.push({
                        'event': 'removeFromCart',
                        'ecommerce': {
                            'currencyCode': 'KRW',
                            'remove': {
                                'products': document.checked_products
                            }
                        }
                    });
                }
            }

            // 선택상품 오브젝트 만드는 로직
            $('.xans-order-normnormal input[type=checkbox]').on('click',function(){  
                //console.log($(this));
                document.checkedItemsIndex = []; // check한 인덱스들
                document.checked_products = []; //check한 인덱스순서에 있는 제품들 정보

                $('.xans-order-normnormal input[type=checkbox]').each(function(index, item){ 
                    if($(this).attr("checked")){
                        // 체크한 상품의 인덱스를 담음
                        document.checkedItemsIndex.push($(this).attr('id').substring($(this).attr('id').lastIndexOf('id_')+3,$(this).attr('id').length))
                    }  

                    if($('.xans-order-normnormal input[type=checkbox]').length === index+1) {

                        document.checkedItemsIndex.forEach(function(item, index, object) {
                            //체크한 인덱스에 있는 상품정보를 모음
                            document.checked_products.push(echo_products[item]);     
                        });
                    }   
                }) 
            })

            // 전체선택버튼에 따라 상품 오브젝트 만드는 로직
            $(document).ready(function(){

                $('#product_select_all').toggle(function() {

                    document.checkedItemsIndex = []; // check한 인덱스들
                    document.checked_products = []; //check한 인덱스순서에 있는 제품들 정보

                    $('.xans-order-normnormal input[type=checkbox]').each(function(index, item){
                        // 체크한 상품의 인덱스를 담음
                        document.checkedItemsIndex.push($(this).attr('id').substring($(this).attr('id').lastIndexOf('id_')+3,$(this).attr('id').length))   
                    })

                    document.checkedItemsIndex.forEach(function(item, index, object) {
                        //체크한 인덱스에 있는 상품정보를 모음
                        document.checked_products.push(echo_products[item]);     
                    });

                }, function() {
                    document.checkedItemsIndex = []; 
                    document.checked_products = []; 
                });
            });

        </script>
    </div>
</div>

 

2) 삽입된 코드 모습

3) [선택삭제] 버튼의 onclick에 작성한 함수를 넣어줍니다.

 

2. 태그관리자에서 태그와 트리거 만들고 미리보기

1) 태그를 아래와 같이 만듭니다.

 

2) 태그에서 참조하는 트리거는 아래와 같이 만듭니다.

 

3) 구글태그관리자에서 미리보기를 한 후, 장바구니에서 상품들을 삭제해보면 태그와 이벤트, 데이터들이 전송됨을 확인할 수 있습니다.

3. 구글애널리틱스에서 확인하기

1) 실시간>이벤트로 들어가서 활성화된 사용자에 대한 이벤트로 확인할 수 있습니다. 활성사용자에 대한 실시간이기 때문에 새로고침시 금방 리스트에서 사라집니다.

 

2) 전환>전자상거래>제품목록실적으로 들어가면 '제품을 장바구니에 추가한 횟수'를 볼 수 있습니다. 그런데, '장바구니에서 삭제된 수량'은 구글애널리틱스에서 디폴트로 지정되어 있지 않기 때문에 표에서 볼 수가 없습니다. 우측 상단에 [수정]을 눌러서 항목을 추가할 수 있습니다.

참조링크 1 : https://developers.google.com/tag-manager/enhanced-ecommerce#details

참조링크 2 : https://canonicalized.com/enhanced-ecommerce-tag-manager/?section=cart-page