hufspnp.com 웹 배포 - 2 (google analytics UA)

이전 포스트: https://heo-seongil.tistory.com/139

hufspnp.com 웹 배포 -1 (nginx & react & https & certbot)

안녕하세요 이전 포스트에서 PnP 홈페이지 웹 배포하는 과정을 설명해드렸습니다. 이번 포스트에서는 해당 웹에 방문하는 클라이언트의 데이터를 측정할 수 있는 Google Analytics를 연결하는 과정을 설명하겠습니다. 언제든지 오류가 있다고 생각되시면 연락주세요.

 

이전에 했던 작업을 기록하면서 확인해보니 아래와 같은 메시지가 있었다. 2023년 7월 1일부터 새로운 속성을 적용해야 된다고 한다... 우선 했던 작업을 기록하고 다음 포스트에 Google analytics 4를 연결해보겠다.

Contents

1. Google Analytics란

2. Google Analytics 속성 만들기

3. React 프로젝트 연결하기

1. Google Analytics란

우선 Google Analytics는 웹 사이트 트랙픽을 추적하고 보고하는 Google에서 제공하는 웹 분석 서비스 입니다. 연결이 완성되면 아래와 같은 다양한 데이터를 확인할 수 있습니다. 그중에서 저는 기기별 방문자 비율, 페이지별 방문자 수, 사이트 내 방문자 이동 흐름 등의 데이터를 종종 확인합니다. 현재 PnP 홈페이지에서는 학회원, 학회성과 페이지의 방문자 수가 가장 많네요. 실시간으로 방문자 수도 확인할 수 있습니다! 처음 신입생들에게 홈페이지 uri 공개하고 실시간 방문자 수를 확인하고 싶었는데 일이 밀려서 바로 연결을 못해서 조금 아쉬웠네요.

그럼 시작해보겠습니다.

2. Google Analytics 속성 만들기

지금 사용하는 계정에서는 여러 계정이 연결되어 있기 때문에 캡쳐화면은 새로운 계정에서 진행한 자료입니다.

구글 애널리틱스: https://analytics.google.com/analytics/web/provision/#/provision

애널리틱스에 들어가면 아래와 같은 화면을 볼 수 있습니다.

측정 시작을 누르고 계정 설정, 속성 설정, 비즈니스 정보를 입력합니다.

이제 속성이 생기면 웹을 선택하고 자신의 사이트의 url 및 기타 정보를 입력해서 데이터 스트림을 만든다.

이제 우측 메뉴에서 추적 코드 부분을 확인한다. 이 부분에서 잠시 참을 열어놓고 서버에서 작업을 이어서 진행한다.

3. React 프로젝트 연결하기

처음엔 다른 자료를 참고해서 진행했는데 이 포스트를 작성하기 위해 찾아보니 연결하는 방법은 다양한 것 같다. 

1. gtag.js (바로 위의 사진 참고)

2. google 태그 관리자 (바로 위의 사진 참고)

3. 그리고 react-ga를 이용해서 react에서 직접 api 전송하기 

1,2,3번을 모두 해보았는데 react의 특성상 1,2 보다 3이 더 적절하다고 판단된다. 참고자료에서 Mohammad Faisal님의 자료를 보면 설명되어 있다. 그래서 이 자료를 참고해서 진행했다. 자세한 설명을 보고 싶으면 읽어보길 바란다.

 

먼저 npm으로 react-ga 패키지를 설치한다.

$ npm install react-ga --save

자신의 React프로젝트에서 index.js 파일에 설치한 react-ga를 import하고 아래와 같이 자신의 추적 ID를 입력한다. (여기서 부터 Add! 부분을 추가해주면 된다.)

// Project > src > index.js

...
import ReactGA from 'react-ga'; // Add!

ReactGA.initialize("UX-XXXXXXXXX-X"); // Add!

ReactDOM.render(
...

이번에 src > components 디렉토리에 RouterChangeTracker.js파일을 생성해서 아래와 같이 작성한다. 

여기에서 set을 왜 해주는지 모르겠다. set을 지우고 테스트 해봤는데 문제없이 작동한다.

set은 npm 메뉴얼을 확인해보면 아래와 같이 나와있다. custom dimensions, 이것을 찾아보니 속성에서 한국어로 맞춤 정의로 되어 있다. 이것을 이용하기 위해서 하는 것인데 여기서 왜 나오는지 모르겠다. 없어도 되는 것 같다ㅎㅎ

ReactGA.set(fieldsObject)
This will set the values of custom dimensions in Google Analytics.

// Project > src > components > RouterChangeTracker.js

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);

위에서 만든 component를 App.js를 추가해준다.

// Project > src > App.js

...
import RouteChangeTracker from './components/RouteChangeTracker'; // Add!

const App = () => {
		...
        ...
      <RouteChangeTracker /> // Add!
    </div>
  )
};

export default App;

이제 수정된 React프로젝트를 다시 build해준다.

$ npm run build

그럼 위에서 본 구글 애널리틱스를 데이터를 확인할 수 있을 것이다.

끝!

참고자료

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

react-ga

react-ga api documentation: https://npmdoc.github.io/node-npmdoc-react-ga/build/apidoc.html

https://npmdoc.github.io/node-npmdoc-react-ga/build/apidoc.html

Google Analytics, how to set? by Mohammad Faisal: 

https://javascript.plainenglish.io/how-to-setup-and-add-google-analytics-to-your-react-app-fd361f47ac7b

How to Setup and Add Google Analytics to your React App

JS location.pathname: https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname

Location: pathname - Web APIs | MDN