웹사이트를 운영하거나 프론트엔드 개발을 하다 보면,
방문자가 얼마나 오는지, 어떤 페이지를 많이 보는지 궁금해지곤 하죠.
그럴 때 꼭 필요한 도구가 바로 **Google Analytics(구글 애널리틱스)**입니다.
이번 포스팅에서는 개인 블로그나 포트폴리오 페이지에 GA를 처음 연결하는 방법을 정리해봤습니다.
✅ 1. 구글 애널리틱스(GA)란?
웹사이트에 누가, 언제, 어디서, 어떻게 들어왔는지를 추적하고 시각화해주는 도구입니다.
무료로 제공되며, GA4 버전이 현재 기준 최신 버전입니다.
(2023년부로 기존 UA는 중단되었습니다.)
✅ 2. GA4 연결 순서 요약
🟢 Step 1: 구글 애널리틱스 접속
Redirecting...
analytics.google.com
🟢 Step 2: 계정 및 속성 생성
- 계정 이름: 내 블로그나 웹사이트 이름 (예: myportfolio)
- 속성 이름: 포트폴리오 사이트, 시간대/통화 설정
🟢 Step 3: 데이터 스트림 생성
- 플랫폼 선택: 웹(Web)
- 웹사이트 URL 입력 (예: https://myportfolio.com)
- 스트림 이름은 편하게 설정 (예: Main Web)
🟢 Step 4: 측정 ID 확인 및 복사
- G-XXXXXXX 형식의 측정 ID가 생성됩니다.
✅ 3. HTML에 코드 삽입
<head> 태그 안에 아래 스크립트 코드를 삽입합니다.
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXX');
</script>✔️ G-XXXXXXX 부분은 내 측정 ID로 교체!
✅ 4. 연결 확인
- GA 대시보드로 이동
- 실시간(Real-time) 메뉴에서 접속자 수 확인
- 접속 중인 브라우저에서 새로고침하면 실시간 접속자가 1명으로 표시됩니다.
반응이 없다면 코드 삽입 위치나 ID가 정확한지 다시 확인해주세요!
📎 참고 자료
📝 마무리하며
이번 글에서는 구글 애널리틱스(GA4)를 웹사이트에 연결하는 기본 과정을 정리해봤습니다.
코드를 <head>에 넣는 것만으로도, 방문자 수, 접속 경로, 페이지 뷰 등 다양한 데이터를 확인할 수 있습니다.
저처럼 프론트엔드 개발을 준비하시는 분들께 조금이나마 도움이 되셨길 바랍니다 😊
'프론트엔드 공부 > 웹 분석 & 툴' 카테고리의 다른 글
| 🌐 오픈그래프(Open Graph)란? | 소셜 공유 미리보기 설정 방법 (0) | 2025.04.06 |
|---|