최근 업데이트 2019-10-04
이번에는 상품 상세페이지 조회수를 측정해봅니다.
보통 상품리스트에서 상품을 클릭해서 상품상세페이지로 들어가기때문에, 저번 STEP 3 과 측정이 유사할 것입니다.
사실 상품리스트에서 상품을 클릭하면 상세페이지로 들어가기때문에
"상품클릭"과 "상세페이지 조회" 두 가지가 같은 것이 아닌가? 라는 생각을 했었는데,
"상품클릭"은 정말 단순히 상품리스트에서 클릭하는 행동을 측정하는 것이고!
이번에 하려는 "상세페이지 조회"은 페이지가 로드되는 것을 측정하는 것입니다.
예로 한 상품의 상세페이지에서 새로고침을 하거나, 해당 url로 직접 접속을 하게 되는 경우는 "상세페이지 조회"가 일어나고, "상품클릭"은 일어나지 않는 것이죠. 그래서 차이가 있긴 합니다.
전 단계는아래 링크에서 확인할 수 있습니다.
STEP3. 상품 클릭 측정하기(Measuring Product Clicks)
STEP2. 상품 노출 측정하기(Measuring Product Impressions View)
STEP1. 기본 셋팅 및 모든페이지뷰 태그만들기
1. 카페24 소스에 스크립트 추가하기
1) 아래와 같이 상품리스트 html 페이지의 하단에 스크립트를 삽입합니다. 저는 detail.html 페이지 하단에 작성했습니다.
- 이 전 STEPS에서는 상품에 대한 데이터를 직접 페이지에서 자바스크립트로 문자열들을 가져와서 보냈지만, 상세페이지에서는 카페24에서 제공하는 변수들을 사용했습니다. 스크립트가 좀 더 간단해졌네요.... :)
- 해당 변수들을 쓰려면 class와 module이 포함된 div태그내에 스크립트를 작성해야 변수들을 인식할 수 있습니다.
- 예로 div태그 내부에 쓰지 않으면 상품명이 {$name} 라고 그대로 들어가게되니 주의하세요!
- 모바일 디자인의 경우 변수명이 달라질 수 있습니다.
- ( ex. 모바일에서 price 같은 경우, 'price': '{$product_price_mobile}'.split('원')[0].replace('','') 이렇게 텍스트를 자바스크립트로 정리해서 들어갈 수 있도록 했습니다. )
카페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>
// 이 페이지 진입시, 상품 상세보기 이벤트
dataLayer.push({
'ecommerce': {
'detail': {
'products': [{
'name': '{$name}',
'id': '{$product_no}',
'price': '{$product_sale_price}'.split('.')[0],
'brand': 'Healo',
'category': '{$cate_no}'
}]
}
}
});
</script>
</div>
2) 삽입된 코드 모습
2. 태그관리자에서 태그와 트리거 만들고 미리보기
1) 태그를 아래와 같이 만듭니다.
2) 태그에서 참조하는 트리거는 아래와 같이 만듭니다. 상품상세페이지 url이 도메인/product/detail.html 이라서 해당 url에서만 실행되도록 아래와 같이 트리거를 주었습니다.
3) 구글태그관리자에서 미리보기를 한 후, 실제 상품상세페이지에 들어가면 태그와 이벤트, 데이터들이 전송됨을 확인할 수 있습니다.
3. 구글애널리틱스에서 확인하기
1) 구글애널리틱스에서 전환>전자상거래>쇼핑행동으로 들어가서 제품을 조회한 세션수로 확인할 수 있습니다.
참고사항
이미 STEP 2에서 상품을 클릭하는 것을 측정하는 Impression과 detail이 어떻게 보면 같은 기능일 수도 있다....는 생각을 했는데, 참조링크2를 보고 두 스크립트를 통합하여 하나의 dataLayer로 push할 수도 있다고 합니다. ecommerce 오브젝트에 impression과 detail 을 동시에 넣어서 push해도 될 것 같습니다.
참조링크 1 : https://developers.google.com/tag-manager/enhanced-ecommerce#details
참조링크 2 : https://canonicalized.com/enhanced-ecommerce-tag-manager/?section=product-page