SPA(single page application)의 GA 적용기 (google analytics)

 

Vue.js 를 통해서 SPA의 형태로 만든 사이트에 GTM(google tag manager)을 설치해달라는 요청이 들어왔다.

스크립트 코드가 메일로 전달 됐기 때문에 아무 생각없이 /public/index.html 에 추가하면 될거라 생각했던건 경기도 오산시였다.

 

처음엔 위에 방법으로 추가한 후에 배포를 했다.

그러나 GA가 활성화가 안된다는 연락이 온 것이다.

 

 

그래서 찾아보니 Vue.js에서는 vue-gtag 를 쓰는것을 확인했다. [공식]

Get started

 

 

설치 방법

npm install --save vue-gtag // 공식click

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

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

이렇게 설치를 끝내고 배포한 뒤에 확인해보니 으잉?

 

사용자 인입만 추적되고 그 이후 페이지 이동은 추적이 되지 않는 것(issue) 이다.

 

 

 

여기서 중요한게 있다.

 

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

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

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

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

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

 

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

어라? 처음엔 적지 않은 파라미터가 보인다. 이는 아래와 같다.

 

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

 

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

라우터에서만 page_view를 카운팅하는 것을 위해 필요하다. (설정하지 않으면 두개의 사용자로 찍힘)

 

 

 

 

* Tip

정말 해당 관련해서 google에 있는 페이지들은 다 본거같다.

계속해서 인입처리만 되고, 페이지 이동시 갱신이 되지 않아서 애널리틱스 관리자 사이트에서 확인해본 결과..

추적 ID 가 다른 것을 확인했다.

 

해당 아이디를 변경해준 후로는 정상적으로 위의 코드대로 작동한다.

이는 GTM으로 설치된게 아니라 GA로 설치된 점을 알 수 있다. (아이디를 확인해볼 것)