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

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

---

 

Intro

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

---

 

전자상거래

사용자가 우리 쇼핑몰에 들어와서 하는 구매 과정을 간단히 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 홈페이지로 들어가서 관리>전자상거래 설정 에 들어가서
‘향상된 전자상거래 설정‘을 ON 해줍니다.
(아래의 Checkout 라벨 설정은 다음에 다시 설명하겠습니다)

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

---

 

상품 상세 보기 추적

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

‘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이 “아! 얘가 디테일뷰에 들어왔다 말하고 있구나”라고 캐치할 수 있게 됩니다.

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

그 정보대로 트리거를 만들어줍니다.
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데이터는, 핑크퐁 북스토어 디테일 페이지엔 ‘추천 상품’도 같이 뜨기 때문에, 그것도 잡아준 것입니다)

이는 Google Analytics의 ‘전환>전자상거래>제품 실적 – 쇼핑 행동‘에서 확인할 수 있습니다.

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

---

 

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

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

---

Outro

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