Vue gtag click 이벤트 설정하기!! ( Google Analytic )

SunnyMoon·2022년 1월 28일
1

vue로 ga 측정하기

이번에 작업을 진행하다가 ga를 삽입해 달라는 요청을 받았다. 단순히 vue에 gtag를 설치해서 기본적으로 사용을 하고 있었는데 요청인즉 현재 사이트에서 버튼을 클릭했을때 얼마나 클릭이 되는지 확인을 해보고싶다는 요청이었다. vue에 연결할수 있는 gtag에 대해서 찾아보기 시작했다.

  1. vue-analytics

    현재 우리가 사용하는 방식은 아니지만 vue-analytics 방식이 존재했다. 그러나 현재 vue-analytics 방식은 이미 더이상의 업데이트가 없다고했다. 그러므로 pass!!

  2. vue-gtag

    현재 사이트에서 적용되어있고, 구글에서도 GA4로 바뀌면서 gtag를 사용하고 있는것 같았다. 조금 더 확장된 개념이랄까...?

    https://developers.google.com/analytics/devguides/collection/gtagjs (g-tag 공식문서)

설치하기

$ npm install vue-gtag --save

npm으로 설치를 하고 나면 src/main.js에 적용을 해줘야한다.

import Vue from 'vue'
import VueGtag from 'vue-gtag'

Vue.use(VueGtag, {
    config: {
        id: 'UA-000000000-0'  // Google Analytics의 Tracking ID
    }
});

이렇게 넣으면 gtag의 설치는 끝 !!! GA로 들어가서 확인해보면 실시간으로 데이터가 잡히는것을 확인할수 있다.

이벤트 gtag 설정

vue-gtag는 이미 설치가 되어있었고, 우리가 필요한것은 click횟수를 잡는 것이었다 !
UA방식이 아닌 gtag방식으로 이벤트를 설정해야했다.

https://matteo-gabriele.gitbook.io/vue-gtag/

이곳의 문서를 보면 정리가 매우 잘되어있다! 우리가 필요한 부분은 event에 관한 부분이었다.
코드를 확인해 보았다.

export default {
  name: 'MyComponent',

  methods: {
    track () {
      this.$gtag.event(<action>, {
        'event_category': <category>,
        'event_label': <label>,
        'value': <value>
      })
    }
  }
}

내가 이벤트를 넣고싶은 곳에 methods를 만들어서 실행될때마다 클릭횟수가 GA로 보내지도록 설정을 할수 있었다.
여기서 의문을 가졌던 것이 ' action,category, label, value ' 값이었다 . 이것에 대한 설명이 따로 없어 찾아보았다.

참조문서 : https://developers.google.com/analytics/devguides/collection/gtagjs/events

action : 이벤트 카테고리에 대한 설명 - 버튼클릭, 재생
label : 추가세분화 용도 - 파일명
value: 숫자 , 변수값
category: 이벤트 유형을 나타내는것

이해가 잘 되지 않았지만 ga로 여러모로 test를 진행해 보았다. 일단 필요한것은 click이 얼마나 되는지 그 클릭되는 수를 제목별로 나눠서 가져오고싶다는 요청에 맞춰 test를 진행했다.

일단 action값에 click이라는 값을 넣고, event_category와 event_label 값을 임의로 지정해 넣고 value값을 vue에서 title값을 넘겨줘서 담았다.

<template>
...
...
<button @click= "play(item.title)">play button</button>
</template>

<script>
...
...
methods: {

play(title) {
	this.$gtag.event('click', {
    	event_category: 'play',
        event_label: 'music',
        value: title,
    }

}

}
</script>

코드를 넣었더니 !!! click이라는 이벤트값에 , value는 title값이 잡혔다!
성공적이다 !!
공식문서와 달랐던 점은 'event_category'라고 string값으로 넣으라고 했는데 event_category라고 넣어야만 오류가 나지 않았다.
즉 action 값이 이벤트 명으로 GA4에서 잡힌것 같다. event_label, event_category, value와 같은것은 GA에서 이벤트 'click'으로 잡히는 것을 클릭했을때 !매개변수명으로 볼수 있었고, 그 매개변수 명으 클릭하면 원하는 data값을 가져올수 있었다.

내가 설정한 매개변수 명 말고도 기본적으로 gtag 이벤트에서 제공하는 event 매개변수도 다양하게 있었다
그것을 찾아보면 좀더 다양하게 ga를 이용할수 있을것 같다.

여러 문서에서 event_category, event_label까지는 써주는것이 좋다고 하니, 기획자, 혹은 ga를 분석하고자 하는 사람들이 판단하에 필요한 값을 잘 나눠서 데이터를 봐야할것 같다

매개변수명을 event내에서 만들어서 제공이 되는것이 아니라 value라던지, event_category라던지 내가 만들어서 보낸 데이터는 따로 데이터가 쌓이지 않는다.
실시간으로만 데이터가 보이고 다음날 데이터가 싹 사라지고 단순히 이벤트 횟수만 쌓여있어 멘붕이 왔다.

이부분을 해결하기 위해서는 내가 맞춤설정에서 이벤트 매개변수명을 따로 가져와 ! 설정을 해야했다

맞춤정의로 들어가서 클릭을 한다!!

그러면 맞춤측정기준 만들기를 볼수 있다. ! 파란색 버튼을 클릭한다

맞춤 측정기준을 만든다 !

여기서 측정기준 이름은 그냥 내가 말그대로 제목이다 !
범위는 이벤트를 선택한다 !
설명은 이 이벤트에서 뭘 보고싶은지 내가 설정하는 것이다.
이벤트 매개변수 선택이라는 말에 홀릴 필요가 없다. 기본적으로 제공하는 event 메소드내에 매개변수를 선택할수 있게 해준다! 하지만 내가 필요한것은 내가 설정한 매개변수라는것 !!!! 내가 설정한 매개변수 이름값을 넣는다 !
나의 경우는 value에 title을 담았으므로 매개변수 선택에 value값을 넣었다.

이렇게 넣고 다음날 참여도 > 이벤트로 들어가서 내가 만든 이벤트 이름명을 클릭하면
전날 내가 원해서 보고싶었던 데이터가 쌓여있음을 확인했다 !!

일단 기본적인 셋팅은 이렇게 끝냈다.
GA4의 기능은 무궁무진하게 많은데 , 내가 원하는 click 이벤트를 볼수 있었으니 개발자로서 셋팅해줄수 있는 부분은 여기까지
좀더 딥하게 공부를 위해서는 더 많이 알아봐야할것 같다.

profile
프론트앤드 개발을 공부하는 중입니다:)

0개의 댓글