React 에 Google Analytics 적용

분석으로 무엇을 할 수 있습니까?

• 사용자가 살고 있는 지역에 대한 통찰력을 얻을 수 있습니다.
• 어떤 연령대가 귀하의 비즈니스에 더 관심이 있는지 이해할 수 있습니다.
• 평균적으로 얼마나 많은 시간을 소비하는지 추적
• 신규 사용자 획득률 추적
• 수익 추적

개발자로서 얻을 수 있는 이점

• 애플리케이션에 버그가 있는지 추적할 수 있습니다.
• 사용자 관심에 따라 최적화할 수 있습니다.

따라서 개발자 또는 비즈니스의 규모가 아무리 작아도 웹사이트에 Analytics를 통합해야 합니다. Analytics는 완전 무료이며 설정이 정말 쉽기 때문입니다.

 

Step 1. Install Dependencies

yarn add react-ga

 

Step 2. Setup Analytics Inside Project

App.js 파일에 다음 코드를 추가하십시오.

import ReactGA from 'react-ga';
const TRACKING_ID = "UA-12341234-1"; // YOUR_OWN_TRACKING_ID
ReactGA.initialize(TRACKING_ID);

 

Step 3. Integration With React Router

해당 컴포넌트를 app.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);