구글 애널리틱스 적용하기 1편(vue-gtag)

> 구글 애널리틱스 적용

Vue.js 를 통해서 SPA의 형태로 만든 회사 사이트에 구글 애널리틱스를 적용하게 되었다.

 

온클릭 등의 이벤트가 발생할 일이 없는 단일 페이지이거나,

웹 페이지 진입 여부만 체크하면 되는 경우라면

 

public/index.html에 아래와 같은 Google Analytics에서 제공하는 임베디드 코드를 바로 넣어도 큰 상관은 없다.

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-000000000-0">
</script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-000000000-0');
</script>

 

그러나 여러 컴포넌트와 페이지, 그리고 이벤트들이 존재하는 경우에는 임베디드 코드를 붙여넣는 것만으로는 부족해서

 

 Vue.js를 위한 Google Analytics 패키지가 몇가지 존재한다. (vue-analytics, vue-gtag)

 

> vue-analytics 지원 종료

구글측에서도 Google Analytics를

단순 분석/트래킹용 (analytics.js)에서 글로벌 사이트 태깅(gtag.js)으로 확장 진행하는 중인데

 

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

vue 개발자들은 vue-analytics 말고 vue-gtag를 이용하라고 안내되어 있다.

 

구글 지침 변경으로 이제 vue-gtag를 이용해서 googleAnalytics4 연동이 가능하다!

 

> vue-gtag

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

Vue2일 경우 최신 버전 설치시 에러 (yarn add vue-gtag)

Module not found: Error: Can't resolve '@vue/shared' in '/.../node_modules/vue-gtag/dist'

 

해당 에러가 뜨는 이유는 Vue2의 경우 vue-tag 최신 버전이 아니라 1 버전을 이용해야 하기 때문이다.

 

Vue2 : vue-gtag v.1 버전 yarn add vue-gtag@^1.16.1

Vue3 : vue-gtag v.2 버전 yarn add vue-gtag

---

// main.js
import VueGtag from 'vue-gtag';

Vue.use(
  VueGtag,
  {
    config: {
      id: 추적ID,
    },
  },
);

이렇게 기본 설치를 끝내고 배포해보면

사용자 인입만 추적되고 그 이후 페이지 이동은 추적이 되지 않는 이슈가 발생한다.

 

여기서 중요한 점은

해당 프로젝트는 단일 페이지(SPA)의 형태로 router를 이용해서 페이지를 그려준다.

 

그렇기 때문에 router가 갱신될 때마다 해당 추적을 보내야하는 것이다.

저 위의 코드에 몇가지를 더 추가하면 된다.

 

// main.js
import router from './router';
import VueGtag from 'vue-gtag';

if (process.env.VUE_APP_GOOGLE_ANALYTICS) { // env Product에만 추적 ID를 저장하여 운영서버만 활성화 
  Vue.use(
    VueGtag,
    {
      config: {
        id: `${process.env.VUE_APP_GOOGLE_ANALYTICS}`,
        params: {
          send_page_view: false, ⭐️
        },
      },
    },
    router
  );
}

 

위의 코드처럼 router가 추가되어야만 페이지 이동시에 page_view를 가져갈 수 있다.

 

⭐️ 추가된 파라미터는 아래와 같다.

send_page_view : config 코드를 로드시에 해당 페이지를 전송 유무 (false/ default : true)

 

해당 속성을 통해서 SPA에서 초기 진입시 페이지를 카운팅하지 않고

라우터에서만 page_view를 카운팅하기 위해 필요하다. (설정하지 않으면 두 개의 사용자로 산출된다고 한다!)