[Vue.js] Vue3 + TS 환경에 구글 애널리틱스(GA)를 적용하기

front/vue.js
2021. 12. 5.

SHORTCUT

개발 환경
- Vue3 (v4.5.13)
- typescript (v4.1.5)
- vue-gtag-next (v1.14.0)

인트로

이번에 스튜디오 홈페이지를 개발하여 오픈했다. 프론트는 Vue3를 사용하였고, 백엔드는 따로 구성하지 않고 파이어베이스를 통해 진행하였고 호스팅까지 진행했다.

배포한 이후 몇명의 사용자가 오는지 측정하고자 하였는데, 그럴려면 DB에 사이트 조회수를 카운팅해야 했다. 물론 이것도 필요하긴 하지만, 그 추이를 파악하기 위해선 어드민 페이지도 필요했다. 당장의 MVP를 만들기엔 불필요한 부분이었다.

~~그리고아직 리얼타임 DB 적용해본적이 없다ㅎ~~

그래서 GA를 달기로 결정했다. 기본적으로 방문자 수 카운팅과 추이를 확인할 수 있었고, 많은 마케터들의 성과 측정 도구인 만큼 한번 사용해보고 싶었다.

~~그리고 달면 왠지 멋있어 보이잖아~~

Vue에 GA를 적용하는 방법 세 가지

NPM : vue-analytics (불가 🙅🏻‍♂️)

vue-analytics을 설치하는 건데 이는 현재 불가능하다.
- npm install vue-analytics
구글측에서 Google Analytics를 단순 분석/트래킹용 (analytics.js) 에서 글로벌 사이트 태깅 (gtag.js) 으로 확장을 진행하고 있다.
- 그 흐름에 맞춰 이 라이브러리도 deprecated(더이상 지원하지 않는) 되었다.

NPM : vue-gtag

위에서 언급한 글로벌 사이트 태깅을 지원하기 위해 확장한 라이브러리
- 글로벌 사이트 태그 (gtag.js)는 자바스크립트 태깅 프레임워크이자 API 이다.
  구글 아날리틱스, 구글애즈, 구글 마케팅 플랫폼에 이벤트 데이터를 전송할 수 있도록 도와준다.

적용 방법

npm install vue-gtag
NPM LINK
main.js 에서 라이브러리를 적용 및 렌더시킨다.

import Vue from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag";

Vue.use(VueGtag, {
config: { id: "UA-1234567-1" }
});

new Vue({
render: h => h(App)
}).$mount("#app");

💥 에러

main.ts에서 app.use(VueGtag, {...})를 하면, 계속 VueGtag가 없다는 에러가 발생함

Issues checking in progress...
ERROR in src/main.ts:11:9
TS2345: Argument of type 'typeof VueGtagPlugin' is not assignable to parameter of type 'Plugin_2'.

...

   9 | const app = createApp(App);
  10 |
> 11 | app.use(VueGtag, {
     |         ^^^^^^^
  12 |    config: { id: '111' },
  13 | });
  14 |

라이브러리의 주소를 계속 참조를 못하길래, 트라이 하다가 포기
- Vue3 + TS환경, 특히 타입스크립트를 사용하고 있기 때문에 안된다고 판단

NPM : vue-gtag-next (성공 😀)

vue-gtag와 동일하지만, Vue 3를 지원하기 위해 개발된 라이브러리

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

// GA
import VueGtag from 'vue-gtag-next';

const app = createApp(App);

app.use(VueGtag, {
   property: { id: 'G-1234567' },
});

app.use(store).use(router).mount('#app');

적용 끝~!

라이브러리 하나로 설정이 되다니, 너무 편리하다. 렌탈스튜디오 홈페이지인 만큼 꾸준히 유저가 유입되는 구조라 GA를 테스트해보고 사용하기 적합하다고 생각한다. 유저들이 어떤 디바이스로 접근하고 어떤 페이지에 머물르는지 확인 할 수 있는게 참.. 신기할 따름이다.

이제 GA 에서 어떤 기능들이 있고, 유의미한 인사이트를 뽑기 위해선 어떤 걸 보아야 하는지 공부해봐야겠다!
물론 그 전에 SPA에서 GA를 어떻게 최적화 할 수 있을지.. 내가 시도한 미립자 팁도 같이 공유해야겠다.

끝!

저작자표시 비영리 동일조건

sammyDevLog