쇼핑몰에서 구글 애널리틱스 전자상거래 관련 태깅 과 레포트 1

웹로그 분석 툴을 몇번 설치해서 보았지만 태깅도 쉽고 원하는 수준의 분석리포팅을 해주는것은 구글 애널리틱스 만한것이 없는것 같다. 서비스 하고 있는 사이트의 사용자 분석을 위해서는 필수(?)이지만 관심없는 사이트 운영자도 많다. 하지만 자신이 무엇을 서비스하던 구글 애널리틱스는 그냥 설치하고 보는것이 100% 맞다. 그냥 진리

특히 쇼핑몰 경우는 어떤 채널을 통해 나의 웹사이트에 랜딩을 한후 사용자들의 행동을 하는지 알기원하다면필수이지만 사실 설치도 안되고 중요성에대해 인지하지 않은 운영자도 많다. 지금 내가 관리하고 있는 사이트도 내가 입사하기전까지 애널리틱스같은 사용자 분석 툴이 없었다. 시간도 많이 걸리는 작업도아니고 순전히 내가 궁금해서 셋팅을 하고 2년정도 된 상태이다. 여러가지 요인이 있겠지만 사내의 관심은 전후는 비슷하다. 여러 좋은회사 머리좋은 사람들이 모여있는 IT회사에선 의사결정은 DATA에의해 결정된다는말을 많이 들었지만 나에게 이상적인 말로만 들리고 지금도 그렇게 들린다. 쇼핑몰 사이트의 화려한 최신의 Jquery 플러그인이 적용된 메인페이지로의 전환은 작업자의 자기위안 또는 이직원이 일을 하고 있구나 정도의 판단수단이 되는 일일 뿐인 경우가 많다. 이 무슨 의미없는 일인가?  이번 개편은 사용자들이 편하게 되어 있어서 보기 좋고 편하군 이라고 말하는 사람은 '예측'이나 그럴것이라고 '기대'에찬 말 일뿐이다. 

일단 기존 구버전의 애널리틱스 추적코드를 유니버셜 버젼(신버젼)으로 변경하였다.

<script>

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-******-*', 'auto');   ga('send', 'pageview');

</script>

이렇게 생겼는데 기존 ga.js -> analytics.js 로 변경되었다.

사이트에서 기존 구버젼을 기준으로 태깅해놓은 많은 페이지를 신버젼으로 일일이 찾아서 바꾸는것도 귀찮은 일이라 미뤄두었다가 이번 메인 페이지의 대대적인 UI변경을 기점으로 애널리틱스 추적코드를 유니버셜 버젼(ga.js)로 업그레이드 하였다. 메인에 업체 광고 배너도 여러장 돌아가고있는데 하반기에는 이에대한 레포트나 광고 영역이 늘어난다고 하니 정확한 집계를 위해선 다시 체크하는 작업이 필요하였다.

실제 바뀐부분을 나열해보면 

1.이벤트 부분

구버젼: _gaq.push(['_trackEvent', 'TopnaviMenu', 'Click', '회원가입']);

신버젼: ga('send', 'event','TopnaviMenu','Click', '회원가입');

신버젼 함수가 깔끔해 보인다.

2.가상 page view 부분

구버젼: _gaq.push(['_trackPageview', 'zero_result']);

신버젼: ga('send', 'pageview', 'zero_result');

이렇게 임의로 네이밍된(zero_result) 페이지뷰 호출은 애널리틱스 리포트에서 zero_result라는 이름의 페이지뷰수로 집계되는데 실제 없는 페이지이나 이렇게 임의로 집계하게 하였다.

나는 이것을 쇼핑몰 검색 결과 페이지에 태깅을 해놓았는데 zero_result 이름에서 알 수 있듯이 사용자가 검색을 할때 검색결과가 하나도 없을때를 집계하기위해 태깅하였다. 나는 우리 쇼핑몰에서 사용자가 어떤 상품 키워드로 검색을 했는데 "검색결과"가 없었는지 그리고 그 사용자는 그다음 어떤페이지로 떠났는지 등등의 행동을 알고 싶었다.

애널리틱스에서 이 페이지를 본 사용자만 필터나 디멘션을 걸어 리포팅된 자료를 보면 이러한 검색결과 없음을 경험(?)한 사용자들의 행동에대한 좀 더 유용한 정보를 얻을 수 있을 것이라 기대했다.

3.전자상거래 부분

ga('require', 'ecommerce');  ->전자상거래 모듈 로드

구버젼

_gaq.push(['_addTrans',
    '',           // order ID - required
    'mysiteurl',  // affiliation or store name
    '',          // total - required
    '0.1',       // tax
    '5',         // shipping
    '',           // city
    '',             // state or province
    'KR'             // country
  ]);

_gaq.push(['_addItem',
    '{.ordno}',           // order ID - required
    '{.goodsno}-{.goodsnm}',           // SKU/code - required
    '{.goodsnm}',        // product name
    '{.category_name}',   // category or variation
    '{.cost}',          // unit price - required
    '{.ea}'               // quantity - required
  ]);

_gaq.push(['_trackTrans']); //submits transaction to the Analytics servers

신버젼

 ga('ecommerce:addTransaction', {

  'id': '{ordno}',                     // Transaction ID. Required.

  'affiliation': 'mysiteurl',   // Affiliation or store name.

  'revenue': '{settleprice}',               // Grand Total.

  'shipping': '5',                  // Shipping.

  'tax': '1.29'                     // Tax.

});

 ga('ecommerce:addItem', {

      'id': '{.ordno}',                     // Transaction ID. Required.

      'name': '{.goodsnm}',    // Product name. Required.

      'sku': '{.goodsno}-{.goodsnm}',                 // SKU/code.

      'category': '{.category_name}',         // Category or variation.

      'price': '{.cost}',                 // Unit price.

      'quantity':'{.ea}'                   // Quantity.

 });

 ga('ecommerce:send');

전자상거래는 이렇게 3개의 함수호출이 하나의 셋트인데 하나의 트랜잭션이라고 이해하면 된다. 

일반적인 쇼핑몰 구매 전환 스토리는

상품뷰->장바구니->주문서작성->결제->결제완료 인데 제일 마지막 결제완료 페이지에 태깅을 하였습니다.

호출함수 이름을 보면 

1.addTransaction 트랜잭션을 추가한다. 2.addItem:해당 쇼핑몰 주문내역을 추가한다 3.send:해당 전자상거래 정보를 구글 애널리틱스에 보낸다. 정도로 이해하면 된다.

2번에 해당하는 addItem부분은 일반적으로 쇼핑몰 주문 상품 내역은 1개또는 그 이상이 되는게 일반적이기 때문에 for 같은 순환문 사이에서 태깅을 해주는 형태가 된다.

php 를 예로 든다면 이런식이 된다.

결제 완료 페이지 orderend.php 

_gaq.push(['_addTrans', ....

//--- 결제 완료페이지 안내멘트 시작

고객님이 주문한 상품

<?

for($itemas $var){

?>

<?=$index=?>번 상품 <?=$var->goodsname?>

<script>

 ga('ecommerce:addItem', {

      'id': '{.ordno}',                     // Transaction ID. Required.

      'name': '{.goodsnm}',    // Product name. Required.

      'sku': '{.goodsno}-{.goodsnm}',                 // SKU/code.

      'category': '{.category_name}',         // Category or variation.

      'price': '{.cost}',                 // Unit price.

      'quantity':'{.ea}'                   // Quantity.

 });

</script>

<?}?>

이 정상 주문 되었습니다.

ga('ecommerce:send'); 

//-- 결제 완료 페이지 안내멘트 끝

위에 코드는 확인없이 적어 헷갈려 보이는데 특별한건 없습니다. '{ }'는 특정 PHP 템플릿에서 사용하는 코드인데 변수를 출력해라라는 출력용 코드이다. 말하고자하는 핵심은 주문한 상품 갯수만큼 addItem이 호출된다는 말입니다. 말로 풀어 혼란스러우나 태깅하는건 전자상거래과 관련된 analtyics 도움말을 보면 해당 매개변수 의미와 사용법이 자세히 나와있고 별다른 기술이 필요한 부분이 아니니 도움말을 참고하면 해결할 수 있다.

이렇게 전자상거래 관련 태깅을 해놓으면 좋은점은  매출 동향,카테고리별 매출 동향, 객단가, 전자상거래 전환율, 수량베이스 주문량, 인기상품등 통계정보를 쉽게 알 수가 있습니다.

좀 더 정확한 매출 집계를 위해선 쇼핑몰의 일반적인 관리페이지의 취소처리 업무에서 -금액으로 위에 있는 전자상거래 transaction을 호출해주면 좀 더 정확해진다. 어쨌든 태깅보다는 이런 통계를 보고 분석하는것이 이 작업의 목적입니다. 이제 진짜 할일은 이번주 전체 회원들에게 특가상품 이벤트 안내메일을 발송했는데 과연 메일링을 통한 해당 특가 상품의 매출은 영향이 이번 메일링으로 영향이 있었는지 아니면 삽질이었는지 등을 분석해야하는 일에 몰두 해야한다.

애널리틱스를 사용하는 이유는 집계를 위해서가 아니라 분석을 위함이고 종국으로 쇼핑몰 사이트의 목적인 매출 증대를 하기 위함이기 때문이다.

앞에서 말한 '예측' 이나 '기대' 가이나라 기본적인 통계에 근거해 이야기 해야한다. 웹사이트 개발자,디자이너,기획자는 특히 이러한 통계로 더 이야기 해야 한다고 생각한다. 대부분의 쇼핑몰 사장님들은 이번 UI 개편으로 이번달 매출이 올랐어! 정말 수고했어 능력있는 친구야~ 라고 말하지 않는다. 이달에 제품을 싸게 소싱해온 MD나 이벤트 추진한 마케터가 고생을 좀 했군... 정도로 생각한다.

이번 달에 어떤 페이지에 적용한 ajax를 이용한 장바구니 담기를 만들었거나 특정 카테고리의 장바구니 담기 이미지 버튼을 적용한것이 사이트에 정말 중요한 작업이었다고 말하기 위해선 우리는(개발자는)는 더욱 data로 이야기해야 하는게 아닌가 생각한다.