[GTM] 고도몰 5 향상된 전자상거래 구축

저번 블로그에서 추적 코드를 설치 후 고도몰5 향상된 전자상거래를 설정을 해보도록 하자. 추적 코드 삽입부터 보려면 아래 링크부터 시작 하면 된다.

 

- [GTM] 고도몰 5 향상된 전자상거래 추적 코드 설치

1. 고도몰 5 상품 만들기 및 진열

 

1-1. 상품 만들기

 

상품이 있어야 결제완료까지 할 수 있으므로 상품을 간단하게 만들어 주도록 하자.

 

1-2. 상품 진열

 

 

2. 고도몰 상품 상세보기 설정

 

2-1. 코드 확인

 

구글에서는 향상된 전자상거래 구글 태그 매니저 개발자 가이드가 있으니 참고해보도록 하자. 

 

- 구글 태그매니저 개발자 가이드

 

중괄호 안에 있는 코드는 고도몰의 치환 코드 상품번호, 상품명 판매가에 대한 코드이다.

 

<!-- 구글 태그 매니저 상품 상세 보기 -->
<script>
	var productInfo = [];
	productInfo.push({
	  "id": "{goodsView.goodsNo}",
	  "name": "{=goodsView['goodsNm']}",
	  "price": '{=gd_isset(goodsView['goodsPrice'],0)}'
	});

	dataLayer.push({
	  'event': 'detail',
	  'productInfo': productInfo,
	  'ecommerce': {
		'detail': {
		  'actionField': {'step': 1},
		  'products': productInfo
		 }
	   }
	});
</script>

 

2-2. 코드 추가

 

위 코드를 상품 상세 화면 파일 제일 밑에 추가해주도록 하자.

 

 

2-3. GTM 트리거 만들기

 

 

2-4. GTM 태그 만들기

 

 

4. 고도몰 장바구니

 

장바구니 코드에는 수량 정보도 필요해 quantity를 추가하고 장바구니 버튼 클릭시 dataLayer에 담아보자.

 

4-1. 코드확인

 

<!-- 구글 태그 매니저 장바구니 담기 -->
<script>
	var addToCart = function () {
		var productInfo = [];
		productInfo.push({
		  "id": "{goodsView.goodsNo}",
		  "name": "{=goodsView['goodsNm']}",
		  "price": '{=gd_isset(goodsView['goodsPrice'],0)}',
	      "quantity": goodsTotalCnt
		});

		dataLayer.push({
		  'event': 'addToCart',
		  'productInfo': productInfo,
		  'ecommerce': {
			'currencyCode': 'KRW',
			'add': {
			  'actionField': {'step': 2},
			  'products': productInfo
			}
		  }
		});
	}

	var cartBtnId = document.querySelector('#cartBtn');
	cartBtnId.addEventListener('click', addToCart);
</script>

 

4-2. 코드 추가

 

상품 상세 보기와 동일하게 상품상세화면 제일 밑에 추가해주자.

 

 

4-3. GTM 트리거 만들기

 

 

4-4. GTM 태그 만들기

 

 

5. 주문서 작성

 

5-1. 코드 확인

 

주문서 작성코드에서는 상품이 장바구니에 여러개 잇을때 각 상품별로 코드를 설정하는 방법말고 고도몰에서 상품 정보를 한번에 가져오는 루프 템플릿이 있습니다. 한번 확인해보자.

 

<!-- 구글 태그 매니저 주문서 작성 -->
<script>
    var productInfo = [
      <!--{ @ cartInfo }-->
        <!--{ @ .value_ }-->
          <!--{ @ ..value_ }-->
           {
             'id': '{=...goodsNo}',
             'name': '{=...goodsNm}',
             'price': '{=...price['goodsPrice']}',
             'quantity': '{=...goodsCnt}'
           },
      		<!--{ / }-->
        <!--{ / }-->
      <!--{ / }-->    
    ];

    dataLayer.push({
      'event': 'checkout',
      'productInfo': productInfo,
      'ecommerce': {
        'checkout': {
          'actionField': {'step': 3},
          'products': productInfo
       }
     },       
    });
</script>

 

5-2. 코드 추가

 

 

5-3. GTM 트리거 만들기

 

 

5-4. GTM 태그 만들기

 

 

6. 결제 완료 

 

6-1. 계좌 설정

 

일단 결제 완료를 하려면 무통장입금 계좌가 필요하다. 고도몰5 설정부터 하고 코드를 입력하도록 하자. 실제로 결제를 하는것이 아니니 설정만 해주도록 하자.

 

 

 

6-2. 코드 확인

 

이번 코드는 상당히 추가 할 것이 많다. 구글 태그매니저 가이드를 보고 비교해보자. 자바스크립트 부분은 아직 이해가 힘들어 설명은 추후에 한번 정리해서 자세히 올려보도록 하겠다.

 

 

<!-- 구글 태그 매니저 주문 완료 -->

<script>
    var transactionId = '{orderInfo.orderNo}';
    var revenue = '{=orderInfo.settlePrice}';
    var shipping = '{=gd_isset(orderInfo.totalDeliveryCharge)}';

    var productInfo = [
      <!--{ @ orderInfo.goods }-->
      {
        'id': '{=.goodsNo}',
        'name': '{=.goodsNm}',
        'price': '{=.goodsPrice}',
        'quantity': '{=.goodsCnt}'      
      },
      <!--{ / }-->
    ];

    dataLayer.push({
      'event': 'purchase',
      'transactionId': transactionId,
      'revenue': revenue,
      'shipping': shipping,      
      'productInfo': productInfo,
      'ecommerce': {
        'purchase': {
          'actionField': {
            'id': transactionId,
            'revenue': revenue,
            'shipping': shipping
          },
          'products': productInfo
        }
      }
    });    
</script>

 

6-3. 코드 추가

 

 

6-4. 트리거 만들기

 

 

6-5. 태그 만들기

 

여기서 비 상호작용 조회를 거짓으로 해야 한다. 결제 완료는 이탈로 잡지 않아야 되므로 거짓으로 해주자.

 

7. 확인 하기

 

실시간으로 들어가 이벤트에서 이벤트 최근 30분 기준을 눌러 확인해보자. 잘되었는지 확인하면 끝이난다.

이제 전환쪽에서도 잘되었는지 확인하기 바란다. 

 

여기까지 구축을 해보았는데 자바스크립트 부분은 아직 어려워 자세한 설명을 못하였다. 자세한 설명을 할 수 있을때 좀더 자세하게 다른 블로그로 올려두도록 하겠다. 이번 블로그는 설명이 많이 없어 너무 아쉬운 블로그다.

 

참조 : 고도몰 쇼핑몰에 GA 향상된 전자상거래 추적 코드 설정하기