기본 설정 및 모든 페이지 뷰 설정.
전체페이지에서 모두다 로딩이 되는 스크립트로 모든 페이지에 공통으로 삽입되어야 한다.
페이지의 <HEAD> 에서 가장 높은 위치에 삽입.
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WJHQG7X');</script>
<!-- End Google Tag Manager --><BODY> 태그 바로 뒤에 삽입
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WJHQG7X"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->상품노출 측정하기
카테고리 리스트 또는 검색등의 페이지에서 상품 리스트에 표시되는 상품의 전체 리스틑 출력한다.
MORE 버튼을 통한 하나의 페이지에서 계속 상품의 노출이 발생할 경우 이에 대한 조치도 함께 진행 한다.
html 페이지의 하단에 스크립트를 삽입한다.
html classname 은 페이지의 상황에 따라 변경될 수 있다. ( ex : .prdList .item . name )
<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>
상품 상세페이지로 들어가기 위한 클릭을 체크하기 위해.
상품리스트 또는 특정 페이지에서 상품의 상세에 접근하기 위해 클릭하는 이벤트를 캐치한다.
상품의 링크와 함께 이미지의 클릭도 함께 GA 로 PUSH 한다.
html 하단에 삽입한다.
<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>상품 상세 페이지 내부에 삽입하여 상세 페이지 로드에 관한 정보를 GA 로 푸시함.
상세 페이지의 로드 정보를 GA 에 푸시하기 위한 스크립트이다.
상세 페이지의 정보를 확인하려는 페이지에만 삽입한다. ( ex : prodDetail.html )
html하단에 삽입한다.
<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>상품 상세 페이지에서 장바구니 담기 클릭시 발생하는 이벤트 푸시
상품 상세 페이지에서 장바구니 담기 클릭을 확인한다.
html 하단에 삽입한다.
<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>장바구니에서 장바구니 비우기 또는 상품을 삭제하는 스크립트 확인.
장바구니 페이지상에서 전체 비우기와 상품 지우기를 측정하기 위해 사용한다.
<div module="Order_NormNormal">
<div module="Order_list"><!-- 일반 기본배송 -->
<script>
// 장바구니에 담겨있는 모든 상품정보 : echo_products
if(!echo_products) var echo_products =[];
echo_products.push({
'id' : '{$product_no}',
'name' : '{$name}',
'price' : '{$product_sale_price}'.replace(',','').replace('원',''),
'brand' : 'Healo',
'category' : '{$cate_no}',
'quantity': '{$form.quantity}'.substring('{$form.quantity}'.indexOf('value=')+7,'{$form.quantity}'.indexOf(' type=')-1)
});
// [장바구니 비우기] 버튼 클릭시 작동 : echo_products 사용
function removeFromCart(){
dataLayer.push({
'event': 'removeFromCart',
'ecommerce': {
'currencyCode': 'KRW',
'remove': {
'products': echo_products
}
}
});
}
// 선택상품이 담겨있는 상품정보 : document.checked_products
$('.orderListAreatable input[type=checkbox]').on('click',function(){
//console.log($(this));
document.checkedItemsIndex = []; // check한 인덱스들
document.checked_products = []; //check한 인덱스순서에 있는 제품들 정보
$('.orderListArea tbody.xans-order-list input[type=checkbox]').each(function(index, item){
if($(this).attr("checked")){
//console.log($(this).attr('id'));
// 체크한 상품의 인덱스를 담음
document.checkedItemsIndex.push($(this).attr('id').substring($(this).attr('id').lastIndexOf('id_')+3,$(this).attr('id').length))
}
if($('tbody.xans-order-list input[type=checkbox]').length === index+1) {
//console.log(document.checkedItemsIndex);
document.checkedItemsIndex.forEach(function(item, index, object) {
//체크한 인덱스에 있는 상품정보를 모음
document.checked_products.push(echo_products[item]);
});
}
})
})
// [선택상품 삭제] 버튼 클릭시 작동 : document.checked_products 사용
function removeFromCartIndivisual(){
if(document.checked_products.length > 0){
dataLayer.push({
'event': 'removeFromCart',
'ecommerce': {
'currencyCode': 'KRW',
'remove': {
'products': document.checked_products
}
}
});
}
}
</script>
</div>
</div>구매 완료를 측정할때
제품의 구매가 완료되어 제품의 리스트가 출력되는 페이지에 삽입하여 측정되게 한다.
<!-- 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><!-- GTM checkout STEP3 : 주문완료 -->
<!-- #2 상품들객체(echo_products)를 GTM 이벤트와 함께 푸쉬 -->
<div module="Order_result" style="display:none">
<script>
// 주문id가 있어야 purchase로 잡힘
if( '{$order_id}' ){
// 디자인 편집창에서 주문 id가 디폴드'20111102-0000001' 되어있어서 이것을 제외한 구매id만 purchase로 날라감
if('{$order_id}' != '20111102-0000001'){
dataLayer.push({
'event' : 'checkout',
'ecommerce' : {
'checkout': {
'actionField' : {
'step' : 3,
'option' : '주문완료'
},
'products' : echo_products
}
}
});
}
}
</script>
</div>장바구니의 상품 전체 목록을 측정
장바구니의 전체 상품 목록을 측정하게끔 작업한다.
<!-- GTM checkout STEP1 : 장바구니-->
<!-- #1 모듈에 맞게 장바구니에 있는 상품들을 객체(echo_products)에 담음 -->
<div module="Order_NormNormal">
<div module="Order_list"><!-- 일반 기본배송 -->
<script>
if(!echo_products) var echo_products =[];
echo_products.push({
'id' : '{$product_no}',
'name' : '{$name}',
'price' : '{$product_sale_price}'.replace(',','').replace('원',''),
'brand' : 'Healo',
'category' : '{$cate_no}',
'quantity': '{$form.quantity}'.substring('{$form.quantity}'.indexOf('value=')+7,'{$form.quantity}'.indexOf(' type=')-1)
});
</script>
</div>
</div><!-- GTM checkout STEP1 : 장바구니 -->
<!-- #2 상품들객체(echo_products)를 GTM 이벤트와 함께 푸쉬 -->
<script>
var echo_products = echo_products||[];
if(echo_products){
dataLayer.push({
'event' : 'checkout',
'ecommerce' : {
'checkout': {
'actionField' : {
'step' : 1,
'option' : '장바구니'
},
'products' : echo_products
}
}
});
}
</script>주문서 작성 페이지의 리스트를 측정한다.
주문서 작성페이지에서 상품의 리스트를 측정한다.
<!-- #1 주문서에 있는 상품들을 객체(echo_products)에 담음 -->
<!--Product Array-->
<script>
if(!echo_products) var echo_products=[];
if('{$product_name}'!='' || !'{$product_name}'.includes("상품")){
echo_products.push({
'id' : '{$param}'.substr('{$param}'.indexOf('product_no='), '{$param}'.indexOf('&')-1).replace('product_no=',''),
'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><!-- GTM checkout STEP2 : 주문서작성-->
<!-- #2 상품들객체(echo_products)를 GTM 이벤트와 함께 푸쉬 -->
<script>
var echo_products = echo_products||[];
if(echo_products){
dataLayer.push({
'event' : 'checkout',
'ecommerce' : {
'checkout': {
'actionField' : {
'step' : 2,
'option' : '주문서작성'
},
'products' : echo_products
}
}
});
}
</script>
모든 태그는 GTM 에 작업이 되어야 하는 상태임.
댓글