[Vue.js/Nuxt] 구글애널리틱스4 vue-gtag로 연동하기

vue.js GA4 연동하기 (구글애널리틱스4)

✔️구글 애널리틱스 UA  종료

유니버설 애널리틱스(Universal Analytics, UA) 버전이 23년 7월 1일 이후부터 

서비스가 종료된다는 안내가 왔다.

구글애널리틱스 유니버설 서비스 종료

유니버설 애널리틱스 서비스 종료시점에서는 더 이상 신규 데이터 수집 및 조회가 안되기 때문에

구글 애널리틱스 4로 이전을 해야 된다.

 

🙅‍♀️vue-analytics 지원 중단

vue-analytics 지원 중단

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

구글 애널리틱스 analytics.js 자체가 중단되고, gtag.js로 수집을 하라 권고가 되면서

vue-analytics 말고 vue-gtag를 이용을 하라고 안내가 되어있다.

 

 

📊vue-gtag

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

vue-gtag

구글 지침 변경으로 이제 vue-gtag를 이용해서 googleAnalytics4를 연동할 수 있다. 

 

 

 

vue-gtag install

vue-gtag는 Vue버전에 따라서 버전을 맞춰서 사용해야 된다.

npm install vue-gtag --save

• Vue2 : vue-gtag v.1 버전
• Vue3 : vue-gtag v.2 버전

 

Vue2 일 경우 install

"export 'nextTick' was not found in 'vue'

 

나의 경우 Vue2를 사용하는데 v.2 버전을 설치했을 때  위 오류가 나서 찾아보니

Vue2의 경우 vue-tag 최신 버전이 아니라 1 버전을 이용해야 된다.

npm install vue-gtag@1.16.1 --save

 

샘플 코드

plugin/gtag.js

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

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

nuxt.config.js

plugins: [
        {src: '~/plugins/gtag.js',mode: 'client'},
    ],

 

GA4 연결화면

구글애널리틱스 실시간 사용자 확인

vue-gtag로 연동을 하니 실시간 사용자가 들어오는 것을 확인할 수 있다.