[토이프로젝트] React에서 google anlytics 연동

본 포스팅에서는 사이드프로젝트 스케치데브를 개발하며 경험한 구글 애널리틱스를 연동하는 법을 설명하고 있습니다.

스케치데브가 궁금하시다면: https://sketchdev.kr

스케치데브 - 개발자 캐치마인드

 

 

지난 포스팅에서 호기롭게 google analytics 를 연동했지만, 아쉽게도 페이지별로 추적할 수 없었습니다.

react에선 google analytics를 다른 방법으로 연동해야 하는 것 같습니다.

 

 

React-ga 설치

$ npm i react-ga

누군가 개쩌는 라이브러리를 만들어줬습니다.

사용합시다.

 

index.js에 연동

import ReactGA from 'react-ga';

ReactGA.initialize("UA-12341234-1");

 

주의!

react-ga 라이브러리는 현재 이전 버전인 유니버설 애널리틱스만 가능합니다. 

속성에서 유니버설 애널리틱스 속성을 사용해야합니다. 

 

Custom Event

• 퀴즈 진입

ReactGA.event({
  category: 'Quiz',
  action: 'Started'
});

ReactGA.event({
  category: 'Quiz',
  action: `Started ${quizNumber}`
});

• 퀴즈 성공

ReactGA.event({
  category: 'Quiz',
  action: `Success ${answer}`
});

• 퀴즈 실패

ReactGA.event({
  category: 'Quiz',
  action: `Fail ${answer}`
});

• 결과 공유

ReactGA.event({
  category: 'result',
  action: `Share`
});

 

React Router와 연동

우리 유저가 어떤 페이지를 많이 사용하는지 알고 싶죠. 하지만 React같은 CSR 라이브러리에서 이는 어렵습니다. React가 오직 한 HTML파일만 로드하니까요.

하지만 요령은 있죠. 우리는 보통 react-router-dom을 활용할텐데요 이 라이브러리가 HOC을 제공해서 URL 변경을 감지할 수 있습니다.

즉 우리는 URL 데이터를 바꾸는 걸 구글 애널리틱스에 전달해서 어떤 페이지를 많이 방문하는지 알 수 있습니다.

이제 RouteChangeTracker 컴포넌트를 만들어봅시다.

import React from 'react'
import { withRouter } from 'react-router-dom';
import ReactGA from 'react-ga';
const RouteChangeTracker = ({ history }) => {

    history.listen((location, action) => {
        ReactGA.set({ page: location.pathname });
        ReactGA.pageview(location.pathname);
    });

    return <div></div>;
};

export default withRouter(RouteChangeTracker);

App.js에 연동시키는 것 잊지 맙시다!

 

 

 

이제 드디어 google analytics 연동이 끝이 난 것 같습니다.

함께 읽으면 좋은 글

• [토이프로젝트] Google Analytics 연동하는 법

[토이프로젝트] Google Analytics 연동하는 법