쇼핑몰에서는 기본적인 트래픽 추적 외에도 상품 조회, 장바구니 담기, 구매 등 주요 액션들에 대한 정밀한 데이터

수집이 필요한데요. 구글 애널리틱스에서는 이러한 쇼핑몰의 니즈에 맞춰 표준화된 쇼핑몰의 단계를 정의하고

상황에 따른 데이터를 수집할 수 있는 향상된 전자상거래(Enhanced Ecommerce)라는 기능을 제공하고 있습니다.

이번 시간에는 구글 애널리틱스의 심화 기능인 향상된 전자상거래에 대해 알아보는 시간을 갖겠는데요. 향상된

전자상거래 설정을 위해서는 구글 태그 매니저와 구글 애널리틱스 설정이 선행되어야 하며, 따라서 아직 설정을

진행하지 않으신 분들은 아래 페이지를 참고하시어 먼저 진행해보시길 바랍니다.

고도몰 구글 애널리틱스 설치하기

※ 본 콘텐츠는 구글 태그 매니저를 통한 향상된 전자상거래 설정 방법을 다루고 있습니다.

※ 구글 애널리틱스에서는 총 10가지의 전자상거래 유형을 지원하고 있지만 여기서는 필수적으로 적용해야 할

   상품 상세페이지 조회, 장바구니 추가, 주문서 작성, 구매 완료 4가지 이벤트 설정에 대해서만 알아보겠습니다.

※ 향상된 전자상거래 기능은 내 쇼핑몰의 상태에 맞춰 원하는 형태로 구현할 수 있습니다. 추가적인 설정이나

   수정이 필요한 부분이 있다면 아래 구글 개발자 문서를 참고해 진행해 보시길 바랍니다.

Google Analytics Enhanced Ecommerce for Tag Manager

구글 애널리틱스 전자상거래 사용 설정

가장 먼저 구글 애널리틱스의 전자상거래 사용 설정을 해야 합니다. 구글 애널리틱스의 다음 경로로 이동해주세요.

관리

> 전자상거래 설정

아래 이미지와 같이 설정을 마친 후 저장을 해줍니다. 

상품 상세페이지 조회 이벤트 설정

상품 상세페이지 조회 이벤트의 경우에는 상품 상세페이지가 로딩되었을 시 상품의 이름과 id, 가격 정보 등을

Data Layer에 넣어주고 태그 매니저를 통해 이를 구글 애널리틱스에 전달하는 구조로 구현해야 합니다.

이를 위한 첫 번째 순서로는 상품 상세페이지에 이벤트 스크립트를 설치해줘야 하며 다음으로는 태그 매니저를

설정해줘야 합니다. 가장 먼저 설치 스크립트는 다음과 같습니다.

<!-- Enhanced Ecommerce for Tag Manager - Views of Product Details -->
<script>
  dataLayer.push({
    'event': 'detail',
    'ecommerce': {
      'detail': {
        'products': [{
          'name': '{goodsView.goodsNo}',
          'id': '{=goodsView['goodsNm']}',
          'price': '{=gd_isset(goodsView['goodsPrice'],0)}',
        }]
      }
    }
  });
</script>

위 스크립트를 아래 이미지와 같이 상품 > 상품상세화면 페이지 하단에 넣어주세요.

다음으로는 태그 매니저 설정을 진행하겠습니다.

트리거 탭에서 새로 만들기를 클릭해주세요

트리거 이름을 작성하고 트리거 구성을 클릭하세요.

맞춤 이벤트 클릭

이벤트 이름은 반드시 detail 이라고 작성한 후 저장해줍니다.

다음으로 태그 탭에서 새로 만들기를 클릭해주세요.

태그 이름을 작성해준 후 태그 구성을 클릭합니다.

태그 유형 선택에서 Google 애널리틱스: 유니버설 애널리틱스를 선택해줍니다.

이어서 아래와 같이 설정합니다.

> 추적 유형: 이벤트

> 카테고리: 전자상거래

> 작업: 상품 상세 보기

> 비 상호작용 조회: 참

> Google 애널리틱스 설정: 이전에 생성해 놓은 GA 설정 변수 선택

다음으로 트리거를 설정합니다. 방금 전에 생성한 맞춤 이벤트 트리거를 선택하면 됩니다.

설정한 내역을 확인 후 저장해줍니다. 더 이상 수정할 사항이 없다면 제출까지 완료합니다.

마지막으로 설정이 잘 되었는지 확인을 해보도록 하겠습니다.

미리보기를 클릭해주세요

쇼핑몰 주소를 넣어주고 connect를 클릭합니다.

연결 시 자동으로 열리는 여러분의 쇼핑몰에서 상품 하나를 조회해보겠습니다. 상품 상세페이지로 이동해주세요.

상세페이지가 로딩되었다면 다시 페이지로 돌아가 태그가 발동되었는지 확인할 수 있으며 Data Layer에 어떠한

정보값들이 들어왔는지도 확인할 수 있습니다.

다른 이벤트들 또한 동일한 방법을 통해 정상적으로 작동하고 있는지 확인할 수 있습니다.

이제부터 좀 더 빠르게 설정을 진행해보도록 하겠습니다.

장바구니 추가 이벤트 설정

장바구니 추가 이벤트의 경우 페이지 로드가 아닌 상품 상세페이지에서 장바구니 버튼을 클릭 시 데이터를 수집하는

이벤트로 구성해 보겠습니다.

아래 코드를 상품 > 상품상세화면 페이지 하단 Views of Product Details 코드 아래쪽으로 넣어주세요.

<!-- Enhanced Ecommerce for Tag Manager - Adding a Product to a Shopping Cart(Click Event) -->
<script>
  let cartBtn = document.querySelector('#cartBtn');
  cartBtn.addEventListener('click', () => {
    dataLayer.push({
      'event': 'addToCart',
      'ecommerce': {
        'add': {
          'products': [{
            'name': '{=goodsView['goodsNm']}',
            'id': '{goodsView.goodsNo}',
            'price': '{=gd_isset(goodsView['goodsPrice'],0)}',
            'quantity': goodsTotalCnt
          }]
        }
      }
    });
  });
</script>

다음으로 태그 매니저로 이동해서 아래와 같이 설정합니다. 방법은 상품 상세페이지 조회 이벤트 설정 시와

동일하며, 이벤트 이름은 반드시 addToCart 로 입력해주세요.

미리보기를 통해 확인해보면 아래와 같이 결과를 확인할 수 있습니다.

주문서 작성 이벤트 설정

주문서 작성/결제 페이지가 로딩되면 데이터를 수집하는 이벤트를 구성해보겠습니다.

아래 코드를 주문 > 주문서 작성/결제 페이지 하단으로 넣어주세요.

<!-- Enhanced Ecommerce for Tag Manager - Initiate Checkout -->
<script>
  dataLayer.push({
    'event': 'checkout',
    'ecommerce': {
      'checkout': {
        'actionField': {'step': 1},
        'products': [
          <!--{ @ cartInfo }-->
            <!--{ @ .value_ }-->
              <!--{ @ ..value_ }-->
                {
                  'name': '{=...goodsNm}',
                  'id': '{=...goodsNo}',                      
                  'price': '{=...price['goodsPrice']}',
                  'quantity': '{=...goodsCnt}'
                },
              <!--{ / }-->
            <!--{ / }-->
          <!--{ / }-->
        ]
      }
    },       
  });
</script>

다음으로 태그 매니저로 이동해서 아래와 같이 설정합니다. 이벤트 이름은 반드시 checkout 으로 입력해주세요.

미리보기를 통해 확인해보면 아래와 같이 결과를 확인할 수 있습니다.

구매 완료 이벤트 설정

향상된 전자상거래 설정에서 가장 중요하다고 할 수 있는 구매 완료 이벤트 설정입니다.

주문완료 페이지가 로드 되었을 시 이벤트가 발생할 수 있도록 설정해줍니다. 설정은 이전과 크게 다르지 않습니다.

아래 코드를 주문 > 주문완료 페이지 하단에 넣어주세요.

<!-- Enhanced Ecommerce for Tag Manager - Purchase -->
<script>
  dataLayer.push({
    'event': 'purchase',
    'ecommerce': {
      'purchase': {
        'actionField': {
          'id': '{orderInfo.orderNo}',
          'revenue': '{=orderInfo.settlePrice}',
          'shipping': '{=gd_isset(orderInfo.totalDeliveryCharge)}',
        },
        'products': [
          <!--{ @ orderInfo.goods }-->
            {
              'name': '{=.goodsNm}',
              'id': '{=.goodsNo}',
              'price': '{=.goodsPrice}',
              'quantity': '{=.goodsCnt}'
            },
          <!--{ / }-->
        ]
      }
    }
  });
</script>

다음으로 태그 매니저로 이동해서 아래와 같이 설정합니다.

이벤트 이름은 반드시 purchase 로 입력해야 하며, 비 상호작용 조회를 거짓으로 해줍니다.

미리보기를 통해 확인해보면 아래와 같이 결과를 확인할 수 있습니다.

여기까지 필수적인 전자상거래 이벤트들을 설정해봤습니다. 설정한 전자상거래 이벤트들을 통해 다양한 보고서들을

활용할 수 있는데요. 이와 관련해서는 다음 시간에 좀 더 자세히 안내드릴 수 있도록 하겠습니다.