서비스를 새롭게 개편하거나 런칭하면 사용자의 클릭 행태를 분석하기 위해서 이벤트 추적(event tracking) 코드를 넣는다. 사용자가 웹페이지에서 어떤 액션을 취했을 때, 이를 모두 저장해서 웹사이트의 어느 부분이 사용자에게 인기가 좋고 유용하며 어느 부분이 그렇지 않은지를 분석하는 기초 자료를 쌓는 것이다. 가장 쉽게 접할 수있는 이벤트 추적 기능은 아마도 구글 애널리틱스의 이벤트 트래킹 기능 일 것 같고 이런 류의 사용자 분석 도구에는 아마도 대부분 이 기능이 있을 것이다.

처음 이 이벤트 추적 기능이라는 것을 접했을 때에는 웹사이트의 '특정 부분'에 이벤트 추적 코드를 넣고 사용자들의 행동을 분석 한 후에 뭔가 개선점을 도출하는 것으로 생각했었다. 그런데 실제로 코드를 넣는 과정을 보니 기획쪽에서는 '특정 부분'이 아니라 웹페이지에서 상호작용이 일어나는 '모든 부분'에 이벤트 추적 코드를 넣기를 원했다. 모든 링크, 서식, 자바스크립트로 삽입되는 부분들까지 모든 곳에 이벤트 추적 코드를 넣는 작업은 만만하지는 않은 노가다 작업이다. 수백개의 이벤트 추적 코드를 따옴표와 이스케이프된 따옴표, HTML 태그의 늪에 넣고나면 너무 긴장하고 집중한 나머지 온몸이 뻐근해진다.

이렇게 넣어진 이벤트 추적 코드가 개선점을 도출하는데 잘 활용이 된다면 좋겠지만 실제로 보니 이벤트가 많이 발생하거나 적게 발생하는 부분을 제외한 그저 그런 클릭을 보여주는 중간 항목들은 이벤트 추적 코드 넣은 노력이 무색하게 잊혀지게 된다. 정말 모든 상호작용을 분석하는 초기화면 정도가 아닌 다음에야 이벤트 추적 코드 넣는 작업이 노가다에 비해 생산성이 너무 떨어지는 작업으로 느껴졌다. 코드를 선별적으로 넣는 것이 아니라 전체에 동일한 기준으로 넣는 것이라면 동적으로 넣었을 때와 수동으로 넣었을 때가 얼마나 차이가 날지 궁금했다.

이벤트 추적 코드를 넣을 때 중요한 부분은 수많은 이벤트들을 구분할 수 있게 이벤트마다 고유한 코드를 넣어주는 것이다. 그래서 기획자는 이 코드를 정해진 위계에 의해서 엑셀 시트에 만들어 넣고 개발자는 이 코드를 일일이 링크마다 변경해서 넣는 노가다를 하는 것이다. 이벤트가 발생한 위치를 구별하는 것이 주된 목적이기 때문에 HTML의 구조에서 이벤트가 발생한 위치를 뽑아낼 수 있으면 노가다를 할 필요가 없다.

<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-******-*']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);

(function () {
	var as = document.getElementsByTagName('a');
	for (var i = 0, cnt = as.length; i < cnt; i++) {
		addEvent(as.item(i), 'click', function () {
			var category = getStructure(this).join('-');
			var action = (
				this.href.indexOf('.pdf') > -1
				|| this.href.indexOf('.mov') > -1
				|| this.href.indexOf('.avi') > -1
				|| this.href.indexOf('.m4v') > -1
				|| this.href.indexOf('.wmv') > -1
				|| this.href.indexOf('.mp3') > -1
				|| this.href.indexOf('.rar') > -1
				|| this.href.indexOf('.zip') > -1
			) ? 'download' : (
				this.href.indexOf('.html') > -1
				|| this.href.indexOf('.txt') > -1
				|| this.href.indexOf('.js') > -1
			) ? 'example' : 'link';
			var label = this.innerHTML;
			_gaq.push(['_trackEvent', category, action, label]);
		});
	}
	addEvent(document, 'click', function (event) {
		var element = getClickableElement(event.target);
		var category, action, label;
		if (!element) {
			return;
		}
		category = getStructure(element).join('-');
		action = (
			element.href.indexOf('.pdf') > -1
			|| element.href.indexOf('.mov') > -1
			|| element.href.indexOf('.avi') > -1
			|| element.href.indexOf('.m4v') > -1
			|| element.href.indexOf('.wmv') > -1
			|| element.href.indexOf('.mp3') > -1
			|| element.href.indexOf('.rar') > -1
			|| element.href.indexOf('.zip') > -1
		) ? 'download' : (
			element.href.indexOf('.html') > -1
			|| element.href.indexOf('.txt') > -1
			|| element.href.indexOf('.js') > -1
		) ? 'example' : 'link';
		label = element.innerHTML;
		_gaq.push(['_trackEvent', category, action, label]);
	});
	function addEvent(obj, type, fn) {
		if (obj.addEventListener) {
			obj.addEventListener(type, fn, false);
		} else if (obj.attachEvent) {
			obj["e" + type + fn] = fn;
			obj[type + fn] = function() {
				obj["e" + type + fn](window.event);
			}
			obj.attachEvent("on" + type, obj[type + fn]);
		}
	}
	function getStructure(el) {
		var structure = [];
		if (el.parentNode && el.parentNode.tagName.toLowerCase() != 'body') {
			structure = getStructure(el.parentNode);
		}
		if (el.id) {
			structure.push(el.id);
		} else if (el.className) {
			structure.push(el.className);
		}
		return structure;
	}
	function getClickableElement(element) {
		if (element.tagName == undefined) {
			return false;
		}
		if (element.tagName.toLowerCase() == 'a' || element.tagName.toLowerCase() == 'area') {
			return element;
		}
		if (element.parentNode) {
			return getClickableElement(element.parentNode);
		}
		return false;
	}
})();

(function() {
	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>

동적으로 생성된 요소도 포함할 수 있게 document요소에 델리게이션 했다.

링크의 부모요소를 재귀적으로 루트요소까지 탐색하면서 아이디(id) 값과 클래스(class) 값을 가져오고 이를 사용하면 특정 이벤트가 발생한 위치를 HTML 구조상에서 동적으로 만들어 낼 수 있다. 물론 HTML 구조가 잘 되어 있고 아이디와 클래스 값이 적절한 의미를 담고 있을 때에만 사용할 수 있기는 하지만, 요즘 이렇게 만들지 않는 사이트는 없다고 본다(진짜?).

이렇게 동적으로 생성된 이벤트 코드값은 실제로 기획자가 고생해서 만든값과 비교해 볼때 별로 문제가 없어 보인다. HTML 구조의 깊이가 너무 깊어질 경우에 이벤트 코드가 길어서 좀 보기 좋지 않은 경우를 빼고는 별 문제가 없다. 그리고 한글이 아니라는 점 정도? 이벤트 코드가 기본적으로 HTML 구조를 가지고 있기 때문에 특정 영역의 코드들을 검색한다든가 모아서 보는 데에도 탁월했다. 예를 들어서 'body-aside'를 검색하면 사이드바에서 발생한 모든 이벤트를 검색할 수 있다.

HTML을 모르는 기획자 입장에서는 좀 헷갈릴 수도 있겠다. 그래도 보기 편하라고 필터링 만드는 작업이 HTML과 JS 코드 뒤지면서 따옴표와 씨름하는 것 보다는 훨씬 수월할 것 같다.