Rev. 2.73

Google Analytics에서 제공하는 기본 트래킹 코드는 정적인 페이지에서 사용하기 적합하며 Ajax나 history. pushState를 이용하여 컨텐츠를 갱신하는 동적인 사이트는 필요한 경우 추가적인 작업을 해야 합니다. Analytics는 페이지의 이동 경로와 이벤트 등을 추적할 수 있는 자바스크립트로 작성된 오픈 API를 제공합니다. API를 이용하는 방법은 크게 두 가지로 구분할 수 있는데 _gaq.push로 호출할 메서드와 값을 전달하는 방법과 _gat._getTracker에서 반환하는 인스턴트의 _trackPageview 메서드를 호출하는 방법입니다. 이 API를 Ajax에 응용한 예제는 다음과 같습니다.

// _gaq.push
$.ajax({
  url: "/some.html",
  context: document.body,
  success: function(){
    _gaq.push(['_trackPageview', '/some.html']);
  }
});

// or

// _gat._getTracker
var pageTracker = _gat._getTracker('UA-XXXXX-X');
$.ajax({
  url: "/some.html",
  context: document.body,
  success: function(){
    pageTracker._trackPageview('/some.html');
  }
});

두 방법 모두 같은 결과를 보입니다. 자바스크립트를 이용하여 트래킹하는 경우에 주의해야 할 점 역시 두가지 입니다. _trackPageview는 자동으로 호스트 네임을 걸러주지 않기 때문에 인자로 입력되는 주소는 호스트 정보가 빠진 경로만을 입력해야 합니다. 그리고 페이지 타이틀을 갱신해야 합니다. 그렇지 않으면 Analytics의 페이지 제목 분석기능을 제대로 활용할 수 없게 됩니다. 예를 들어 첫 페이지의 타이틀이 'firejune.com'이면 비동기로 갱신되어 Analytics에 기록된 페이지들이 모두 'firejune.com'이란 타이틀을 가지게 되기 때문이죠. '_trackPageview' 함수는 단순히 document.title의 값을 기록하죠. 다음은 간단한 실용 예를 작성한 것입니다.

var pageTracker = _gat._getTracker('UA-XXXXX-X');
function trackPageview(url, title) {
    url = url.replace(location.protocol + '//' + location.host, '');
    document.title = document.title.split(' : ')[0] + (title && ' : ' + title || '');
    pageTracker._trackPageview(url);
}

function updatePage(el) {
  $.ajax({
    url: el.href,
    context: document.body,
    success: function(){
      trackPageview(el.href, el.innerHTML);
    }
  });
  return false;
}
<a href="/some.html" onclick="return updatePage(this);">Some HTML</a>

최근 작업 중인 벨록스 프로젝트는 애플리케이션 레이아웃이어서 패널과 다이얼로그를 이용하여 컨텐츠를 갱신하기 때문에 다른 방식으로 사용자의 행동을 추적해야 할 필요가 있었습니다. 그래서 속성 편집 패널을 열면, 기존 document.title에 추가로 컨트롤러/액션(' : /files/edit') 이름을 더하여 Analytics에 기록한 후 원래대로 돌리는 방식으로 데이터를 쌓음으로써 사용자의 이동 경로를 조금 더 세밀하게 파악할 수 있었습니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar