[튜토리얼]

Google Analytics 사용법

---

웹 페이지를 배포를 하고 방문자 통계를 보고싶어서 로그를 남기는 기능을 넣고싶었다.

---

간단한 사용법 부터

1. Google 애널리틱스(Google Analytics): Google 애널리틱스는 웹 사이트의 방문자 추적 및 통계를 제공하는 무료 도구입니다. 사용자 행동을 추적하고 데이터를 수집하여 보고서를 생성할 수 있습니다. 리액트 앱에서 Google 애널리틱스를 사용하려면 다음 단계를 수행해야 합니다.

2. Google 애널리틱스에 계정을 만들고 웹 속성을 생성합니다.
   생성된 추적 ID(Tracking ID)를 리액트 앱에 추가합니다. 예를 들어, react-ga 라이브러리를 사용하여 Google 애널리틱스를 통합할 수 있습니다.
   Plausible Analytics: Plausible Analytics는 경량 웹 애널리틱스 도구로, 개인 정보 보호에 중점을 둡니다. 클라이언트 측 자바스크립트 코드를 사용하여 사용자 행동을 추적하고 데이터를 수집합니다. 리액트 앱에서 Plausible Analytics를 사용하려면 다음 단계를 수행해야 합니다.

3. Plausible Analytics 웹 사이트에 접속하여 계정을 만듭니다.
   생성된 자바스크립트 스니펫을 리액트 앱의 index.html 파일에 추가합니다.
   자체 방문자 추적: 로그인이나 사용자 인증을 요구하지 않는 경우, 클라이언트 측에서 고유한 식별자를 생성하여 로컬 스토리지나 쿠키에 저장할 수 있습니다. 이 방법은 단순한 방문자 수를 추적하거나 방문자의 활동을 자세히 분석하는 것은 아니지만, 간단한 방문자 기록을 남길 수 있습니다.

리액트 앱에서 유니크한 식별자를 생성하고 로컬 스토리지 또는 쿠키에 저장합니다.
사용자가 앱을 방문할 때마다 해당 식별자를 확인하고 기록합니다.

---

Google Analytics 시작

URL : https://analytics.google.com/analytics/web/

1. 로그인 & 가입 후 홈 화면에서 설정 -> 속성 만들기

2. 속성이름 등 설정

3. 비즈니스 세부정보 입력

4. 비즈니스 목표 선택

5. 플랫폼을 선택

6. 데이터 스트림 설정 나의 웹 페이지 주소와 이름을 적는다.

7. 스트림 URL , 스트림 ID , 측정 ID 가 부여된다. 측정 ID는 꼭 메모

8. 직접 설치를 선택하여 해당 프로젝트의 index.html 의 head 부분에 붙여넣기 해준다.

---

코드 입력

저는 프로젝트폴더 내에 analytics.js 를 만들었습니다.

analytics.js

import ReactGA from 'react-ga';

export const initGA = () => {
  ReactGA.initialize(process.env.REACT_APP_ANALYTICS_ID); // 여기에 Google 애널리틱스 추적 ID를 입력
};

export const logPageView = () => {
  ReactGA.pageview(window.location.pathname + window.location.search);
};

App.js

App.js에서 위에 만든걸 불러온다. 우선 initGA, logPageView를 import 해준다.

import { initGA, logPageView } from './analytics';

밑에 useEffect를 작성하고 코드입력

  useEffect(() => {
    initGA(); // Google 애널리틱스 초기화
    logPageView(); // 페이지 뷰 추적
  }, []);

---

결과

---