최근 업데이트 2019-10-14
이번에는 장바구니에 담기 이벤트를 측정해봅시다.
보통 상품 상세페이지에서 수량을 선택한 후 [장바구니에 담기]를 클릭하거나 [바로 구매]클릭하는 순서로 구매가 시작됩니다.
그래서 [장바구니에 담기]라는 버튼에 이벤트를 심고, 태그가 발동되도록 해봅시다.
+ [바로 구매] 버튼도 상품을 장바구니에 추가한 후, 장바구니 리스트 페이지를 건너 뛴 후 주문서 작성페이지로 바로 넘어가는 기능이기때문에 [바로 구매]버튼에도 장바구니에 담기 이벤트가 추가되어야되지 않나 라는 생각이 나중에 들어서 해당 버튼에서 추가했습니다....!
[장바구니에 담기] 버튼과 [바로 구매]버튼에 심어봅시다.
전 단계는아래 링크에서 확인할 수 있습니다.
STEP4. 상품 상세페이지 조회 측정하기(Tracking product detail views)
STEP3. 상품 클릭 측정하기(Measuring Product Clicks)
STEP2. 상품 노출 측정하기(Measuring Product Impressions View)
STEP1. 기본 셋팅 및 모든페이지뷰 태그만들기
1. 카페24 소스에 스크립트 추가하기
1) 아래와 같이 상품리스트 html 페이지의 하단에 스크립트를 삽입합니다. 저는 detail.html 페이지 하단에 작성했습니다.
- 카페24에서 제공하는 변수들을 주로 사용했고 quantity같이 제공하지않는 변수에 대해서는 jquery로 값을 가져왔습니다.
- 해당 변수들을 쓰려면 class와 module이 포함된 div태그내에 스크립트를 작성해야 변수들을 인식할 수 있습니다.
- 예로 div태그 내부에 쓰지 않으면 상품명이 {$name} 라고 그대로 들어가게되니 주의하세요!
- 카페24 디자인에 따라경우 변수명이 달라질 수 있습니다.
- 아래에 작성한 스크립트의 경우엔 모바일 디자인에서도 동일하게 적용되었습니다.
카페24 변수 참고링크 : http://sdsupport.cafe24.com/product/detail.html?product_no=3828&cate_no=66&display_group=1
<div class="product_detail" module="product_detail">
<script>
// 장바구니에 담기 버튼 클릭시 이벤트
function addtoCart(){
// 수량이 1이상이어야 장바구니에 담기 이벤트가 실행됨
var total_quantity = $(".total").html().substring($(".total").html().indexOf('(')+1, $(".total").html().indexOf('개'));
if( total_quantity && total_quantity > 0){
dataLayer.push({
'event': 'addToCart',
'ecommerce': {
'currencyCode': 'KRW',
'add': { // 'add' actionFieldObject measures.
'products': [{ // adding a product to a shopping cart.
'name': '{$name}', // Name or ID is required.
'id': '{$product_no}',
'price': '{$product_sale_price}'.split('.')[0],
'brand': 'Healo',
'category': '{$cate_no}',
'quantity': total_quantity
}]
}
}
});
}
}
</script>
</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=product-page