[카페24에 향상된 전자상거래 적용하기] STEP7. 결제행동(checkout 행동분석)

최근 업데이트 2020-06-03

 결제행동은 사용자가 상품을 "장바구니에추가>주문상품확인>배송정보입력>결제정보입력>결제>완료창...."처럼 상품을 결제하는 과정을 쪼개어 유입과 이탈을 확인하는 것을 말합니다.

외국 쇼핑 사이트는 "review a cart>billing>payment>confirm order>complete" 등 step이 잘 나눠져있는 편인데, 국내 쇼핑몰들은 대부분 "장바구니>주문서작성>주문완료" 으로만 되어있는 편이며, 중간에 이탈을 막기 위해 step을 줄이고 적은 페이지 수 내에서 주문 및 결제가 이뤄지도록 한 것 같습니다. 그리고 요즘엔 배송정보나 결제정보도 디폴트로 설정해놓은 경우도 많기 때문인 것 같네요....!

어떤 블로그에서는 "장바구니"와 "결제완료"창에 대해 결제행동에 포함하기도 하고 안하기도 하는 것 같은데, 정확히 기준은 모르겠고,,,,

두 페이지를 제외하면 결제행동에 "주문서작성"만 포함되어 결제행동을 잘 알 수 없기 때문에, 위의 두 페이지를 포함하여 3 steps를 만들어보겠습니다.

 

step1. 장바구니 > step2. 주문서작성 > step3. 주문완료

 

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

STEP7. (대망의) 구매완료 측정하기
STEP6. 장바구니 비우기 + 장바구니에서 선택상품 삭제(Tracking removes from cart)
STEP5. 장바구니에 담기 측정하기(Tracking adds to cart)
STEP4. 상품 상세페이지 조회 측정하기(Tracking product detail views)
STEP3. 상품 클릭 측정하기(Measuring Product Clicks)
STEP2. 상품 노출 측정하기(Measuring Product Impressions View)
STEP1. 기본 셋팅 및 모든페이지뷰 태그만들기

 

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

1) 장바구니 (basket.html)

• 장바구니 페이지에 있는 상품들을 echo_products 담기 위한 스크립트를 페이지 하단에 작성합니다.

<!-- GTM checkout STEP1 : 장바구니-->
<!-- #1 모듈에 맞게 장바구니에 있는 상품들을 객체(echo_products)에 담음 -->

<div module="Order_NormNormal">
    <div module="Order_list"><!-- 일반 기본배송 -->
        <script>
            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)
            });
        </script>
    </div>
</div>

 

 

• 그 아래 dataLayer 스크립트를 작성해 echo_products를 checkout이벤트와 함께 전송합니다.
• 장바구니의 actionField에 step은 1, option 에는 '장바구니'를 적어줍니다. (커스텀가능한 부분)

<!-- GTM checkout STEP1 : 장바구니 -->
<!-- #2 상품들객체(echo_products)를 GTM 이벤트와 함께 푸쉬 -->

<script>
var echo_products = echo_products||[];
if(echo_products){
    dataLayer.push({
        'event' : 'checkout',
        'ecommerce' : {
            'checkout': {
                'actionField' : {
                    'step' : 1,
                    'option' : '장바구니'
                },
                'products' : echo_products
            }
        }
    });
}
</script>

 

 

2) 주문서 작성 (orderform,html)

• 이전 글, STEP 7 주문완료 측정하기에서 작성한 것처럼를 찾아 첫번째다음, 두번째다음 스크립트를 삽입해 echo_products를 만듭니다.

<!-- #1 주문서에 있는 상품들을 객체(echo_products)에 담음 -->
<!--Product Array-->

<script>
if(!echo_products) var echo_products=[];
if('{$product_name}'!='' || !'{$product_name}'.includes("상품")){
    echo_products.push({
        'id' : '{$param}'.substr('{$param}'.indexOf('product_no='), '{$param}'.indexOf('&')-1).replace('product_no=',''),
        'name' : '{$product_name}',
        'quantity' : '{$product_quantity}',
        'price' : '{$product_price}'.replace(',','').replace('원',''),
        'brand' : 'Healo',
        'category' : '{$param}'.substr('{$param}'.indexOf('cate_no='), '{$param}'.length).replace('cate_no=','')
    });
}
</script>

 

 

• 만들어진 echo_products 를 checkout 이벤트와 보냅니다.
• 주문서작성의 actionField에 step은 2, option 에는 '주문서작성'를 적어줍니다. (커스텀가능한 부분)

<!-- GTM checkout STEP2 : 주문서작성-->
<!-- #2 상품들객체(echo_products)를 GTM 이벤트와 함께 푸쉬 -->

<script>       
var echo_products = echo_products||[];
if(echo_products){
    dataLayer.push({
        'event' : 'checkout',
        'ecommerce' : {
            'checkout': {
                'actionField' : {
                    'step' : 2,
                    'option' : '주문서작성'
                },
                'products' : echo_products
            }
        }
    });
}
</script>

 

 

3) 주문완료 (order_result.html)

• 주문완료 페이지의 echo_products는 이미 전 게시물, STEP 7 주문완료 측정하기에서 만들었기 때문에 스킵하고 dataLayer만 캡쳐했습니다.
• 주문완료의 actionField에 step은 3, option 에는 '주문완료'를 적어줍니다. (커스텀가능한 부분)

<!-- GTM checkout STEP3 : 주문완료 -->
<!-- #2 상품들객체(echo_products)를 GTM 이벤트와 함께 푸쉬 -->

<div module="Order_result" style="display:none">
    <script>
        // 주문id가 있어야 purchase로 잡힘
        if( '{$order_id}' ){
            // 디자인 편집창에서 주문 id가 디폴드'20111102-0000001' 되어있어서 이것을 제외한 구매id만 purchase로 날라감
            if('{$order_id}' != '20111102-0000001'){
                dataLayer.push({
                    'event' : 'checkout',
                    'ecommerce' : {
                        'checkout': {
                            'actionField' : {
                                'step' : 3,
                                'option' : '주문완료'
                            },
                            'products' : echo_products
                        }
                    }
                });
            }
        }
    </script>
</div>

 

 

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

1) 우선 태그를 만들기 전 actionField에 작성한 step과 option 값들을 변수에 담기위해 사용자정의 변수를 먼저 만듭니다.

 

 

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

 

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

 

 

3) 구글태그관리자에서 미리보기를 한 후, 장바구니/주문서작성/주문완료 단계를 들어가면 해당 태그가 fire 됨을 확인할 수 있습니다.

ex) 주문서작성

 

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

1) 실시간>이벤트로 들어가면 checkout에 대한 실시간 이벤트를 확인할 수 있습니다.

 

 

2) 전환>전자상거래>결제행동으로 들어가면 해당 steps들에 대한 유입과 이탈을 확인 할 수 있게 됩니다.

 

 

---

|      업데이트한 내용!(2020-06-03)

각 checkout step 에 대한 label, 즉 각 체크아웃 단계의 이름은 아래 이미지처럼 전자상거래 설정에서 수정하실 수 있습니다!

추가하지 않아도 트래킹에는 문제가 되지 않지만, 1단계, 2단계, 3단계 이런 식으로 나오기때문에 덜 직관적인 부분이 있었네요. 

 

 

참조링크 1 : https://developers.google.com/tag-manager/enhanced-ecommerce#details
참조링크 2 : https://canonicalized.com/enhanced-ecommerce-tag-manager/?section=checkout-page
참조링크 3 : https://www.upbuild.io/blog/one-page-checkout-funnel-tracking-google-tag-manager/