[React.js] GA4(Google Analytics 4) - ①연동하기

slight-snow·2024년 1월 23일

React

목록 보기

2/3

React.js 프로젝트를 마무리하고 배포된 웹사이트에서 이용자들의 조회수,
방문했을 때 평균적으로 머무르는 시간 등을 확인할 수 있는 방법을 찾아보다가
구글 애널리틱스 4(Google Analytics 4, GA4)를 발견했다.

📌구글 애널리틱스(Google Analytics)란?

구글 애널리틱스는 2005년부터 구글에서 무료로 제공하기 시작한 서비스로,
웹사이트와 연동시켜두면 웹사이트 이용자들의 유입 경로나 액션, 이벤트 등에 관한
정보들을 수집 및 분석할 수 있도록 해주는 웹 로그분석 툴이다.

2005년에 GA1(Urchin), 2008년에 GA2(Classic), 2013년에 GA3(Universal)
이렇게 3번째 업데이트 이후로 2020년 GA4까지 등장하게 되었다.

📌구글 애널리틱스(Google Analytics) 연동 방법

🧩 구체적인 연동 과정

구글 애널리틱스(GA)로 접속하여 절차에 따라 요구되는 입력사항을 채우고,
프로젝트에 코드를 심어주면 금방 웹사이트와 GA를 연동시킬 수 있다!

위의 링크로 접속하여 GA 관리자로 둘 계정으로 로그인한 다음,
[측정 시작] 버튼을 눌러 설정을 시작한다.

Google Analytics 01

계정 이름(필수)란에 관리자명이나 원하는 이름을 자유롭게 입력하고
하단의 옵션을 선택적으로 체크한다. *필자는 기본 체크박스 그대로 진행

Google Analytics 02

이번에도 마찬가지로 프로젝트명이나 원하는 속성 이름을 자유롭게 입력하고
보고 시간대는 '대한민국 / (그리니치 표준시 +09:00) 대한민국 시간'으로,
통화는 '대한민국 원(￦)'으로 설정해주도록 한다.

* [고급 옵션 보기]를 누르면, 아래와 같이 [유니버셜 애널리틱스 속성 만들기] 칸이
하단에 나타나는데 지금부터 GA에 연동한다면 이전 버전보다는 현재, 차세대 버전을
이용하는 것이 안정적이기에 체크하지 않는 것을 추천한다.

Google Analytics 03

프로젝트와 관련된 업종의 카테고리와 규모를 설정해주도록 한다.

Google Analytics 04

비즈니스 목표를 설정해주도록 한다.
필자는 이용자의 조회수나 유입경로를 분석하기 위해 해당 목표를 선택했으나,
다른 것을 선택한다고 하여 이용할 수 있는 서비스에 차질이 생기는 것도 아니니
마음 편하게 고르면 될 듯하다.

Google Analytics 05

비즈니스 목표를 설정하고 [만들기] 버튼을 누르면 아래와 같은 약관 계약서가 모달로 등장한다.
드롭다운을 열어 국가를 '대한민국'으로 설정하고 체크박스를 누른 뒤 [동의함]을 눌러준다.

Google Analytics 06

웹사이트의 데이터를 수집할 것이기 때문에, 플랫폼 선택에서 '웹'을 선택해준다.

Google Analytics 07

배포한 웹사이트의 URL을 입력하고, 해당 웹사이트의 명칭을 입력한 다음
[스트림 만들기]를 눌러 다음 단계로 넘어간다.

* 향상된 측정 옵션은 이용자들의 세부 인터랙션 등을 수집하는 데 이용되기 때문에,
불가피한 경우가 아니라면 그대로 활성화된 상태로 진행하도록 한다.

Google Analytics 08

스트림을 만들면 스트림의 세부정보가 나타나면서 상단에 [태그 안내 보기] 버튼이 보일 것이다.
해당 버튼을 눌러서 웹사이트에 설치하는 단계로 넘어간다.
이제 정말 거의 다 왔다!

Google Analytics 09

[직접 설치] 탭을 누르면 아래와 같은 코드가 나타나고,
해당 코드를 어디 붙여넣으면 되는지 친절하게 설명까지 해준다.

React.js의 경우, 프로젝트 내의 public 폴더에 index.html이 기본적으로 내장되어 있다.

Google Analytics 10

React.js의 public\index.html 에서 구글의 설명대로 <head> 태그 바로 다음에 붙여넣도록 한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <!-- 이곳에 위의 Google 태그를 삽입해준다 -->
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-TXHDDPB10J"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXX00X');
  </script>
  <!-------------------------------------->
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

웹사이트에 GA 설치가 끝났다!
성공적으로 해당 Google 코드를 삽입해주었다면, 빌드 후 배포환경에 적용하여
[테스트] 버튼을 눌러 코드가 정상적으로 삽입되었는지, GA에서 인식할 수 있는지 확인할 수 있다.

* '웹사이트에서 Google 태그가 감지되지 않았습니다.' 라는 문구가 나타난다면,
측정 ID(G-XXXXXXX00X)에 오타는 없는지, 코드가 안내된 위치에 입력되어있는지 다시 확인한다.