[REACT] react-ga로 리액트 프로젝트에 google analytics 적용하기

우리의 프로젝트에 구글애널리틱스를 심어보자!

알고보니 어려운 것이 아닌데 자료가 많이 없어서 좀 헤맸던 부분이다.

이렇게만 하면 된다.

 

 

1. 구글애널리틱스에 가서 속성만들기

 

구글애널리틱스가 업그레이드가 되었다고 하는데

우리가 쓸 라이브러리는 이전버전이므로 유니버셜 애널리틱스 속성을 만들어준다.

 

 

 

 

 

 

2. 코드심기

왼쪽 하단 설정-> 추적정보-> 추적코드에 들어가면

id와 코드가 이렇게 나온다.

이 코드를 index.html의 head태그 안에 넣는다.

 

 

 

 

 

3. react-ga 설치

https://www.npmjs.com/package/react-ga

react-ga

 

 

 

 

 

4. App.js에서 추적하기

  useEffect(()=>{
    ReactGA.initialize("user id");
    history.listen((location) => {
      ReactGA.set({ page: location.pathname }); // Update the user's current page
      ReactGA.pageview(location.pathname); // Record a pageview for the given page
    });
    // ReactGA.pageview(window.location.pathname + window.location.search);
  },[])

App.js의 useEffect에이 코드를 넣어주었다.

이제 사용자가 어떤 페이지에 들어갔는지가 추적된다.

 

 

import ReactGA from 'react-ga';

ReactGA.event({
  category: 'User',
  action: 'Created an Account'
});
ReactGA.exception({
  description: 'An error ocurred',
  fatal: true
});

이것도 App.js의 바깥에다가 넣어주었는데 무슨뜻인지는 잘 모르겠다.

 

 

 

 

 

5. 버튼에 이벤트 주기

 

   <ImgWrapper 
              onClick={()=>{
                goToUserFeed(user.id);

                ReactGA.event({
                  category: "Button",
                  action: "go to other's profile",
                  label: "profile",
                });
              }}>

컴포넌트의 onClick에 이렇게 ga이벤트를 넣어주었다.

 

그러면 행동-> 이벤트-> 개요에서 이런 데이터들이나온다.

 

처음에는 이런게 추적이 안되는 문제점이 있었는데

그것은 웹사이트가 https로 바뀌고 나서 해결되었다.