최근 업데이트 2019-08-29 스크립트 소스 일부분 변경, 태그와 트리거 생성하는 이미지 교체
상품 노출 측정은 두 가지로 방법으로 나눠집니다.
1. 상품리스트 페이지에 들어갔을 때
2. 상품 상세 페이지로 들어가기위해 상품을 클릭했을 때
우선 1번, 상품리스트 페이지에 들어갔을 때 보여지는 상품들을 모아 이벤트를 전송하는 걸 해보려합니다.
STEP1 은 아래 링크에서 확인할 수 있습니다.
1. 카페24 소스에 스크립트 추가하기
1) 아래와 같이 상품리스트 html 페이지의 하단에 스크립트를 삽입합니다. 자세한 스크립트문(조건문, 반복문 등)은 쇼핑몰에 따라 달라질 수 있습니다. 상품리스트 페이지에 들어가면 있는 상품 정보 리스트를 담아서 보내는 스크립트로, 인피니트로드로 스크롤에 맞춰 상품이 더 보여지거나 하는 로직은 추가적인 스크립트가 필요할 것입니다....!
<script>
var echo_products = []; // 상품들을 담을 객체
// 상품 리스트에서 상품이 한 개 이상이고 list2.html 페이지일 때만 echo_products에 상품들을 담음
// 아래 if조건문의 조건과 data들은 쇼핑몰에 따라 달라질 수 있습니다.
if($('.prdList .item .name a').length > 0 && location.href.includes('list2.html')){
$('.prdList .item .name a').each(function(){ // 상품들의 a태그들을 가져와서 반복문으로 담음
echo_products.push({
'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', //브랜드명
'list': "상품 리스트 : "+document.querySelector("meta[property='og:description']").getAttribute("content"), //리스트명
'position' : $('.prdList .item .name a').index(this)+1 //상품 위치
});
});
dataLayer.push({
'event' : 'ImpressionsView',
'ecommerce': {
'currencyCode':'KRW',
'impressions': echo_products // 위에서 담음 상품객체를 보냄
}
});
}
</script>
2) 삽입된 코드 모습
2. 태그관리자에서 태그와 트리거 만들고 미리보기
1) 태그를 아래와 같이 만듭니다.
2) 태그에서 참조하는 트리거는 아래와 같이 만듭니다. '이벤트 이름' 은 코드에서 작성했던 dataLayer 내부에 'event' 와 일치해야 이벤트가 측정됩니다.
3) 구글태그관리자에서 미리보기를 한 후 실제 페이지에 들어가면 태그와 이벤트, 데이터들이 전송됨을 확인할 수 있습니다.
3. 구글애널리틱스에서 확인하기
1) 구글애널리틱스에서 전환>전자상거래>제품목록실적으로 들어가서 상품들의 노출 수를 확인할 수 있습니다. 기존에 dataLayer 내부에 list 값을 넣지 않아서 '제품 목록 이름'이 (not set)으로 나오는 문제가 있었습니다. 사실 이건 문제가 아니라 상품 목록을 구분하지 않았을 시 일반적인 경우이고! list 를 구분하고자할 때 list와 해당 값만 추가해주면 문제없이 나옵니다. 저는 '상품 리스트 : 마사지기' 와 '상품 리스트 : 패치'로 상품 목록을 구분했습니다.
(검은색 처리 부분은ㅠㅠ 여러번 시도한 흔적입니다....ㅠㅠ)
2) 상품 목록을 클릭하면 상품 제품 뷰 노출 수를 확인할 수 있습니다.
참조링크 1 : https://developers.google.com/tag-manager/enhanced-ecommerce#product-impressions
참조링크 2 : https://canonicalized.com/enhanced-ecommerce-tag-manager/?section=listing-pages