웹사이트에 방문한 사용자가 웹사이트에서 어떤 요소 또는 항목을 사용했는지 추적하기 위해서 구글 애널리틱스의 이벤트 추적기능을 사용한다.
이벤트 추적에는 4개의 항목을 사용한다. 4개의 항목을 이용하여 사용자가 웹페이지를 어떻게 이용했는지 표현될 수 있도록 정의한다.
- category : 필수. 추적하고자 하는 항목의 그룹.
- action : 필수. 추적 행동.
링크를 클릭한다와 같은 행위를 표현한다. - label : 선택사항(필수로 사용하길 권장함). 추적 해동에 대한 기술.
클릭한 링크의 주소등의 값을 사용한다. - value : 선택사항. 정수값을 이용한다.
동영상을 플레이한 시간등의 값이 사용된다.
꼭 위에 기술된 내용에 맞게 정의할 필요는 없고 이벤트 추적에 도움이 되도록 자신만의 규칙으로 설정하면 된다.
gtag.js 애널리틱스 자바스크립트를 사이트에 추가하기
기존 analytics.js가 아닌 새로운 방식의 gtag.js를 이용하도록 한다. analytics.js에서 gtag.js로 변경하는 방법은 아래 링크에 잘 나와있다.
Migrate from analytics.js to gtag.js
구글애널리틱스에 등록한 구글애널리틱스ID(GA_MEASUREMENT_ID) 값을 이용하여 아래 스크립트를 웹사이트 헤더에 추가한다. sendGaEvent()는 웹사이트에서 공통으로 호출한 함수를 정의한 것으로 실제로는 gtag() 함수를 호출하는 역할을 할 뿐이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
function sendGaEvent(category, action, label, value) {
gtag('event', action||'ACTION', {
'event_category': category||'CATEGORY',
'event_label': label||'',
'value': value||''
});
}
</script>
이벤트 등록하기
아래 예시와 같이 링크를 클릭하면 sendGaEvent() 함수를 호출하여 구글애널리틱스에 이벤트를 추적하도록 한다.
1
<a href="/category/event" onclick="sendGaEvent('메뉴', 'click', '이벤트보기')">이벤트보기</a>