[Vue] vue에 구글애널리틱스(GA4) 연동하기

 

 

💡 구글 애너리틱스 UA 종료

유니버설 애널리틱스 (Universal Analytics, UA) 버전이 2023년 7월 1일 이후부터 서비스가 종료된다.

서비스 종료시점에서 부터는 신규 데이터 수집 및 조회가 안되기 때문에 구글 애널리틱스 4 (GA4) 로 이전을 해야한다.

 

 

💡 vue-analytics 지원 중단

기존에 지원하던 vue-analytics 에서도 더 이상 지원이 안된다는 안내 문구가 나온다.

구글 애널리틱스 analytics.js 자체가 중단되고, gtag.js로 수집을 하라 권고가 되면서 vue-analytice 대신 vue-gtag를 이용하라고 안내가 되어있다.

 

 

💡vue-gtag

 

https://www.npmjs.com/package/vue-gtag

vue-gtag

 

사용하고 있는 vue버전에 따라 vue-gtag 버전을 맞춰서 사용해야 한다.

npm install vue-gtag 

▪️ Vue2 ➡️ vue-gtag v.1 버전

▪️ Vue3 ➡️ vue-gtag v.2 버전

 

 

현재 개발중인 프로젝트가 vue2로 되어 있는데 버전을 다르게 써야 하는지 모르고 최신버전을 다운 받았다가 오류가 났다.

npm install vue-gtag@1.16.1

 

 

💡Sample Code

 

📎main.js

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

export default ({app}) => {
	Vue.use(VueGtag, {
    	config: {
        	id: 'G-XXXXXXXXXXX'
        },
    }, app.router)
}

vue.js는 SPA이기 때문에 router를 같이 보내준다. router에 설정된 name으로 페이지 수집이 된다.