환경은 Nuxt를 사용하였습니다.
회사 홈페이지에 Analytics를 적용해야하는 업무를 맡게 되어서 검색을 통해 vue-gtag를 찾게되었고
적용 및 공부를 하면서 정리하기위해 작성하였습니다.
npm i vue-gtag --save
npmjs: https://www.npmjs.com/package/vue-gtag
git 및 공식 사이트(?): https://github.com/MatteoGabriele/vue-gtag#readme
vue-gtag.js
import Vue from 'vue'
import VueGtag from 'vue-gtag'
export default ({ app }) => {
Vue.use(VueGtag, {
config: {
id: 'G-XXXXXXXXXX', // 측정 ID
},
appName: 'MyApp',
}, app.router)
}다음과 같이 plugins 폴더에 vue-gtag.js를 생성하였습니다.
app.router를 넘겨주어서 라우팅될 때마다 구글 애널리틱스에 정보가 올라가도록 설정했습니다.
현재는 로컬에서 테스트 중이라 처리를 안해놓았지만
(테스트 후에 로컬인지 서버에서 돌리고 있는 사이트인지 판별하는 코드를 추가할 예정입니다.)
nuxt.config.js
plugins: [
{src: '~/plugins/vue-gtag', mode: 'client'},
],그 후 nuxt.config.js 파일에 plugins에 다음과 같이 추가해주었습니다.
애널리틱스 계정 만들기
저는 테스트용으로 만들어 놓은 것이 있어서 계정 추가하는 것으로 시작했습니다. (처음 추가시라면 안펼쳐봐도 될거같습니다.)
우측 하단에 있는 관리를 클릭
계정 만들기 클릭하시면 됩니다.
계정을 만들 때 처음에 계정 이름을 입력하시고 밑에 필요해 보이는 것을 체크하신 후 진행하시면 됩니다.
해당 페이지에서 속성 이름을 입력해주시고
시간대와 통화를 '대한민국'을 검색하여 변경해주세요.
다음을 클릭하기 전 고급옵션을 보시면 다음 과 같이 유니버셜 애널리틱스 속성 만들기가 생깁니다.(우측 상단 라디오버튼 클릭 시)
유니버셜 에널리틱스는 예전버전 (analytics.js)이고 애널리틱스4는 최신버전(gtag.js)입니다.
최신버전을 사용하실거라면 고급옵션은 필요없습니다.
저는 둘 다 보고싶어서 둘 다 만들기로 사용하였습니다.
다음을 클릭하시면
다음 과 같은 간단한 설문조사(?)가 있습니다.
실제 이용과는 큰 관련 없다고 하니 읽어보시고 체크하시면 될 것 같습니다.
다음을 클릭하시면 다음 과 같이 약관 동의가 뜨는데
대한민국 검색하셔서 동의하시면 됩니다.
저는 GA4를 위주로 설정을 해놓은 상태라 유니버셜도 보고 싶어서
유니버셜-관리-속성-GA4 설정 어시스턴트에서 속성 연결을 해두었습니다.
(연결을 해두면 자동적으로 해당 데이터를 불러온다고 애널리틱스 가이드에 적혀있어서..)
위에는 제 블로그로 테스트 계정을 만들었다면, 밑에는 실제 회사 사이트에 적용시킬 애널리틱스입니다.
블로그(html)에 적용하고 싶으신분들은 GA4는 관리-(속성)데이터 스트림-리스트에서 원하는 거 클릭 후 태그하기에 대한 안내
유니버셜은 관리-(속성)추적 정보-추적 코드 를 적용하시면 됩니다.
연결이 제대로 되어있나 테스트 해보기 위해 로컬 사이트 이곳저곳을 동작시켜본 뒤 애널리틱스를 확인했습니다.
페이지 제목 및 화면 이용 별 조회수 항목
해당 항목에는 nuxt에서 설정된 router의 name 값으로 들어가는 것을 확인했습니다.
그 이외 동작은 아직 시작 단계라 확인하지 못했습니다.
이벤트 이름 별 이벤트 수 : page_view
ga_session_id, ga_session_number는 구글 애널리틱스 관련 데이터라 생각이 들어서 주의깊게 보지 않았습니다.
page_location은 사용자가 이동한 fullPath로 보입니다.
page_title은 페이지 제목 및 화면 이용 별 조회수 항목과 같은 nuxt에서 설정한 라우팅 name으로 보입니다.
page_path는 사용자가 이용한 path만을 가져왔습니다.
이벤트 이름 별 이벤트 수 : login
해당 이벤트는 자동적으로 인식하지 못하여서 다음과 같이 로그인 시 코드로 호출하여 이벤트를 동작시켰습니다.
// 사이트 내 회원 로그인 시
this.$gtag.event('login', {
'event_categoty': 'Login',
'event_label': 'Site',
'value': 1,
})
// 카카오 소셜 로그인 시
this.$gtag.event('login', {
'event_category': 'Login',
'event_label': 'Kakao',
'value': 1,
})
위 와 같이 로그인 시 사용한 방법에 따라 등록되도록 설정해주었습니다.
하지만 이벤트 같은 경우에 필수적인 parameter와 default로 자동 생성되는 parameter가 있어서
더 공부해봐야할 것 같습니다.
이벤트 이름 별 이벤트 수 : search
search 또한 자동적으로 들어가지 않길래 이벤트를 추가시켜줬습니다.
this.$gtag.event('search', {
'event_category': '검색 종류',
'event_label': '검색어',
'value': 1,
})(event_category가 기본 형태인줄 알고 사용하였는데, 아닌걸 확인하고 실제론 about으로 변경하였습니다..ㅎ)
(event_category와 event_label을 잘 작성해주어야 애널리틱스에서 확인할 때 구분해주는 것을 확인했습니다. 그 내용은 접어뒀습니다.)
event_category를 설정하지 않으면 다음과 같이 기본 카테고리(글 맨 아래 이미지 참고)로 뭉탱이로 들어갑니다ㅠㅠ
이벤트를 gtag를 호출해서 보내주면 이벤트 액션칸에 다음과 같이 들어갑니다.
event_label을 설정하지 않으면 다음과 같이 (no set)이 들어갑니다.
다음과 같이 search 이벤트로 들어오는 것을 확인 할 수 있고,
event_category에는 검색한 항목인 workbook이 들어갔습니다.
search_term에는 검색어인 문제가 들어갔습니다.
로그인과 검색은 밑 사이트에서 default label type을 참고하여 추가하였습니다.
https://developers.google.com/analytics/devguides/collection/gtagjs/events
실시간은 위에서 사용한 사진처럼 어느정도 (약 20초~1분 걸린거 같습니다.) 시간이 흐르면 업데이트가 되고,
30분 간격으로 사라지는 것을 볼 수 있었고,
그 이후에는 다른 탭(아래 사진 첨부)에서 확인 할 수 있는데,
최대 24시간이 걸리고 업데이트가 되서 내일 확인해봐야 할 것 같다.
하면서 느낀점은 만든 사람도 대단하고, 마케팅을 위해 사용하는 사람도 대단한 것 같다..
더 공부해서 업데이트를 꼭 해야겠다!
[위에서의 내일인 오늘 보고 느낀점]
테스트로 작업을 했음에도 불구하고 상상 이상으로 데이터가 들어온게 신기했다.
또한 event_category와 event_label은 커스텀해도 상관없는것이라 생각 했는데
데이터를 보니 데이터를 확인하려면 꼭 필요하단 생각이 들었다.
GA4보단 유니버셜이 더 보기 편하단 생각도 들었다.
GA4는 뭔가 개발자의 느낌이고, 유니버셜은 그래도 클릭을 하다보면 원하는 데이터를 찾을 수 있구나 생각이 들었다.
(유니버셜이 조금 더 찾기 편하게 단순하게 되어있는 느낌을 받았습니다.)
사람마다 개인차가 있을 것이니, 둘 다 사용해보는 게 좋을 것 같습니다!
'JavaScript > Vue.js' 카테고리의 다른 글
| Vue에서 XLSX(SheetJS) 사용한 것 정리 (0) | 2022.03.30 |
|---|---|
| Vue 컴포넌트에 외부 스크립트 추가 (메모용) (0) | 2022.03.18 |
| Vue.js 페이징처리(Pagination) (0) | 2021.09.08 |
| Vuex-Pathify (0) | 2021.08.13 |
| 뷰 필터 (0) | 2021.08.02 |
