[Google Analtyics 삽질냠냠 #3] Enhanced Ecommerce 적용하기 (feat. Google Tag Manager)

banner-772x250-11

[Google Analtyics 삽질냠냠 #1] 구글 애널리틱스 설치부터 적용까지
[Google Analtyics 삽질냠냠 #2] 이벤트, 그리고 Google Tag Manager


 

Intro

드디어 전자상거래까지 왔네요. 전자상거래 과정은 약간 난이도가 있습니다 (가장 길게 삽질을 했던 부분입니다).
하지만 적용하고 나면 어뫄어뫄한 데이터를 볼 수 있습니다. 함께 적용해보아요!


 

전자상거래

스크린샷 2016-01-14 오후 8.45.31
사용자가 우리 쇼핑몰에 들어와서 하는 구매 과정을 간단히 4가지로 나누어 보겠습니다.

  1. 제품 리스트 보기
  2. 상품 상세 보기
  3. 장바구니 담기
  4. 결제 스텝

우린 이들을 추적하라고 Google Analytics, 그리고  Google Tag Manager에게 알려주어야 합니다. 이는 몇 가지 작업이 필요합니다. 구글에게 우리가 어떻게 알려주면 될까요?

  1. 안녕 구글? 지금 ‘상품 상세 보기‘에 들어왔어.
  2. 상품 고유 ID는 33이고
  3. 가격은 7,800원이고
  4. 카테고리는 사운드북이야.

혹은, 주문하는 페이지에서도 알려줄 수 있겠죠?

  1. 안녕 구글? 지금 ‘주문 완료‘ 페이지에 들어왔어.
  2. 주문번호는 99번이고
  3. 물건은 자동차 사운드북(ID: 33, 이름:자동차 사운드북, 가격:7800, 카테고리:사운드북)이랑
  4. 핑크퐁 대형 인형(ID: 50, 이름:핑크퐁 대형 인형, 가격:20000, 카테고리:인형)을 샀어.
  5. 총 가격은 27,800원이고
  6. 배송비는 없대!

이런 식으로 말이죠. 자, 이젠 이걸 코드에 적어주면 됩니다!


 

Enhanced Ecommerce with Google Tag Manager

우리는 태그매니저를 사용해 Enhanced Ecommerce를 추적할것입니다.
(만약 그냥 Ecommerce만 추적하고싶으신 분은 mine the log의 튜토리얼을 보시면 상세하게 나와있습니다^^. 구매/환불한 데이터를 추적하실 수 있습니다.)

Google_Analytics
Google Analytics 홈페이지로 들어가서 관리>전자상거래 설정 에 들어가서
향상된 전자상거래 설정‘을 ON 해줍니다.
(아래의 Checkout 라벨 설정은 다음에 다시 설명하겠습니다)

Google_Analytics

설정 페이지 들어온 김에 ‘설정 보기’에서 표시 통화를 원하는 통화로 고쳐줍니다.


 

상품 상세 보기 추적

스크린샷 2016-01-14 오후 9.09.00

먼저 ‘상품 상세 보기‘를 추적해 볼까요?
어떤 코드를 넣어야 할지 보기 위해 공식 사이트에 들어가봅니다.

Enhanced_Ecommerce__UA__Developer_Guide_ _ _Google_Tag_Manager_for_Web_Tracking_ _ _Google_Developers
Measuring Views of Product Details‘이것이겠군요!
처음 보면 “그래서 이걸로 어쩌라고“란 말이 나오는 불친절한 설명입니다. 하지만 필요한 정보는 다 있다는거~
일단 저 스크립트를 우리 사이트 디테일뷰 소스코드에 넣어주어야 합니다.
그런데 중요한 건, 이 dataLayer는 Google Tag Manager 스니펫보다 먼저 불려져야 GTM이 데이터레이어를 읽을 수 있게 됩니다. 그리고 dataLayer가 불리기 전에,

dataLayer = [];

처럼 데이터레이어 초기화를 한 번 해 주세요.
말로만 하면 헷갈리니까 북스토어에 적용한 예시를 볼까요?

dataLayer.push({
'ecommerce': {
'detail': {
'products': [{
'name': '{{ product.name }}',
'id': '{{ product.id }}',
'price': '{{ product.sales_price }}',
'category': '{{ product.get_categories_ga }}'
}] } } });

북스토어는 django를 쓰고 있어 django Template Tag로 제품 이름, id, 가격, 카테고리를 넣어주었습니다.
넣을 데이터는 공식 사이트를 참고해 필요한 것들만 넣어주시면 됩니다(name이나 id중 하나는 필수입니다).

사이트 코드에서 필요한 정보를 데이터레이어로 쏘아줬다면, 이제 Google Tag Manager에서 그 쏜 정보를 받아서 이름을 지어줘야겠죠?
공식 사이트 설명 하단의 ‘See the Tag Configuration…’이 바로 그 정보입니다. 그대로만 작성해주면 GTM이 “아! 얘가 디테일뷰에 들어왔다 말하고 있구나”라고 캐치할 수 있게 됩니다.

Google_Tag_Manager
태그매니저로 가서 새로운 태그를 만듭니다.
여기서 공식사이트에서 알려준 정보를 그대로 넣어주면 됩니다.
공식 사이트 하단에 있는 ‘Firing Rule‘은 이 정보대로 트리거를 만들면 된다는 것입니다.

Google_Tag_Manager
그 정보대로 트리거를 만들어줍니다.
Page Path가 디테일뷰일때 gtm.dom이벤트가 일어나는 것을 캐치해준다는 것입니다.
‘matches RegEx’는 정규표현식이 일치하는 것을 지정해준 것인데,
디테일뷰의 Page Path는 /16/처럼 상품번호만 있으니 정규표현식으로
” /로 시작하고 숫자가 들어가고 /로 끝나는 걸 찾아줘”라는 표현식을 만들어 적어주었습니다.
정규표현식을 공부하려면 http://www.regexr.com/ 이 사이트가 좋습니다.

참고로 사이트에 들어와서 자동으로 발발되는 GTM 이벤트를 설명하고 넘어가겠습니다.
순서는 …gtm.js… > …gtm.dom… > …gtm.load으로 실행되고,
처음에 gtm.js가 불리고, 돔이 만들어지면 gtm.dom이 불리고, 모든 요소가 불리면 gtm.load가 불리워집니다. 이 타이밍을 제대로 맞춰야 google tag manager에서 원하는 이벤트를 부를 수 있습니다.
난 잘 넣었는데 왜 안먹지?란 의문이 들 때 GTM Preview를 사용하여 내가 원하는 데이터가 원하는 시점에 잘 박혀 있나 찾아보며 디버깅 해보면 좋습니다.

자동차_동요
GTM Preview로 잘 들어갔는지 확인해봅니다. Summary 말고 원하는 시점(DOM Ready)에 태그가 잘 들어갔나 확인하는 버릇을 가지는 것이 좋습니다(안그러다가 피본 1인)

자동차_동요
DOM Ready‘의 Data Layer를 보면, 내가 원한 detail정보가 gtm.dom시점에 잘 들어간 것을 확인할 수 있습니다. 만세~~ 잘하셨습니다!
(밑의 Impression데이터는, 핑크퐁 북스토어 디테일 페이지엔 ‘추천 상품’도 같이 뜨기 때문에, 그것도 잡아준 것입니다)

스크린샷 2016-01-14 오후 9.44.59
이는 Google Analytics의 ‘전환>전자상거래>제품 실적 – 쇼핑 행동‘에서 확인할 수 있습니다.

스크린샷 2016-01-14 오후 9.48.00
이렇게 적용시 제품별로 Ecommerce 데이터를 확인할 수 있습니다.
다른 활동들을 추가하려면 동일하게 공식 사이트를 참고하여 코드를 삽입하면 되겠죠? ^^


 

결제하려다 포기하지 말아줘

스크린샷 2016-01-14 오후 9.50.10
비슷한 방식으로 ‘Checkout Steps’를 추가하면, 이용자가 결제의 어느 스텝에서 그냥 나가버렸는지도 측정할 수 있습니다. 위와 같은 그래프로 확인할 수 있습니다.
특정 스텝에서 이탈률이 높거나 한다면, 그 단계가 어렵거나 하다는 문제가 있을 수 있다는 것을 예측할 수 있겠죠.


Outro

이것으로 고난이도였던 Google Tag Manager로 Enhanced Ecommerce 적용하기 튜토리얼이 끝났습니다. 처음에는 디버깅 하기가 쉽지 않을테니, 하다 막히면 댓글로 주저없이 문의 주시면 성심성의껏 답해드리겠습니다. 그럼 즐 Google Analytics 하시기 바랍니다!

Published by

JayJin

아름다운 웹과 디자인, 장고와 리액트, 그리고 음악과 먹방을 사랑하는 망고장스터

31 thoughts on “[Google Analtyics 삽질냠냠 #3] Enhanced Ecommerce 적용하기 (feat. Google Tag Manager)”

  1. 와!! 디테일하게 정리 잘 하셨네요. 도움이 많이 되었습니다.
    전 checkout 했는데 잘 안되네요. ㅠ,.ㅠ

    1. checkout라벨은 그 때 적용되는 물건도 함께 넣어주어야 잘 적용됩니다. 저는 처음에 물건을 빼고 단계만 적었다가 카운트되지 않아서 당황했어요~

  2. 구글 애널리틱스 공부하고 있는데요 데이터 레이어의 원하는 정보를 담는 부분이 많이 어렵네요 선언하는 형태는 알겠는데 어떤식으로 해야 넣고 싶은 데이터를 넣을 수 있는 건가요..?

    1. HTML의 data attribute랑 약간 비슷한 개념이라 생각하시면 됩니다. 원하는 데이터를 키워드 형식으로 javascript에서 쏘고, 그걸 GA 사이트에서 받아서 처리할 수 있습니다~

    2. 데이터 레이어의 값을 넣었는데 Dom Ready 때 넣는 거랑 Page Load 때 넣는거랑 구글 애널리틱스 내에서 무슨 차이가 있을까요..? 디테일 페이지가 ajax 요청 후 결과를 받은 후 보여지기 때문에 Dom Ready 때 값을 담을 수 없습니다. Page Load에 Data Layer에 디테일 페이지의 원하는 데이터를 javascript에서 쏘기까지 했습니다. 혹시 상품 디테일 페이지에서의 구글 애널리틱스 코드에 ecommerce.js 까지 추가를 해줘야 디테일에서 넣은 데이터 레이어 값이 구글 애널리틱스에 쌓이는건가요.. 너무 질문이 길었습니다… ㅜㅜ 죄송합니다.

      1. Javascript의 DOM ready와 Page Load와 같은 개념입니다.
        – Dom Ready: HTML DOM들이 로드되면 바로 실행
        – Page Load: 문서 내의 모든 리소스(이미지 등)이 모두 다운된 후에 실행

        ajax요청 시 success에 콜백으로 데이터레이어 쏘면 어떻게 되나요?
        지금 GA 데이터레이어를 어떤 목적으로 쓰려 하시는건가요?

  3. ajax요청 시 success에 콜백으로 데이터레이어 쏘면 어떻게 되나요?
    결과적으로는 데이터레이어를 통해 무언가 일어나는 것 같지 않습니다…
    미리보기로 볼 때 PageView, DOM Ready, Message, Page Load로 단계가 있을 때 Message 단계에서 Pushed to Data Layer로 해당 상품의 디테일 정보가 입력됩니다. 예시로) name, id, price, color 등등..
    그럼 Page Load 단계에서는 data Layer에 각 값들이 들어 있습니다. (위에 포스팅의 캡처한 내용처럼)
    dataLayer.push를 통해 data Layer에 각 값들을 넣은 값을 구글 애널리틱스 페이지에서 데이터 레이어로 값을 어떻게 보는건지 궁금합니다.

    현재는 ecommerce:addItem 을 통해 상세 페이지의 dataLayer로 push 하는 것처럼 넣어서 상품 조회정도는 보고 있는데 데이터레이어는 어떤식으로 활용하는지 알고 싶습니다.

    지금 GA 데이터레이어를 어떤 목적으로 쓰려 하시는건가요?
    현재는 전자상거래를 통해 어떤 상품을 제일 많이 보는지 알기 위해서 조회 수 정도를 체크 하는 용도로 사용하려고 합니다.
    조회한 상품에 대한 상세 정보까지 같이 보이게 하려고 하는 목적입니다.

    1. 아아 그러시다면 위 블로그 글의

      참고로 사이트에 들어와서 자동으로 발발되는 GTM 이벤트를 설명하고 넘어가겠습니다.
      순서는 …gtm.js… > …gtm.dom… > …gtm.load으로 실행되고,
      처음에 gtm.js가 불리고, 돔이 만들어지면 gtm.dom이 불리고, 모든 요소가 불리면 gtm.load가 불리워집니다. 이 타이밍을 제대로 맞춰야 google tag manager에서 원하는 이벤트를 부를 수 있습니다.
      난 잘 넣었는데 왜 안먹지?란 의문이 들 때 GTM Preview를 사용하여 내가 원하는 데이터가 원하는 시점에 잘 박혀 있나 찾아보며 디버깅 해보면 좋습니다.
      

      를 참고하시면 좋을 것 같습니다.

      그리고 GA만으로, 그리고 GA와 태그매니저를 사용하는 두 방법 모두 해 본 결과, Enhanced Ecommerce에서 태그매니저를 사용하는건 가시적으로 확인하기 쉽다는 것 외에 없는 것 같습니다. 다음에 또 한다면 그냥 GA만으로 할것입니다~

  4. 잘 정리된 글에 제 생각도 많이 정리된 것 같습니다 🙂
    impressions은 어떻게 구현하셨는지 궁금합니다.
    핑크퐁 사이트를 실제로 보니 연관상품 및 list 에 모두 impression가 실행되고 있는데 소스보기에는 나오지 않네요?
    위의 것처럼 약간은 소스 오픈…을 해주실 수 있으신가요?

    1. 사이트에서 impressions은 아래 코드처럼 측정하고 있습니다 🙂

      /* 제품 리스트 노출 측정 */
      dataLayer = [];
      var impressionsArr = [];
      
      $(function() {
          $('ul.product div.product').each(function() {
              var product = {};
              var $el = $(this);
              product['name'] = $el.data('name');
              product['id'] =  $el.data('id');
              product['price'] =  $el.data('price');
              product['list'] = location.pathname;
              product['category'] =  $el.data('category');
              impressionsArr.push(product);
          });
      
          if(impressionsArr.length != 0) {
              dataLayer.push({
                  'ecommerce': {
                      'impressions': impressionsArr
                  }
              });
          }
          /* 카트에서 빼기 */
          $('form.cart').on('click', 'ul.cart a.remove', function() {
              var $el = $(this).closest('li');
              dataLayer.push({
                  'event': 'removeFromCart',
                  'ecommerce': {
                      'remove': {
                          'products': [{
                              'name': $el.data('name'),
                              'id': $el.data('product'),
                              'price': $el.data('price'),
                              'category': $el.data('category')
                          }]
                      }
                  }
              });
          });
      });
      
  5. 안녕하세요?
    해당 내용을 고도몰에 반영하려고 하는데..
    어렵네요..ㅠ
    혹시 고도몰에 적용시,
    적용위치나 적용 코드도 알고 계신가요?
    태그매니저 써도 되고, 안써도 되고 상관없습니다..

  6. 좋은글 올려주셔서 감사합니다.
    질문이 한가지 있습니다.
    GA단독 사용의 경우 GA추적코드 아래에 Ecommerce.js 플러그인 호출하여 바로 사용하면되는데,
    제가 GTM 사용중이라 GTM 설치코드에 같은 방식으로 사용할 수 있을까요? dataLayer.push 없이요..

  7. Google Tag Manager에서 그 쏜 정보를 받아서 이름을 지어줘야겠죠?
    부터 못따라 가고 있습니다. ㅠㅠ
    메뉴얼대로 따라하고 있는데
    새로운 태그를 만드는 방법이 조금 바뀐 것 같아요.
    도와주세요 ㅠㅠ

    1. ui부분이 많이 바뀌긴 했지만 기본적으로 글작성자님이 작성한 글과 상당히 비슷한 내용과 이름으로 구성되어있기때문에 아주 차근 차근 찾아보시면 될겁니다. 실제로 해보시고 디버깅할때 안되시면 다른 변수나 트리거 사용하셔도 되고요

  8. 좋은글 감사합니다. 덕분에 무난하지는 않지만 기본적인 루트가 완성된거같습니다. 다만 궁금한 사항이 있는데 쇼핑행동 분석에서 ,

    전체세션수->제품을 조회한 세션수->장바구니를 추가한 세션수->결제한 세션수->거래가 발생한 세션수

    이런식으로 나뉘는데
    결제한 세션수가 GTM에서 어디부분인지 잘 모르겠네요

    Product Impressions
    Product Clicks
    Product Detail Impressions -> 제품을 조회한 세션수
    Add / Remove from Cart -> 장바구니 추가를 사용한 세션수,장바구니이탈
    Promotion Impressions
    Promotion Clicks
    Checkout
    Purchases ->거래가 발생한 세션수
    Refunds ->환불

    그럼 과연 어떤 부분이 결제한 세션수이며 결제이탈에 해당 되는지 모르겠네요

  9. Pingback: BeeMarketer
  10. 안녕하세요. 님의 글을 보고 향상된 전자상거래를 적용하고 있습니다.
    근데 적용을 잘못한건지.. 제품 목록 실적에는 (not set)만 나옵니다.
    기본측정기준에서 상품을 클릭하면 상품리스트는 뜹니다 ㅠㅠ

  11. 안녕하세요…!! 좋은글 항상 감사합니다. 질문이 두가지 있습니다. ㅎㅎ
    1. 한 상품에 대해서, 결제 케이스가 2가지입니다.
    예를들어, 상품 A에 대하여 30일이용 5만원 / 60일이용 10만원입니다.
    별도의 페이지가 없고, 30일이용 5만원 혹은 60일이용 10만원을 누르면 바로 결제페이지로 넘어갑니다.
    이럴경우 ‘measuring’ 코드를 어떻게 넣어야하는지 모르겠습니다.

    트리거 만들때, 꼭 path path를 해야하나요 ? 저희는 ajax기반이라, 다른 변수를 써야할 것 같아서요.

  12. 먼저 ‘상품 상세 보기‘를 추적해 볼까요?
    어떤 코드를 넣어야 할지 보기 위해 공식 사이트에 들어가봅니다.

    여기부터 막힙니다 ㅠㅠ 어떤 코드를 어디에 어떻게 넣으면 되죠..ㅠㅠ 이벤트 추척은 얼추 걸어두었는데 GTM 통해서.. 전자상거래는 정말 이해가 안되네요

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s