[Nuxt.js] google analytics 적용하기

whynot 플젝이 어느 정도 윤곽이 잡혀서 google analytics를 적용해보기로 했습니다.

프로젝트는 Nuxt 2버전을 사용하고 있어서 Nuxt 2 버전을 기준으로 따라 해 보면 아마 잘 될 것 같아요:)

 

 

라이브러리로는 nuxt/google-analytics와 vue-gtag가 있었는데,

측정 ID가 UA로 시작한다면 nuxt/google-analytics를 사용하고 G-로 시작하면 vue-gtag를 사용하면 됩니다.

저는 vue-gtag를 사용했어요!

 

 

google analytics 사이트에서 스트림 생성

https://analytics.google.com/

 

 

측정 ID를 프로젝트 아래의 코드(vue-gtag.js)에 추가 해준다.

 

 

vue-gtag 설치

yarn add vue-gtag

저는 nuxt 2 버전을 사용하고 있기 때문에 이런 에러가 났습니다.

 

 

 

아래의 명령어로 @vue/shared를 설치해줍니다.

yarn add @vue/shared

 

 

vue-gtag 2.X 버전에서는 nuxt 2를 지원하고 있지 않고 디폴트로 nuxt 3을 지원하는 것 같아요:)

package.json의 dependencies에서 vue-gtag의 버전을 1.16.1로 변경했습니다.

  "dependencies": {
    ...
    "vue-gtag": "^1.16.1",
    ...
  },

 

 

plugins에 vue-gtag.js파일을 생성하고 아래의 내용을 추가해줍니다. G-XXXXXX에는 측정 ID를 적어줍니다.

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

Vue.use(VueGtag, {
  config: { id: 'G-XXXXXXXX' }
})

 

배포 한 뒤, 태그가 제대로 적용되었는지 확인하기 위해서는

chrome web store에서 tag-assistant-legacy를 설치하면 됩니다.

 

 

플러그인을 설치하고, 태그를 확인할 사이트에 들어가서 상단에 설치한 플러그인을 선택하면 아래의 팝업이 뜹니다.

 

 

 

 

팝업에서 Enable을 선택하고 태그가 제대로 들어갔다면 아래의 사진처럼 되는 것을 확인할 수 있습니다.