# 구글 애널리틱스(Google Analytics) 사용법 – 개발자도 꼭 알아야 할 이유와 실전 적용법
요즘은 개발자도 데이터에 민감해야 합니다.
페이지가 얼마나 자주 방문되는지, 유저가 어디에서 이탈하는지, 어떤 버튼을 자주 누르는지…
이런 것들을 알아야 사용자 경험을 개선하고, 의미 있는 기능을 더 잘 설계할 수 있거든요.
그래서 오늘은 제가 실제로 써보면서 익힌 **구글 애널리틱스 사용법**을 정리해보려고 해요.
초보자도 이해할 수 있도록, 너무 마케팅 용어에 치우치지 않고, 실무 중심으로 정리해봤습니다.
---
## 1. 구글 애널리틱스란?
**구글 애널리틱스(Google Analytics)**는
웹사이트의 방문자 데이터를 수집·분석해주는 무료 서비스입니다.
- 얼마나 많은 사용자가 내 웹사이트에 오는지
- 방문자는 어디에서 왔는지 (검색, 직접 접속, SNS 등)
- 어떤 페이지를 가장 오래 보았는지
- 어느 시점에서 이탈했는지
- 어떤 기기나 브라우저를 쓰는지
이런 것들을 다 보여줍니다.
예전에는 단순히 “몇 명 들어왔는가?”만 봤다면,
이제는 “들어온 사람들이 뭘 했는가?”까지 다 확인할 수 있어요.
---
## 2. GA4로 시작하기
현재 구글 애널리틱스는 **GA4(Google Analytics 4)** 버전이 기본입니다.
예전의 Universal Analytics는 2023년부로 종료되었기 때문에, GA4 기준으로 설명드릴게요.
### 2-1. GA4 속성 생성
1. [Google Analytics](https://analytics.google.com/)에 접속
2. 계정 만들기 → 속성 만들기
3. 웹사이트 URL 입력
4. 비즈니스 정보 입력
5. **데이터 스트림**에서 웹 선택 → 추적 ID 확인
> **중요!**
> GA4는 예전처럼 추적 ID(`UA-xxxx`)가 아닌, `G-`로 시작하는 **측정 ID(Measurement ID)**를 사용합니다.
> 예: `G-ABCD1234EF`
---
## 3. 웹사이트에 GA4 삽입하기
웹사이트 코드에 GA4 스크립트를 삽입해야 데이터가 수집됩니다.
### 3-1. HTML에 직접 삽입 (가장 기본 방식)
```html
<!-- head 태그 안에 삽입 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ABCD1234EF"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ABCD1234EF');
</script>
3-2. React에서 사용하기
index.html에 삽입해도 되지만, SPA 특성상 페이지 전환이 URL 변경만으로 이루어지기 때문에, 라우터 이벤트를 추적하는 것이 중요합니다.
// 예시: React Router + useEffect
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
const usePageTracking = () => {
const location = useLocation();
useEffect(() => {
window.gtag('config', 'G-ABCD1234EF', {
page_path: location.pathname,
});
}, [location]);
};
export default usePageTracking;
⸻
4. 내가 원하는 이벤트 추적하기 (커스텀 이벤트)
GA4는 단순 페이지뷰 외에도 사용자 행동 이벤트를 자유롭게 추가할 수 있어요.
예를 들어, 어떤 버튼이 얼마나 눌렸는지 추적하고 싶다면?
gtag('event', 'button_click', {
event_category: 'UI Interaction',
event_label: 'Join Button',
});
React 예시:
const handleClick = () => {
window.gtag('event', 'button_click', {
event_category: 'CTA',
event_label: 'apply_now',
});
};
그리고 이 이벤트는 GA4 > 이벤트 보고서에서 확인할 수 있습니다.
⸻
5. 내가 실제로 활용한 사례
제가 진행한 프로젝트에서는 GA4를 이렇게 활용했어요:
• 메인 CTA 버튼 클릭률 확인 → 위치 변경으로 클릭률 30% 증가
• 특정 기능 진입 경로 분석 → 복잡한 절차 단순화
• 모바일/PC 비율 분석 → 반응형 우선순위 설정
• 특정 페이지 체류 시간 확인 → 콘텐츠 길이 최적화
단순히 “몇 명 봤어”가 아니라,
**“어떤 기능이 주목받았고, 어디서 이탈했는가”**를 알 수 있어서 정말 유용했어요.
⸻
6. 자주 하는 실수
• SPA인데 페이지뷰가 제대로 안 잡힘: 라우터 이동 시마다 gtag('config') 호출 필요
• 버튼 이벤트 누락: 클릭 이벤트 넣고 배포했지만, gtag가 정의 안 되어 있는 경우 (스크립트 삽입 확인)
• 콘솔 에러: GA4 스크립트보다 이벤트 코드가 먼저 실행될 때 발생
⸻
마치며
구글 애널리틱스는 단순한 트래픽 측정을 넘어,
사용자 경험 개선의 단서를 주는 도구입니다.
특히 프론트엔드 개발자 입장에서는
기능의 효과를 데이터로 증명할 수 있다는 점에서 꼭 활용해볼 만해요.
처음엔 다소 낯설 수 있지만,
한 번 적용해보고 결과를 보면 분명 “오, 이거 유용하다”는 느낌이 드실 거예요.
데이터를 보는 눈이 개발자의 레벨을 결정짓는 시대—
구글 애널리틱스로 시작해보세요!