구글 애널리틱스 gtag.js 로 이벤트를 일으켜보겠습니다.
구글 애널리틱스에서는 보통 이벤트를 버튼이나 링크를 클릭했을 때 해당 값을 추적하기 위해 사용 합니다.
예를 들면
위에 있는 버튼을 클릭했을 때의 수치를 트래킹 하고 싶다 라고 하면 해당 버튼을 클릭했을 때 구글 애널리틱스 이벤트가 실행 되게 코드를 작성해주면 됩니다.
이야기 나온 김에 버튼에 이벤트를 심어 보았고 클릭했을 때 개발자 도구 네트워크 탭이나 구글 태그 어시스턴트를 통해 확인이 가능 하실 겁니다.
저는 버튼을 클릭했을 때 다음과 같은 구글 애널리틱스 이벤트 코드가 발생하도록 설정 하였습니다.
gtag('event','버튼클릭',{
'event_category' : '테스트' ,
'event_label' : '테스트',
'value': 1
})그 결과 다음과 같은 이벤트가 발생 합니다.
ec 는 이벤트 카테고리 , ea 는 이벤트 액션 , el 은 이벤트 라벨 ev 는 value 값을 나타냅니다.
코드상에서 event 다음에 이어지는 부분은 이벤트 액션 값이 들어가야 하며 그 이후 {} 를 연 뒤 event_category 값을 지정해주면 됩니다.
이벤트를 일으킬 때는 사실 이벤트 액션과 이벤트 카테고리만 작성되면 문제 없으나 모든 경우의 수를 보여드리기 위해 이벤트라벨과 value 도 추가 하였는데 구분이 무의미하다면 크게 사용하지 않으셔도 됩니다.
이벤트 액션과 카테고리에 어떤 값을 넣어야 할 지 고민하실 수도 있는데 약간 모호한 해답일 수 있지만 담당자가 아닌 사람이 봐도 이해가 될 수 있도록 세팅하는 것이 가장 중요한 것 같습니다.
GA 라는 것이 여러명이 같이 보는 경우가 훨씬 많기 때문에 직관적인 것이 중요하고 실제 프로젝트 진행 할 때에는 event Action 에는 클릭이나 링크이동 같은 행동을 , event Category 에는 버튼 , 이미지 등의 대분류 등을 정리하면 좋을 것 같습니다.
그러면 이제 코드펜에서 본격적인 실습을 해보겠습니다.
https://codepen.io/dev0505/pen/xxZqNzV
구글 애널리틱스 이벤트 테스트
...
codepen.io
이번에는 이벤트 일으키는 방법을 2가지로 분리 해보았습니다.
한가지는 html 내에 onclick 이벤트를 활용한 방법이고
나머지 한가지는 자바스크립트로 html 의 class 값을 추적하여 해당 class 값의 버튼을 클릭 할 시 구글 애널리틱스 이벤트를 실행시키는 방법 입니다 .
<html>
<head>
<title> 구글 애널리틱스 이벤트 테스트 </title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-160176510-1"></script>
<script>
// 구글 애널리틱스 시작
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
// 커스텀 디멘션 세팅
gtag('set', 'dimension1', new Date().getTime() );
// 구글 애널리틱스 실행 및 clientID 커스텀 디멘션 설정
gtag('config', 'UA-160176510-1' , {
//'send_page_view' : false ,
'custom_map':
{
'dimension2': 'clientId'
}
})
</script>
</head>
<body>
구글 애널리틱스 이벤트 테스트
<br>
<!--html 상에서 onclick를 활용하면 자바스크립트 실행 가능 , 버튼 클릭 시 구글 애널리틱스 이벤트 코드 실행하도록 작성됨. -->
<button onclick="gtag('event','버튼클릭',{
'event_category' : '테스트' ,
'event_label' : 'onclick',
'value': 1
})">onClick 으로 이벤트 일으키기 클릭</button/>
<br>
<!-- 버튼의 class 를 event 로 설정 하고 하단의 스크립트에서 event인 클래스가 클릭이 일어났을 때 구글 애널리틱스 이벤트를 일으키도록 설정 -->
<button class ="event">
클래스 값 추적하여 이벤트 일으키기 클릭
</button>
<script>
// 버튼을 정의 합니다. 클래스 이름이 event 인 요소를 선택 합니다..
var buttonElement = document.getElementsByClassName("event")
// 클래스 이름이 event 요소가 여러개 일 수 있기 때문에 그 중 첫번째에 해당하는 값을 클릭 했을 때 (onclick) 구글 애널리틱스 이벤트를 실행시켜줍니다.
buttonElement[0].onclick = function(){
gtag('event','버튼클릭',{
'event_category' : '테스트' ,
'event_label' : '클래스값 추적',
'value': 1
})}
</script>
</body>
</html>각 버튼을 클릭 시 이벤트가 발생할 것이고 각 버튼은 event_label 로 어떤 버튼이 클릭되었는 지 구분 할 수 있게끔 구성 하였습니다.
실제 트래킹 작업을 할 때 처음에는 onclick 방식을 많이 사용 하였으나 해당 방법은 가독성이 떨어지고 html 코드를 직접 수정해야 하기 때문에 수정이 어렵다는 단점이 있습니다.
클래스를 추적하는 방법은 html 본문을 수정하지 않고 자바스크립트만 수정하여 이벤트를 수정할 수 있기 때문에 이후 유지보수가 쉬워지고 해당 스크립트를 태그 매니저 상에서 html 태그로 추가하고 트리거를 window loaded 나 dom ready 로 설정 해주면 번거로운 트리거 설정 없이 코드만으로 클릭에 대한 이벤트 설정이 가능하여 생산성이 늘어난다는 장점이 있습니다.
이렇게 구글 애널리틱스 이벤트를 일으키는 방법을 알아 보았습니다.
궁금하신 부분 있으시면 편하게 댓글 달아주셔도 좋습니다.
감사합니다 :)
'Google Analytics' 카테고리의 다른 글
| 구글 애널리틱스 내부링크/외부링크 클릭 이벤트 일으키기 (1) | 2020.06.27 |
|---|---|
| 구글 애널리틱스 티스토리 관리자 계정으로 로그인 된 내부 사용자 분류하기 (0) | 2020.06.24 |
| 구글 애널리틱스 커스텀 디멘션 만들기 (0) | 2020.06.20 |
| 구글 애널리틱스 테스트 하기 1. gtag.js 페이지뷰 일으키기 (0) | 2020.03.10 |
| 구글 태그매니저를 통한 구글 애널리틱스 실행 속도 비교 (0) | 2020.03.08 |
