Nexjs 에서 구글 애널리틱스 사용하기.

나는 ReactGA 라이브러리를 쓰기로 했다.

$ yarn add react-ga

모든 페이지에서 componentDidMount() 에다가, 페이지 트래킹 셋팅을 할 수 도 있겠지만, 그것은 좀 귀찮은 일이다.

그래서 next/Router 의 onRouteChangeComplete 리스너를 달아서, 라우팅주소가 변경될때마다, 자동으로 트래킹을 하게 만들었다.

import ReactGA from 'react-ga';

import Router from 'next/router'

Router.onRouteChangeComplete = url => {

console.log("라우트 체인지 컴플릿", url)

const pathName = window.location.pathname;

ReactGA.initialize('UA-xxxxxxxx-x');

ReactGA.set({page: pathName});

ReactGA.pageview(pathName);

}

이렇게 해두면, 모든 페이지의 componentDidMount에서 처리하지 않더라도, 라우팅이 변경될때마다 자동으로 트래킹을 해준다.