[카페24에 향상된 전자상거래 적용하기] STEP8. (대망의) 구매완료 측정하기

최근 업데이트 2020-07-13 : dataLayer.push 위치 변경

대망의 마지막 구매완료 페이지....!

order_result.html 페이지에 dataLayer를 심어 구매가 완료된 상품들과 주문id를 전송해봅시다 :)

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

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) order_result.html (주문완료 페이지)에서 상품들이 보여지는 table안에 반복되는 tr 내부에다가 스크립트를 작성하여 echo_products라는 객체에 상품정보들을 먼저 담습니다.

• 국내기본배송을 기준으로 작성한 것이며, 해외배송 등 다른 모듈에 대한 정보도 필요하다면 해당 table을 찾아서 동일한 위치에 작성하면 됩니다.
• 카페24에서 제공하는 변수들을 주로 사용했고 price나 category나 quantity같은 자바스크립트로 값을 정제해서 가져왔습니다.
• 해당 변수들을 쓰려면 class와 module이 포함된 태그내에 스크립트를 작성해야 변수들을 인식할 수 있습니다.
• 카페24 디자인에 따라경우 변수명이 달라질 수 있습니다. 

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

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

<script>
if(!echo_products) var echo_products=[];
if('{$product_name}'!='' && !'{$product_name}'.includes("샘플")){  // 디자인편집창에 예시로 있는 상품은 제외하기 위한 if문
    echo_products.push({
        'id' : '{$param}'.split('product_no=')[1].split('&cate_no=')[0],
        '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>

 

웹 디자인 스크립트 위치

• <tr> 를 기준으로 첫번째바로 밑에 그리고 두번째바로 밑에도 작성합니다.

 

 

모바일 디자인 스크립트 위치

• <div class="prdInfo"> 를 기준으로 첫번째 바로 밑에 그리고 두번째 바로 밑에도 작성합니다.

 

 

 

2) 하단에는 이벤트 purchase와 함께 위에서 만든 echo_products를 보냅니다.

• id(주문번호)는 필수값입니다.
• {$order_id} 가 꼭 있어야 작동하도록 그리고 디자인편집창에서 주문완료창을 띄웠을 때에도 작동할 수 있기 때문에 if문에 dataLayer를 담았습니다.
• 2020.07.13 수정사항!! <div module="Order_result"> </div>태그의 최하단에 아래 dataLayer.push 스크립트를 넣어주세요! <div module="Order_result"> </div> 태그를 따로 만들어서 했었는데, 네이버 로그분석과 겹쳐 전환이 더블로 잡힌다는 댓글이 있어서 수정했습니다. 주문완료 페이지에는 무조건  <div module="Order_result"> </div> 태그가 하나만 존재해야합니다.
• 다시 말하지만, 국내기본배송상품 기준이며, 다른 모듈의 경우 변수가 달라질 수 있습니다.

<!-- #1 상품들객체(echo_products)를 GTM 이벤트와 함께 푸쉬 -->
<!-- Product Array -->
<script>
// 주문id가 있어야 purchase로 잡힘
if( '{$order_id}' ){
// 디자인 편집창에서 주문 id가 디폴드'20111102-0000001' 되어있어서 이것을 제외한 구매id만 purchase로 날라감
    if('{$order_id}' != '20111102-0000001'){
        dataLayer.push({
            'event': 'purchase',
            'ecommerce': {
                'purchase': {
                    'actionField': {
                        'id': '{$order_id}',
                        'affiliation': 'Online Store',
                        'revenue': '{$normal_total_product_price}'.replace(',','').replace('원',''),
                        'tax':'{$total_vat_price}'.replace(',','').replace('원',''),  
                        'shipping': '{$normal_total_delv_price}'.replace(',','').replace('원',''),  
                        //'coupon': 'SUMMER_SALE'
                    },
                    'products': echo_products
                }
            }
        });
    }
}
</script>

 

 

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

1) 먼저 태그에 이용될 사용자 변수들을 먼저 만들어보겠습니다.

• 변수>사용자변수>새로만들기로 들어갑니다.
• 2)에 보시면 {{order id}} 와 {{revenue}}가 있는데, 각각 주문아이디와 주문가격을 의미합니다.
• purchase 이벤트가 작동할 때, dataLayer 에 있는 값들을 가져오게됩니다.

 

 

2) 위에서 만든 사용자변수를 이용해 태그를 아래와 같이 만듭니다.

 

 

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

 

 

4) 구글태그관리자에서 미리보기를 한 후, 결제를 완료하면 태그와 이벤트, 데이터들이 전송됨을 확인할 수 있습니다.

 

 

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

1) 실시간>이벤트로 들어가서 Purchase 이벤트를 실시간으로 확인 할 수 있습니다.

 

 

2) 전환>전자상거래>쇼핑행동으로 들어가서 '거래가 발생한 세션수' 로 확인 가능합니다.(세션단위)

 

 

3) 전환>전자상거래>결제행동으로 들어가서 '거래가 발생한 세션수' 로 확인 가능합니다.(세션단위)

 

 

4) 전환>전자상거래>제품실적으로 들어가서 거래가 발생한 상품에 대한 '상품수익', '순 구매수', '수량' 등 의 정보 확인이 가능합니다.(제품단위)

 

 

5) 전환>전자상거래>매출실적으로 거래에 대한 '수익', '배송료' 등의 정보가 확인 가능합니다.(거래ID단위) cafe24에는 세금에 대한 정보는 없어보이네요....!

 

 

6) 전환>전자상거래>제품목록으로 거래에 대한 '순 구매수' 정보가 확인 가능합니다.(기본 측정기준 변경 가능 : 제품목록이름, 제품목록위치, 상품 등)

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

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