우리는 이미 AWS Amplify와 AWS RUM을 활용해 웹을 배포했고, WebView 환경에서도 사용자의 이동 경로를 정확히 추적 중이다.
그런데 마케팅에서 던져준 숙제가 하나 있다. 바로 구글 애널리틱스를 추가하는 것.
진짜 문제는 여기서 시작된다. 우리는 일반 웹사이트가 아닌 SPA(싱글 페이지 애플리케이션)를 사용하고 있다. 페이지 이동이 발생할 때마다 일반적인 페이지 리로딩이 아닌 Router를 통해 화면 전환이 일어난다.
결국, 이 환경에서 구글 애널리틱스로 정확하게 페이지 이동을 추적하려면 어떻게 해야 할지 깊은 고민과 고뇌에 빠질 수밖에 없었다.
그리고 실제로 우리는 DEV 서버와 PROD 서버를 따로 두는데 과연 그냥 DEV와 동일하게 HTML에 코드를 밖는다고? 아… 이건 좀 아닌것같다… 그럼?
그래 그럼 이제 라이브러리로 혹시 럼처럼 지원하는 서비스가 있는지 찾아보자에서 시작했다.
그래서 찾게된 Vue-gtag, 기존에 많이 썻다는 vue-analytics는 지원을 종료…. 해버렸다. 그래서 바로 적용하기 위해서 이것 저것 찾아보았다.
여기서 사용하는 방식에 대한 documentation을 읽을 수 있었고 해당하는 개발을 진행했다…
import { createApp } from "vue";
import { createRouter, createWebHashHistory } from 'vue-router';
import VueGtag from "vue-gtag";
import App from "./App.vue";
import Home from "./Home.vue";
import About from "./About.vue";
const router = new VueRouter({
history: createWebHashHistory(),
routes: [
{ name: 'Home', path: '/', component: Home },
{ name: 'About', path: '/about', component: About },
]
});
const app = createApp(App);
app.use(router);
app.use(VueGtag, {
config: {
id: "GA_MEASUREMENT_ID",
},
}, router); // <----- 바로 여기에 router를 넘겨준다.
app.mount("#app");바로 여기서
VueGtag에 라우터를 넘겨줄 수 있다는 사실을 발견했고, 마침내 다음과 같은 최종 코드로 문제를 해결했다.최종 코드는 다음과 같다.
import type { App } from 'vue';
import type { Router } from 'vue-router';
import VueGtag from 'vue-gtag';
/**
* GA4 초기 설정
* @see {@link https://developers.google.com/analytics/devguides/collection/ga4}
*/
export default (app: App, router: Router) => {
const {
VUE_APP_GA4_TRACKING_ID: trackingId,
VUE_APP_GA4_ENABLED: enabled,
} = import.meta.env;
const enableGtag = (enabled !== 'false');
if (enableGtag && trackingId) {
app.use(VueGtag, {
config: {
id: trackingId,
},
}, router);
}
};이제 SPA 환경에서도 페이지 이동마다 구글 애널리틱스가 정확하게 데이터를 수집할 수 있게 되었다……. 고 ? 생각했다 하지만…
데이터는 들어오는데 아니 왜 다 Oilfield NEX로만 들어오는가 … 결국 이동하는 페이지에 대한 정보는 얻을 수 없는 것인가 분명 엄청 이동 시켜봤는데 …
결국… Router가 제대로 동작하지 않는다는 것… 하지만…
문서 예제에서
new VueRouter(...)라고 되어 있는 부분은 Vue 3 환경에서는 올바르지 않다… 이유는 Vue 3에서는 createRouter({ ... })를 사용해야 하기 때문에 내 코드에서는 router를 이미 생성한 인스턴스를 받아 사용하기 때문에 이 부분은 문제가 없다… 근데 왜?! 왜!? 왜!!! 씨이이이이부레 …import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from '@/App.vue';
import { dayjs, fontawesome, globalComponent, rum, ga4 } from '@/plugins';
import router from '@/router';
const app = createApp(App);
const store = createPinia();
app.config.performance = true;
app.use(store)
.use(router)
.use(fontawesome)
.use(globalComponent)
.use(dayjs)
.use(rum)
.use(ga4, router)
.mount('#app');
마지막으로 main.ts로 이렇게 쓰는데 안된다… 아니 정확하게는 모르겠다. 진짜 내 실력이 모자른건가… 진짜 왜 안되는거지 난 다음주에 이걸 해결해보려 하겠지만 결코 쉬워보이진 않는다…
Share article
