[Google Analytics] 소셜 세그먼트, 판단 방식 TIP

SMARTSTUDY 마케팅팀 보노보님이 알려주신 한국형 꿀팁! 감사합니다 (- -)(_ _)

경로별 매출 – 세그먼트 사용

경로별 매출을 볼 때 세그먼트를 사용하게 되는데
설정할 때 소스에 “다음과 정확하게 일치”가 아니라 “다음을 포함”으로 하셔야 합니다.

GA가 페이스북을 앱, 모웹, 웹을 구분해서 트래킹하기 때문에 소스에서 다음과 일치로 하시면 수치가 덜 잡히게 됩니다.
(참고 : https://megalytic.com/blog/tracking-revenue-from-facebook-visitors-using-google-analytics-goals)

카카오스토리나 다른 채널 역시, GA가 트래킹하면서 경로가 뒤섞이는게 있어서
카카오스토리 세그먼트는 소스에 “다음을 포함 – kakao”, 팝업은 “다음을 포함 – popup”으로 하시면 됩니다.

GA의 판단 방식

특정 채널로 유입된 사람이 이탈했다 다시 와서 사는 경우, GA는 특정 채널이 매출에 기여했다고 판단하지 않습니다.
즉 페북으로 들어 온 뒤 사이트를 나갔다가, 네이버에 검색하고 와서 사는 경우 페북이 아니라 네이버를 통해 매출이 발생했다고 판단합니다.

따라서 기준이 보수적이라 특정 채널의 기여도가 실제로는 좀 더 높을 수 있습니다.
(바로 구매 + 나중에 구매 중 나중에 구매를 측정 안함)

구글 애널리틱스 용어 정리

세션 [Session]

웹사이트 방문수를 가공한 새로운 단위.
세션의 첫 번째 조회와 함께 누적됨.
오늘 밤부터 쓰는 google analytics page 30 참고.

사용자 수 [Users]

순 방문자 수

방문수(접속수) [Entrances]

세션의 첫 번째 페이지뷰 / 화면조회와 함께 누적됨.
맨 처음 방문했을 때 카운팅.

페이지뷰 수 [Pageviews]

페이지뷰가 일어날때마다 매번 카운팅.
한 사용자가 새로고침 눌러도 또 카운팅.

순 페이지뷰 수 [Unique pageview]

같은 사람&세션이라면 하나로 카운팅.
한 방문 내에서 발생하는 페이지뷰의 수.

세션당 페이지수

한 번 방문시 평균적으로 몇 개의 페이지를 보았느냐?
중요하게 보아야 할 지표.

이탈률(반송률) [Bounce rate]

방문자가 하나의 페이지만 보고 바로 나가는 경우 그 페이지로 시작하는 방문을 바탕으로 계산.
방문객이 처음으로 본 페이지를 대상으로 한다.
중요하게 보아야 할 지표.
웹사이트에 대한 사용자의 평가를 반영하는 지표.

이탈률이 70% = 100명 중 70명은 한 페이지만 보고 바로 나가고 30명은 다른 페이지를 본다.

수학방 이탈률/종료율
이탈률 계산은 이 링크를 유심히 보세요. 헷갈리기 쉽습니다.

이탈률(%)(종료율) [Exit rate]

웹사이트 이곳저곳 방문하다가 해당 페이지에서 나가버린 비율.
높다고 무조건 나쁜것이 아닌다. 목적을 달성했기 때문에 Exit할 수 있으니.

이벤트 [Event]

웹페이지/화면 로드와는 별개로 추적할 수 있는 콘텐츠와 사용자 간의 상호작용.
개발자가 따로 코드를 삽입하거나 태그매니저를 사용하여 달 수 있다.
(e.g. 이벤트 참여, 동영상 재생, 특정 요소 클릭)

전환 [Conversion]

비지니스의 성공에 중요한 요소. 사이트 내에서 완료된 활동.
e.g. 이메일 뉴스레터 가입완료(목표 전환), 구매(전자상거래 전환)

세그먼트 [Segment]

필터같은 것.

Refer

[디마 GA #1] 구글 애널리틱스(Google Analytics) 너의 정체를 밝혀라

http://analyticsmarketing.co.kr/digital-analytics/google-analytics-4-%EA%B5%AC%EA%B8%80-%EC%95%A0%EB%84%90%EB%A6%AC%ED%8B%B1%EC%8A%A4%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EB%A9%94%EB%89%B4-%EC%A3%BC%EC%9A%94-%EC%9A%A9%EC%96%B4%EC%99%80-%EA%B0%9C%EB%85%90/

[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 하시기 바랍니다!

[Google Analtyics 삽질냠냠 #2] 이벤트, 그리고 Google Tag Manager

maxresdefault
[Google Analtyics 삽질냠냠 #1] 구글 애널리틱스 설치부터 적용까지
[Google Analtyics 삽질냠냠 #2] 이벤트, 그리고 Google Tag Manager
[Google Analtyics 삽질냠냠 #3] Enhanced Ecommerce 적용하기 (feat. Google Tag Manager)

페이지의 인터랙션

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

한 페이지에서 일어나는 인터랙션은 여러 가지가 있습니다.

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

Google Analytics는 이 모든 과정을 지켜보고 있습니다.
우리는 측정하고 싶은 인터랙션을 캐치해서 ‘이름을 지어줘야‘합니다.

1

비슷한 것 같은 느낌적 느낌

 


 

상단 메뉴별 클릭수를 비교하고 싶어!

핑크퐁_북스토어
핑크퐁 북스토어 상단 GNB엔 카테고리별 메뉴가 있습니다. 이들의 클릭 수를 비교하고 싶어요.
Google Analytics로 이를 측정하려면 어떻게 해야할까요?

  1. 메인 페이지다
  2. 클릭한 것이 ‘메뉴’이어야 한다
  3. 그 이벤트를 통칭해서 ‘menu’라 한다
  4. 전체 / 전집 / 유아책 / 토이 별로 각각 측정되었으면 좋겠다

정도의 flow를 생각하면 되겠죠?


 

이벤트

이렇게 페이지뷰나, 클릭, 폼 전송 등이 일어나면 이를 캐치해서 이름(범주)을 지어주는 행위가 구글 애널리틱스의 ‘Event Tracking‘입니다.

북스토어 카테고리 메뉴 코드는 간략히 아래와 같이 생겼습니다.

<ul class="category-large">
    <li class="category-item"><a href="/category/">전체</a></li>
    <li class="category-item"><a href="/category/series">전집</a></li>
    <li class="category-item"><a href="/category/books">유아책</a></li>
</ul>

공식 문서를 참고해 class가 category-item인것을 눌렀을 때 이벤트를 전송하는 코드를 넣어줍니다.

$('ul.category-large').on('click', 'li.category-item', function() {
var name = $(this).find('a').text();
ga('send', {
hitType: 'event', //이벤트라고 명시
eventCategory: 'home', //메인 화면에서 일어나는
eventAction: 'menu', //메뉴
eventLabel: name //카테고리명
});
});

이 코드를 간단히 풀어보자면,

  1. 클래스가 category-item인것을 누르면
  2. GA에 ‘event’를 보내는데
  3. 그것의 카테고리(대분류)는 home이고 (홈 화면에서 일어나니까 내 맘대로 명명)
  4. 액션(중분류)는 ‘menu’이고 (메뉴니까)
  5. 라벨(소분류/설명)은 그 클릭한 카테고리 명을 넣어준다

이렇게 볼 수 있습니다.

 


 

Google Tag Manager

하지만 위처럼 구글 애널리틱스 코드로만 삽입하는 방식의 단점은

  1. 사이트 코드에 GA코드가 섞인다
  2. 배포까지 해야 적용된다
  3. 실시간으로 잘 적용되는지 확인/디버깅이 어렵다

가 있습니다. 이는 ‘Google Tag Manager‘(a.k.a GTM)라는 서비스로 해결할 수 있습니다.


 

Google Tag Manager를 설치하자

태그매니저 사이트에 들어가서 구글 계정으로 가입합니다 (#1에서 말했던 것처럼, 회사에서 쓸 용도면 회사 공식 계정으로 가입하시기 바랍니다).

설치방법은 역시 공식 사이트에서 보시는 것이 정확합니다.

그리고 Google Analytics를 설치했던 것처럼, 스니펫을 사이트 소스코드에 넣어줍니다(여는 <body>태그 바로 뒤에 넣어줍니다).
이 스니펫은 Admin > Install Google Tag Manager에서 다시 확인할 수 있습니다.
Google_Tag_Manager_및_base_html_-_pinkfong-store-yoolmoo_-____Documents_Programming_pinkfong-store-yoolmoo_

 


GTM – 변수

Google Tag Manager에선 ‘변수‘개념을 사용할 수 있습니다.  반복해서 쓸 것은 변수로 지정해두는 것이 좋겠죠?
그럼 먼저 Google Analytics의 Tracking ID를 변수로 지정해 보겠습니다.

Google_Tag_Manager
GTM 좌측 탭 메뉴에서 ‘Variables‘를 들어갑니다. 첫 접속이라면 아마 ‘Enabled Built-in Variables’가 모두 체크 해제 되어있을텐데, 무엇을 쓸지 감이 아직 안잡히신다면 모두 클릭해두는것도 좋습니다.
이곳에는 GTM에서 유용하게 쓰이는 변수들이 미리 만들어져 있습니다. 클릭한 요소의 Text를 가져온다거나, 현재 페이지의 URL처럼요.
우리는 새로운 변수를 만들기 위해 하단 ‘User-Defined Variables‘에서 ‘New’버튼을 클릭해줍니다.

Google_Tag_Manager

‘trackingID’란 이름을 써주고, 타입은 ‘Constant’, Value는 ‘UA-XXXX’처럼 생긴 구글 애널리틱스 트래킹 아이디를 넣어줍니다. 이 아이디 공유를 통해 GTM과 GA가 이어질 수 있습니다.

 


GTM – 트리거

이제 본격적으로 태그를 만들어보겠습니다.

Google_Tag_Manager좌측 상단의 ‘Publish’옆의 화살표를 눌러 ‘Preview and Debug‘를 눌러줍니다.

핑크퐁_북스토어
GTM을 설치한 사이트에 와서 refresh를 해주면 하단에 신기한 창이 뜰 것입니다. 이것이 Google Tag Manager의 Preview모드입니다. 여기서 지금 무슨 태그가 불렸는지, 이 이벤트의 변수는 무얼 갖고 있는지 등을 Interactive하게 확인할 수 있습니다.
(만약 이 창이 뜨지 않는 분은, Preview를 누르기 전에 Publish부터 한 번 해주시면 잘 뜰 것입니다)

핑크퐁_북스토어
우리가 측정하고 싶은 이벤트를 한 번 실행해 봅니다.
창이 이동해버리는 것을 방지하기 위해 command를 누르며 메뉴의 ‘전체’를 한 번 눌러봅니다.
그럼 ‘gtm.click’이라는 이벤트가 새로 생기면서, ‘Tags Fired On This Event‘라는 창이 뜹니다. 저는 클릭이 일어날때마다 측정하는 태그를 달아놔서 하나가 이미 있고, 처음 하시는 분은 아무 태그도 없을 것입니다.

핑크퐁_북스토어

그 이벤트의 ‘Variables’를 봅니다. 그럼 방금 내가 한 행동에서 따라오는 변수들이 보입니다.
Click Classes는 ‘all’이고, Click Text는 ‘전체’네요. 우리는 클릭했을 때 그것의 상위 li엘리먼트에 ‘category-item’이란 클래스가 있는 것을 캐치하고 싶은데 기본으로 제공되는 변수에는 식별이 불가능하네요(ㅠㅠ). 기본 변수에 없다면 내가 만들면 되죠!

Google_Tag_Manager
아까와 같이, ‘Variables’로 가서 새 변수를 만들어줍니다. Type은 ‘Custom Javascript’, 그리고 Value에는 function() {}으로 감싼 코드를 적습니다.
저는 클릭한 요소의 상위 li 엘리먼트가 ‘category-item’이란 클래스를 가지고 있는지를 boolean값으로 return하는 함수를 만들었습니다.
(TIP: 제이쿼리를 쓰려면 $대신 jQuery라고 써주면 됩니다)

핑크퐁_북스토어_및_base_html_-_pinkfong-store-yoolmoo_-____Documents_Programming_pinkfong-store-yoolmoo_
다시 사이트로 돌아가 메뉴 중 ‘전체’를 눌러봅니다. Variables탭을 보니 ‘isMenu’가 true로 잘 들어갔군요. 그럼 잘 확인되었으니 이걸로 태그를 만들면 되겠군요!

Google_Tag_ManagerGTM으로 가서 Triggers탭에서 새로운 트리거를 만들어 줍니다.
트리거란, 영어 뜻 그대로 ‘방아쇠’같은 것입니다.
위의 사진처럼, Event는 Click, isMenu는 true, Page Path는 /인 트리거를 만들면
“어머어머~~ 방금 메인 페이지에서 isMenu인것을 클릭했나봐~~ 트리거 발동!”
이라며 트리거가 발동됩니다. (…)

Google_Tag_Manager
그리고 그 트리거를 빵 맞을 태그를 만들어줍니다.
태그를 만들 때 드디어 아까 만든 Tracking ID변수를 심어줍니다. 미리 변수를 저장해두지 않았다면 태그를 만들때마다 매번 입력했어야 하겠죠?
그리고 타입을 Event로 해주고, 아까 코드로 삽입했던 것처럼 ‘Category’, ‘Action’, ‘Label’을 지정해줍니다. 라벨은 ‘Click Text’변수를 지정해주었습니다.
‘Fire On’에선 발동될 트리거를 선택할 수 있습니다. 아까 만든 트리거를 지정합니다.

핑크퐁_북스토어
다시 사이트로 가서 ‘전체’메뉴를 눌러볼까요?
그럼 만들어준 태그가 잘 발동되는 것을 볼 수 있습니다. 카테고리, 액션, 라벨도 잘 들어갔군요!
성공했습니다!! 짝짝짝
잘 돌아가는지 확인했다면 GTM 사이트 우측 상단의 ‘Publish‘를 눌러서 올려줍니다. 그럼 완전히 사이트에 반영이 됩니다.

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

이 이벤트는 GA의 방문형태>이벤트>인기 이벤트 에서 확인하실 수 있습니다. (잡히는데 약간 시간이 걸립니다)
Google Analytics 이벤트는

  1. 페이지에서 제일 많이 클릭되는 버튼
  2. 상품 상세 페이지에 들어온 사람 중 공유를 하는 사람의 비율
  3. 메뉴별 클릭 순위
  4. 트위터 공유를, 혹은 페이스북 공유 버튼을 더 많이 누르는지

등에서 폭넓게 쓸 수 있습니다.


 

Outro

고생하셨습니다! 이걸로 우리는 Google Analytics부터 Tag Manager까지 사용할 수 있게 되었습니다.
다음 글에선 대망의 Ecommerce를 적용해보겠습니다.
[Google Analtyics 삽질냠냠 #3] Enhanced Ecommerce 적용하기 (feat. Google Tag Manager)

 

 

[Google Analtyics 삽질냠냠 #1] 구글 애널리틱스 설치부터 적용까지

google-analytics

[Google Analtyics 삽질냠냠 #1] 구글 애널리틱스 설치부터 적용까지
[Google Analtyics 삽질냠냠 #2] 이벤트, 그리고 Google Tag Manager
[Google Analtyics 삽질냠냠 #3] Enhanced Ecommerce 적용하기 (feat. Google Tag Manager)

Why Google Analytics?

이번에 오픈한 우리 쇼핑몰엔 어떤 사람들이 많이 들어올까요. 남자가 많을까요, 여자가 많을까요?
예상외로 30대가 많이 들어온다면 마케팅의 방향이 달라지지 않을까요.
또 사이트에 들어와 가장 먼저 누르는 곳은 어디일까요, 3페이지에 위치해 있는데 메인에 노출되어 있는 상품보다 잘 팔린다면 그 제품을 어떻게 해야할까요?

이를 위하여 고객의 행동 패턴전자상거래 기록을 수집하는 툴 중 하나가 ‘Google Analytics‘입니다. 사이트 소스코드에 간단히 설치해두면, 구글 애널리틱스 홈페이지에 들어가 구글이 사용자 행태를 분석해 모아둔 데이터를 볼 수 있습니다.


 

삽질냠냠

그런데 간단한 설치로 끝난다는데, 왜 이 글의 제목에 ‘삽질냠냠’이 들어갔을까요? 이는 구글 애널리틱스(a.k.a GA)를 더 뼛속까지 꼭꼭 씹어 이용하려면, 몇 가지 작업이 더 필요하기 때문입니다. 특히 Enhanced EcommerceGoogle Tag Manager는 나온지 오래되지 않은지라 한글 자료는 물론 영어로 된 자료도 많지 않습니다.  전 보통 GA 공식문서와, 거기서도 명시되지 않은 오류들을 디버깅할땐 Simo Ahava님의 블로그를 많이 참고했습니다(감사합니다). 그리고 하용호 님의 ‘오늘 밤부터 쓰는 Google Analytics‘강의와 자료로 GA에 대한 개념을 잡았습니다. 입문자 님들은 슬라이드를 꼭 한번씩 보시길 추천드립니다.


 

그래서 이 튜토리얼에서는

제가 Google Analytics, Google Tag Manager, 그리고 Enhanced Ecommerce를 적용하며 걸은 삽질의 길을 다듬어 적을 예정입니다. 데이터 분석 이전에, 당장 사이트에 GA부터 적용해야 하는 개발자의 입장으로 말이죠.

튜토리얼은 핑크퐁 북스토어에 GA를 적용한 사례를 가지고 진행됩니다(이것이 네이티브 애드). 굳이 난이도를 적어보자면,
1. Google Analytics 설치:
2. Google Tag Manager:
3. Ecommerce 설치: 중상
4. Enhanced Ecommerce 적용:
정도로 될 것 같습니다. 이는 제가 삽질하며 체감한 난이도와 들인 시간을 토대로 작성한 것입니다.


 

Google Analytics란 무엇인가

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

GA는 ‘문지기‘입니다. store.pinkfong.com 사이트 코드에 GA 코드 조각을 모두 붙여두면 접속한 사람들이 하는 행태를 모두 기록GA 서버에 보냅니다.

 

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

뿐만 아니라 접속한 사람들의 나이, 성별, 그리고 이 페이지에서 평균 몇 분 머물렀는지도 알 수 있습니다.

또한 여러 가지 조합을 통하여

  1. 모바일 접속자인가 데스크톱 접속자인가?
  2. 신규 방문자인가 재방문자인가?
  3. 이번 달 무슨 상품이 가장 많이 팔렸는가?
  4. 카테고리 목록에서 가장 많이 클릭되는 버튼은?
  5. 페이스북에 올린 링크 중 무엇이 가장 도달률이 높은가?
  6. 몇시에 가장 활발히 접속하는가?
  7. 무슨 광고배너가 가장 인기가 많지?
  8. 구매자는 어떤 결제 스텝에서 가장 이탈률이 높은가?

등의 무궁무진한 통계들을 알 수 있습니다.


 

설치하기

그럼 긴 말 없이 설치를 해보겠습니다. 설치는 공식 문서를 보고 하시는 것이 가장 정확합니다.

1. 구글 애널리틱스에 가입합니다
https://analytics.google.com/
(TIP: 회사에서 쓸 용도라면 회사 개인 메일계정 말고, ‘smartstudy@smartstudy.com’처럼 회사 공식 계정으로 가입하시기 바랍니다. 소유권 이전이 되지 않는다는 설이 있기 때문입니다.)

2. 가입하고 새 컨테이너를 만듭니다.
설치하면 바로 ‘추적 코드’가 나오는데, 이는 관리 > 추적 정보 > 추적 코드에서도 다시 볼 수 있습니다.
이 코드를 사이트 소스코드 </head>바로 위에 붙여넣으시면 됩니다. 추적하고 싶은 모든 페이지에 첨부되어 있어야 합니다.
(django를 사용하고 있는 핑크퐁 북스토어는 base.html에 넣었습니다.)
Google_Analytics

3. 설치 완료
Google Analytics 설치가 완료되었습니다! 설치 후 길면 3일 이후부터 google analytics 홈페이지에서 통계를 확인할 수 있습니다.


 

메뉴 소개

적용이 완료되면, 그 때부터 통계가 잡히기 시작합니다. 간단히 좌측 탭 메뉴들을 하나씩 소개해보겠습니다. 이는 하용호님의 슬라이드를 참고하였습니다.

지능형 이벤트

사이트에 특이한 변화가 생겼다 하면,  GA가 자동으로 이 곳에 로그를 쌓아줍니다.
(1월 10일에 세션 시간이 168% 증가한 것을 찾아주었네요)
스크린샷 2016-01-14 오후 4.04.37

실시간

당장 지금 일어나는 일을 보여줍니다.
현재 접속한 사용자 수, 인기 페이지 혹은 어디를 보고 많이 접속해 왔는지가 뜹니다.
스크린샷 2016-01-14 오후 4.04.44

잠재고객

북스토어 유저들의 특징.
재방문자와 신규유저의 비율은? 나이는? 성별은? 평균 머무는 시간은?
(재방문자 58%, 신규유져 42%네요)
스크린샷 2016-01-14 오후 4.04.52

획득

북스토어에 무엇을 통해 들어왔는지.
어떤 링크를 타고 왔고, 어떤 광고를 눌러 왔고, 그렇게 온 사람들이 돈은 얼마나 쓰는지?
스크린샷 2016-01-14 오후 4.04.59

방문 형태

그렇게 유져들이 들어왔으면, 들어와서 무엇을 하는지 보여줍니다.
(e.g. 메인화면에서 어느 버튼을 가장 많이 누르는지)
스크린샷 2016-01-14 오후 4.05.06

전환

제일 중요한 ‘전자상거래’가 들어가있는 전환 탭.
목표 설정과, 쇼핑 행동과 수익 등을 볼 수 있습니다.
스크린샷 2016-01-14 오후 4.05.13


 

GA에 들어와서 가장 먼저 할 일

기간 설정

일단, 기간을 설정합니다.
‘최근 7일’이나 ‘지난 30일’과 같은 옵션을 줄 수도 있습니다.스크린샷 2016-01-14 오후 4.18.12

세그먼트 설정

다음으론 ‘+세그먼트’ 버튼을 눌러 세그먼트를 설정해줍니다.
세그먼트는 ‘필터’같은 것으로,
모바일 / 크롬사용자 / 남자 / Facebook으로 온 사람들
이런 식으로 분류할 수 있게 해줍니다.
(작업에 필요 없다면 안 해줘도 되지만 데스크톱/모바일은 나눠서 보는게 보통 도움됩니다.)

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

그러면 이렇게 많은 옵션들이 뜨는데, 필요한 것들을 선택하고 ‘적용’을 누르면 됩니다.

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

그럼 이렇게 그래프가 색별로 나뉘어 보여집니다.
나누어 뜯어 보면 전체를 볼 때와 다른 진실을 발견할 수 있습니다.
(오른쪽 그래프를 보면 전체 세션에선 재방문자>새 방문자 인데 데스크톱으로 방문한 사람만 보면 새 방문자가 현저히 많은 것을 알 수 있습니다!)

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


 

 Outro

이것으로 구글 애널리틱스에 대한 간단한 소개와, 설치, 그리고 간단한 메뉴 이용법을 적어보았습니다.
다음 글에선 Google Tag Manager 설치 및 사용법을 소개하겠습니다.
[Google Analtyics 삽질냠냠 #2] 이벤트, 그리고 Google Tag Manager

Javascript switch문에서 정규표현식 사용하기(feat. google tag manager)

스크린샷 2016-01-11 오후 5.23.49

Problem

Google Tag Manager에서 event를 만드는데 카테고리를 현재 있는 페이지 이름으로 넣고 싶다.
하지만 그냥 page path를 가져오면 가독성이 좋지 않아 한글화를 하고 싶다.
커스텀 자바스크립트 변수로 switch로 분기태워서 나누면 될 것 같은데,
https://store.pinkfong.com/user/order/2521/에서 2521처럼 동적으로 만들어진 path가 있어 보통 switch문으로 되지 않아 정규표현식을 쓰도록 한다.

Solution

switch에 true를 넣어 무조건 안으로 넣어주고, /정규식/.test(원하는변수)식으로 분기를 태워준다.
GTM의 Custom Javascript타입으로 pathName이란 이름의 Variables를 만들고, 사용할 땐 {{ pathName }}으로 사용해주면 된다.

function() {
    var path = location.pathname;
    var name;
    switch(true) {
        case /^\/$/.test(path):
            name = "메인페이지";
            break;
        case /^\/\d+\/$/.test(path):
            name = "제품상세";
            break;
        case /^\/user\/order\/\d+\/done\/$/.test(path):
            name = "구매완료";
            break;
        case /^\/user\/order\/$/.test(path):
            name = "주문";
            break;
        case /^\/user\/order\/\d+\/$/.test(path):
            name = "주문상세";
            break;
        case /^\/cart\/$/.test(path):
            name = "장바구니";
            break;
        case /^\/order\/$/.test(path):
            name = "주문진행중";
            break;
        default:
            name = path;
    }
    return name;
}

refer

http://stackoverflow.com/questions/2896626/switch-statement-for-string-matching-in-javascript

Javascript, jQuery로 element의 index 구하기

개요

Google Analytics에서 dataLayer를 사용하는데, 제품 노출을 전달할 때 그 제품의 index를 넘겨야 한다.
하지만 tagmanager를 사용하기 위한 dataLayer는 body여는태그 바로 뒤에 삽입해서 jQuery보다 먼저 호출되고만다.

<ul class="product">
  <li class="product">
    <div class="product">
      <div class="product-image">
        <a href="/13"></a>
      </div>
      <div class="product-content">
      </div>
    </div>
  </li>
  <li class="product">...</li>
  <li class="product">...</li>
</ul>

여기서 상품번호 별 li의 index를 어떻게 가져올까?

jQuery

jQuery로는 간단하다.

var position = $('.product-image a[href='/' + {{ product.id }} + '/']&').closest('li.product').index() + 1;

하지만 jQuery를 못 쓰는게 함정

javascript

스택오버플로우에서 루프를 돌지 않고 요소의 index를 받는 함수를 올려놓은 답변을 찾았다.

function getChildNumber(node) {
  return Array.prototype.indexOf.call(node.parentNode.childNodes, node);
}

하지만 내 코드에선 1, 3, 5, 7로 찍혀 나와서 2로 나누고 반올림 해서 수정했다.

function getChildNumber(node) {
  return Math.ceil(Array.prototype.indexOf.call(node.parentNode.childNodes, node)/2);
}

그래서 완성 코드는 이렇게 되었다.

var position = getChildNumber(document.querySelector('.product-image a[href='/' + {{ product.id }} + '/']').parentNode.parentNode.parentNode);

jQuery의 closest같은 경우는 이렇게 구현할 수도 있는데 짜피 한번 쓸거라 걍 parentNode로 올라갔다.

결과

근데 html dom보다 dataLayer가 먼저 불려서 돔 위치를 파악할 수 없어서 결국 fail. 담에 더 파봐야겠다…

(+)160111 추가 내용

jQuery를 GTM 스니펫 위로 올리고, dom ready이후에 추가되는 것들은

$(function() {
 ...
});

제이쿼리로 dom이 만들어진 후에 불리도록 넣었다.

Refer

http://stackoverflow.com/questions/4649699/is-it-possible-to-get-elements-numerical-index-in-its-parent-node-without-loopi
http://stackoverflow.com/questions/22100853/dom-pure-javascript-solution-to-jquery-closest-implementation