Google Analytics 2. Web Tracking (ga.js)

개요

Web sites , Web application 에서의 데이터 수집은 google analytics 에서 제공하는 ga.js 파일을 통해 이루어진다. 이 파일을 사용하기 위해서는 간단한 javascript 코드만 page 에 넣어주면 된다.

추적 코드 삽입

위의 코드중에 UA-XXXX-X 라는 부분에 자신의 추적 ID 를 넣어주면 페이지 추적이 시작된다.

코드는 HTML 페이지의 </head> tag 를 닫기 전에 넣어준다.

작동 방식

Google Analytics - Web Tracking 은 비동기 방식으로 이루어진다.

코드를 보면 _gaq 라는 object 는 queue 로 작동한다. (FIFO queue) 

그래서 어떤 데이터를 보내거나 하는 행동은 _gaq.push 라는 메쏘드로 한다. (메쏘드 이름으로 작동방식을 유추할 수 있다.)

_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);

push 코드는 command array 를 형태로 데이터를 전송하는데 첫번째 엘리먼트는 tracking object 의 메쏘드 명이다.

그리고 두번째 엘리먼트부터는 넘겨주고 싶은 arguments 이고 JavaScript value 도 넣을 수 있다.

위의 코드같은 경우 계정 설정을 하면서 추적 ID 를 넘겨주고, 페이지뷰를 추적하겠다는 커맨드가 넘어간 것이다.

Tracking with HTML Event Handlers

비동기 방식의 tracknig 은 DOM(Document Object Model) 이벤트 핸들러에도 쓰일 수 있다.

위 코드처럼 button 에 대한 onclick 이벤트에 tacking 코드를 삽입하면 이벤트 추적도 가능하다.

(심지어 페이지 로딩이 끝나지 않았을 때 클릭 이벤트가 발생해도 tracking 가능)

One push, Multiple commands

위 방식의 코드와 다르게 한번 push 할때 여러 명령을 함께 보낼 수도 있다.

위 코드 방식처럼 push 를 여러줄 반복되게 쓰지 안혹도 한번 push 메쏘드를 열고 여러 커맨드를 넣으면 된다.

주의해야 할 점

1. 메쏘드 이름은 case-sensitive(대소문자 구분하는) 하다.

대소문자를 틀리면 tracking code 는 작동하지 않는다.

_gaq.push(['_trackpageview']);   // bad
_gaq.push(['_trackPageview']);   // good

2. 메쏘드 이름은 정확해야 한다.

메쏘드 이름이 틀려도 tracking code 는 작동하지 않는다.

_gaq.push(['_setDomain', 'example.com']);       // bad
_gaq.push(['_setDomainName', 'example.com']);   // good

3. 스트링에만 따옴표를 써야 한다.

boolean, literal, function 등등은 따옴표를 써선 안된다.

_gaq.push(['_setAllowLinker', 'false']);    // bad

_gaq.push(['_setAllowLinker', false]);      // good

4. 앞이나 뒤에 공백을 두지 말고 스트링을 확실히 써줘야 한다.

_gaq.push(['_setAccount', ' UA-65432-1']);    // bad

_gaq.push(['_setAccount', 'UA-65432-1']);     // good