[Google Analtyics 삽질냠냠 #1] 구글 애널리틱스 설치부터 적용까지
[Google Analtyics 삽질냠냠 #2] 이벤트, 그리고 Google Tag Manager
[Google Analtyics 삽질냠냠 #3] Enhanced Ecommerce 적용하기 (feat. Google Tag Manager)
페이지의 인터랙션
한 페이지에서 일어나는 인터랙션은 여러 가지가 있습니다.
Google Analytics는 이 모든 과정을 지켜보고 있습니다.
우리는 측정하고 싶은 인터랙션을 캐치해서 ‘이름을 지어줘야‘합니다.
비슷한 것 같은 느낌적 느낌
상단 메뉴별 클릭수를 비교하고 싶어!
핑크퐁 북스토어 상단 GNB엔 카테고리별 메뉴가 있습니다. 이들의 클릭 수를 비교하고 싶어요.
Google Analytics로 이를 측정하려면 어떻게 해야할까요?
- 메인 페이지다
- 클릭한 것이 ‘메뉴’이어야 한다
- 그 이벤트를 통칭해서 ‘menu’라 한다
- 전체 / 전집 / 유아책 / 토이 별로 각각 측정되었으면 좋겠다
정도의 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 //카테고리명
});
});
이 코드를 간단히 풀어보자면,
- 클래스가 category-item인것을 누르면
- GA에 ‘event’를 보내는데
- 그것의 카테고리(대분류)는 home이고 (홈 화면에서 일어나니까 내 맘대로 명명)
- 액션(중분류)는 ‘menu’이고 (메뉴니까)
- 라벨(소분류/설명)은 그 클릭한 카테고리 명을 넣어준다
이렇게 볼 수 있습니다.
Google Tag Manager
하지만 위처럼 구글 애널리틱스 코드로만 삽입하는 방식의 단점은
- 사이트 코드에 GA코드가 섞인다
- 배포까지 해야 적용된다
- 실시간으로 잘 적용되는지 확인/디버깅이 어렵다
가 있습니다. 이는 ‘Google Tag Manager‘(a.k.a GTM)라는 서비스로 해결할 수 있습니다.
Google Tag Manager를 설치하자
태그매니저 사이트에 들어가서 구글 계정으로 가입합니다 (#1에서 말했던 것처럼, 회사에서 쓸 용도면 회사 공식 계정으로 가입하시기 바랍니다).
설치방법은 역시 공식 사이트에서 보시는 것이 정확합니다.
그리고 Google Analytics를 설치했던 것처럼, 스니펫을 사이트 소스코드에 넣어줍니다(여는 <body>태그 바로 뒤에 넣어줍니다).
이 스니펫은 Admin > Install Google Tag Manager에서 다시 확인할 수 있습니다.
GTM – 변수
Google Tag Manager에선 ‘변수‘개념을 사용할 수 있습니다. 반복해서 쓸 것은 변수로 지정해두는 것이 좋겠죠?
그럼 먼저 Google Analytics의 Tracking ID를 변수로 지정해 보겠습니다.
GTM 좌측 탭 메뉴에서 ‘Variables‘를 들어갑니다. 첫 접속이라면 아마 ‘Enabled Built-in Variables’가 모두 체크 해제 되어있을텐데, 무엇을 쓸지 감이 아직 안잡히신다면 모두 클릭해두는것도 좋습니다.
이곳에는 GTM에서 유용하게 쓰이는 변수들이 미리 만들어져 있습니다. 클릭한 요소의 Text를 가져온다거나, 현재 페이지의 URL처럼요.
우리는 새로운 변수를 만들기 위해 하단 ‘User-Defined Variables‘에서 ‘New’버튼을 클릭해줍니다.
‘trackingID’란 이름을 써주고, 타입은 ‘Constant’, Value는 ‘UA-XXXX’처럼 생긴 구글 애널리틱스 트래킹 아이디를 넣어줍니다. 이 아이디 공유를 통해 GTM과 GA가 이어질 수 있습니다.
GTM – 트리거
이제 본격적으로 태그를 만들어보겠습니다.
좌측 상단의 ‘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’이란 클래스가 있는 것을 캐치하고 싶은데 기본으로 제공되는 변수에는 식별이 불가능하네요(ㅠㅠ). 기본 변수에 없다면 내가 만들면 되죠!
아까와 같이, ‘Variables’로 가서 새 변수를 만들어줍니다. Type은 ‘Custom Javascript’, 그리고 Value에는 function() {}으로 감싼 코드를 적습니다.
저는 클릭한 요소의 상위 li 엘리먼트가 ‘category-item’이란 클래스를 가지고 있는지를 boolean값으로 return하는 함수를 만들었습니다.
(TIP: 제이쿼리를 쓰려면 $대신 jQuery라고 써주면 됩니다)
다시 사이트로 돌아가 메뉴 중 ‘전체’를 눌러봅니다. Variables탭을 보니 ‘isMenu’가 true로 잘 들어갔군요. 그럼 잘 확인되었으니 이걸로 태그를 만들면 되겠군요!
GTM으로 가서 Triggers탭에서 새로운 트리거를 만들어 줍니다.
트리거란, 영어 뜻 그대로 ‘방아쇠’같은 것입니다.
위의 사진처럼, Event는 Click, isMenu는 true, Page Path는 /인 트리거를 만들면
“어머어머~~ 방금 메인 페이지에서 isMenu인것을 클릭했나봐~~ 트리거 발동!”
이라며 트리거가 발동됩니다. (…)
그리고 그 트리거를 빵 맞을 태그를 만들어줍니다.
태그를 만들 때 드디어 아까 만든 Tracking ID변수를 심어줍니다. 미리 변수를 저장해두지 않았다면 태그를 만들때마다 매번 입력했어야 하겠죠?
그리고 타입을 Event로 해주고, 아까 코드로 삽입했던 것처럼 ‘Category’, ‘Action’, ‘Label’을 지정해줍니다. 라벨은 ‘Click Text’변수를 지정해주었습니다.
‘Fire On’에선 발동될 트리거를 선택할 수 있습니다. 아까 만든 트리거를 지정합니다.
다시 사이트로 가서 ‘전체’메뉴를 눌러볼까요?
그럼 만들어준 태그가 잘 발동되는 것을 볼 수 있습니다. 카테고리, 액션, 라벨도 잘 들어갔군요!
성공했습니다!! 짝짝짝
잘 돌아가는지 확인했다면 GTM 사이트 우측 상단의 ‘Publish‘를 눌러서 올려줍니다. 그럼 완전히 사이트에 반영이 됩니다.
이 이벤트는 GA의 방문형태>이벤트>인기 이벤트 에서 확인하실 수 있습니다. (잡히는데 약간 시간이 걸립니다)
Google Analytics 이벤트는
- 페이지에서 제일 많이 클릭되는 버튼
- 상품 상세 페이지에 들어온 사람 중 공유를 하는 사람의 비율
- 메뉴별 클릭 순위
- 트위터 공유를, 혹은 페이스북 공유 버튼을 더 많이 누르는지
등에서 폭넓게 쓸 수 있습니다.
Outro
고생하셨습니다! 이걸로 우리는 Google Analytics부터 Tag Manager까지 사용할 수 있게 되었습니다.
다음 글에선 대망의 Ecommerce를 적용해보겠습니다.
[Google Analtyics 삽질냠냠 #3] Enhanced Ecommerce 적용하기 (feat. Google Tag Manager)
블로그 이사갔어요! https://milooy.github.io/ 
구글 태그매니저의 이벤트 트래킹 중에서 상단 글로벌 메뉴의 클릭 발생빈도를 측정해보고 싶어서 찾던 중 유일하게 한글로 제대로 된 글이라 반갑게 따라 읽어보고 많은 도움을 받았습니다.
설명이 매우 상세했음에도 불구하고, 초보자들이 용어를 잘 모를 수밖에 없어서, 두 군데에서 이해가 되지 않아 한참을 헤맸습니다.
1) 창이 이동해버리는 것을 방지하기 위해 command를 누르며 메뉴의 ‘전체’를 한 번 눌러봅니다.
= command 를 누른다는 게 뭔 뜻인가 헤매다가 Ctrl 키를 동시에 누르는 것으로 해결했습니다.
= ‘전체’를 누른다는 말도 처음에는 뭔 뜻인지 알수가 없어 헤매다가 그게 GTM 미리보기 화면에서 샘플 페이지의 상단 메뉴명이라는 걸 겨우 알아차렸습니다.
2) ‘Variables’로 가서 새 변수를 만들어줍니다. Type은 ‘Custom Javascript’, 그리고 Value에는 function() {}으로 감싼 코드를 적습니다. 저는 클릭한 요소의 상위 li 엘리먼트가 ‘category-item’이란 클래스를 가지고 있는지를 boolean값으로 return하는 함수를 만들었습니다.
= 이 부분도 한창을 읽어보고 되풀이 따라해보고서야 겨우 해결했습니다.
= 특히 뒷부분 문구는 자바 프로그램 언어나 용어를 모르는 초보자들은 무슨 소리인지 알아듣기 어렵습니다.
3) 그리고 타입을 Event로 해주고, 아까 코드로 삽입했던 것처럼 ‘Category’, ‘Action’, ‘Label’을 지정해줍니다. 라벨은 ‘Click Text’변수를 지정해주었습니다.
= 이 설명의 뒷부분 변수 지정하는 부분도 GTM을 잘 모르는 초보자들이라면 무슨 말인지 몰라서 헤매기 쉬운 내용입니다.
아무튼 이 설명 하나로 어렵게 메뉴바의 클릭을 추적하는 이벤트 트래킹 하나를 새로 배우게 되었네요.
대단히 고맙습니다.
새로운 자바스크립트 변수를 만들어보려고 따라하는데 아무리해도 return type과 value가 undefined로만 출력됩니다. 아예 안되는건가 싶어서 다른 함수를 써서 출력할땐 되는데, 무슨 문제인지 모르겠네요.
function() {
return ${{Click Element}}.closest(‘ul’).hasClass(‘top_menu’);
}
혹시 도움을 받을 수 있을까해서 남깁니다.
클릭한 요소의 가장 가까운 ul에 ‘top_menu’ 클래스가 있을 경우 true를 반환하도록 하는 의도입니다.
제가 하려는 사이트에 맞게 했다고 생각하는데 왜케 출력이 안되는지 모르겠네요..