[카페24에 향상된 전자상거래 적용하기] STEP3. 상품 클릭 측정하기(Measuring Product Clicks)

최근 업데이트 2019-08-28

상품 노출 측정은 두 가지로 방법으로 나눠집니다.

 

1. 상품리스트 페이지에 들어갔을 때

2. 상품 상세 페이지로 들어가기위해 상품을 클릭했을 때

 

이번에는 2번! 상품상세 페이지로 들어가기 위해 상품을 클릭했을 때 이벤트를 전송하는 걸 해봅시다.

 

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

 

STEP2. 상품 노출 측정하기(Measuring Product Impressions View)
STEP1. 기본 셋팅 및 모든페이지뷰 태그만들기

 

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

1) 아래와 같이 상품리스트 html 페이지의 하단에 스크립트를 삽입합니다. STEP2에서 상품 노출을 측정을 위한 스크립트 아래에 이어서 작성하면 됩니다.

• a 태그를 클릭하는 요소가 [상품이미지]와 [상품명] 이렇게 두 가지라서 각각의 클릭 함수들을 만들었습니다.
• 상품정보들을 주로 a 태그의 href 값들에서 뽑아낼 수 있도록 했고, 가격은 a태그 기준으로 요소를 찾아서 가격 텍스트를 넣었습니다.
• 아래 스크립트는 저번에도 그랬지만 카페24의 레이아웃에 따라 코드가 조금씩 다르기도 하고.... 스크립트에서 자바스크립트 혹은 제이쿼리를 쓰느냐....그에 따라 요소 셀렉하는 방법이 달라질 수 있음을 다시 안내드립니다.... ; (

<script>
    /* Product Impressions Click : 상품리스트에서 상품 클릭 측정 */
    // 1. 상품의 이름 클릭
    $('.prdList .item .name a').on('click',function(){
        dataLayer.push({
            'event': 'productClick',
            'ecommerce': {
                'click': {
                    'actionField': {'list': "상품 리스트 : "+document.querySelector("meta[property='og:description']").getAttribute("content") },
                    'products': [{
                        'id': new URL(this.href).searchParams.get("product_no"),
                        'name' : this.text, 
                        'price' : this.parentElement.nextElementSibling.nextElementSibling.innerText.replace(/,/gi,"").replace("원",""), 
                        'category' : new URL(this.href).searchParams.get("cate_no"), 
                        'brand' : 'Healo', 
                        'position' : $('.prdList .item .name a').index(this)+1
                    }]
                }
            }
         });          
    });

    // 1. 상품이미지 클릭
    $('.prdList .item .box > a').on('click',function(){
        dataLayer.push({
            'event': 'productClick',
            'ecommerce': {
                'click': {
                    'actionField': {'list': "상품 리스트 : "+document.querySelector("meta[property='og:description']").getAttribute("content") },
                    'products': [{
                        'id': new URL(this.href).searchParams.get("product_no"),
                        'name' : this.nextElementSibling.innerText, 
                        'price' : this.nextElementSibling.nextElementSibling.nextElementSibling.innerText.replace(/,/gi,"").replace("원",""), 
                        'category' : new URL(this.href).searchParams.get("cate_no"), 
                        'brand' : 'Healo', 
                        'position' : $('.prdList .item .box > a').index(this)+1
                    }]
                }
            }
        });          
    });
</script>

 

2) 삽입된 코드 모습

 

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

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

 

2) 태그에서 참조하는 트리거는 아래와 같이 만듭니다. '이벤트 이름' 은 코드에서 작성했던 dataLayer 내부에 'event' 와 일치해야 이벤트가 측정됩니다.

 

3) 구글태그관리자에서 미리보기를 한 후, 실제 페이지에 들어가서 상품을 클릭하면 태그와 이벤트, 데이터들이 전송됨을 확인할 수 있습니다.

• 상품을 클릭하면 해당 태그와 이벤트을 확인하기엔 순식간에 상품 상세보기 페이지로 넘어가게 됩니다ㅠㅠ 그래서 아래 이미지처럼 확인하시기는 쉽지 않을 것 같습니다....
• 아래 이미지는 DevTools 콘솔에서 위에서 삽입했던 스크립트를 바로 실행하여 확인 후 캡쳐한 것 입니다.

 

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

1) 우선 실시간>이벤트 에서 이벤트에 대한 확인이 가능합니다! (정말 실시간이기때문에 빨리 지나가거나 인터넷환경에 따라 확인을 못하실 수도 있습니다...ㅠㅠ) 보통 오른쪽 초당 이벤트 그래프에서는 클릭하는 순간 바가 생기는 걸 보실 수 있고, 하단에 활성사용자 표에 활성사용자에 대한 이벤트가 잡힘을 확인할 수 있습니다.

2) 구글애널리틱스에서 전환>전자상거래>제품목록실적으로 들어가서 상품들의 클릭 수를 확인할 수 있습니다. 저번에 만들었던 [제품 목록 조회수]와 이번에 만든[제품 목록 클릭수]를 기준으로 [제품 목록 클릭률]이 자동계산되어 나타나게됩니다.

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

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