Google Analytics - 구글 애널리틱스

구글 아날리틱스 관리 바로가기

https://analytics.google.com/analytics/web/?hl=ko#/p462237129/reports/intelligenthome

Redirecting...

analytics.google.com

사용자 권한 (IAM) 설정 바로가기

https://console.cloud.google.com/iam-admin/iam?hl=ko&inv=1&invt=Ab32Pg

Google 클라우드 플랫폼

로그인 Google 클라우드 플랫폼으로 이동

accounts.google.com

📊 목차

📈 구글 아날리틱스 도입 배경

GA4란?

GA4(Google Analytics 4)는 구글이 제공하는 최신 웹 및 앱 통합 분석 도구입니다. 이전 버전인 **Universal Analytics(UA)**를 대체하는 차세대 플랫폼이며, 2023년 7월부터 UA는 더 이상 데이터 수집을 하지 않고 GA4로 전환되었습니다.

기존 UA는 '세션 기반'이었으나, GA4는 모든 활동을 '이벤트(event)'로 기록합니다. 클릭, 페이지뷰, 스크롤, 구매 등 모든 것을 이벤트로 추적합니다.

왜 GA4를 선택했는가?

추적 코드가 삽입되고 고객이 웹페이지에 방문하면 데이터는 구글 서버로 전송됩니다. 전송된 데이터를 바로 확인하는 방법은 실시간 보고서가 유일합니다. 구글 애널리틱스 기본 보고서에서는 데이터는 서버에 적재되고 처리 시간을 거쳐 약4시간 뒤에 보고서에서 확인이 가능합니다. 만약 데이터의 양이 엄청나게 많다면 하루가 걸리는 경우도 있습니다. 거의 흔치 않은 일이지만요. 일 평균 사용자가 100만을 넘지 않은 이상 24시간 이내에 확인이 됩니다.

실시간 데이터 분석
- 사용자 행동 패턴 실시간 모니터링
- 즉각적인 서비스 개선점 파악
무료 서비스
- 비용 효율적인 웹 분석 솔루션
- 스타트업에 적합한 가격 정책
강력한 API 지원
- Google Analytics Data API v1 Beta
- 서버 사이드 데이터 추출 가능
관리자 대시보드 통합
- 기존 관리자 페이지와 seamless 통합
- 사용자 경험 향상

🛠️ 기술적 구현

1. 의존성 설정 (pom.xml)

<!-- Google Analytics Data API -->
<dependency>
    <groupId>com.google.analytics</groupId>
    <artifactId>google-analytics-data</artifactId>
</dependency>

<!-- Google Auth Library -->
<dependency>
    <groupId>com.google.auth</groupId>
    <artifactId>google-auth-library-oauth2-http</artifactId>
</dependency>

2. 설정 파일 (application.properties)

# Google Analytics 4 설정
ga4.property-id= 프로퍼티 아이디
ga4.key-path=서비스 계정 키 파일의 위치를 지정한 키 파일

3. GA4 설정 클래스

@Configuration
public class GoogleAnalyticsConfig {

    @Value("${ga4.property-id}")
    private String propertyId;

    @Value("${ga4.key-path:JSON 파일 경로}")
    private String keyPath;

    @Bean(destroyMethod = "close")
    public BetaAnalyticsDataClient betaAnalyticsDataClient() throws IOException {
        GoogleCredentials credentials =
            GoogleCredentials.fromStream(resourceLoader.getResource(keyPath).getInputStream());

        BetaAnalyticsDataSettings settings = BetaAnalyticsDataSettings.newBuilder()
            .setCredentialsProvider(FixedCredentialsProvider.create(credentials))
            .build();

        return BetaAnalyticsDataClient.create(settings);
    }
}

🔧 주요 기능

  <script async src="https://www.googletagmanager.com/gtag/js?id=G-아이디"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-DM74PW9GTF', {'debug_mode' : true});
    </script>

1. 도시별 활성 사용자 분석

public List<ReportRowDto> getActiveUsersByCity(LocalDate from, LocalDate to) {
    RunReportRequest req = RunReportRequest.newBuilder()
        .setProperty("properties/" + ga4PropertyId)
        .addDimensions(Dimension.newBuilder().setName("city"))
        .addMetrics(Metric.newBuilder().setName("activeUsers"))
        .addDateRanges(DateRange.newBuilder()
            .setStartDate(from.toString())
            .setEndDate(to.toString()))
        .build();

    RunReportResponse res = gaClient.runReport(req);
    return res.getRowsList().stream()
        .map(r -> new ReportRowDto(
            r.getDimensionValues(0).getValue(),
            Long.parseLong(r.getMetricValues(0).getValue())))
        .collect(Collectors.toList());
}

2. 실시간 사용자 분석 / 나라

public List<ReportRowDto> getRealtimeUsersByCountry() {
    RunRealtimeReportRequest req = RunRealtimeReportRequest.newBuilder()
        .setProperty("properties/" + ga4PropertyId)
        .addDimensions(Dimension.newBuilder().setName("country"))
        .addMetrics(Metric.newBuilder().setName("activeUsers"))
        .build();

    RunRealtimeReportResponse res = gaClient.runRealtimeReport(req);
    return res.getRowsList().stream()
        .map(r -> new ReportRowDto(
            r.getDimensionValues(0).getValue(),
            Long.parseLong(r.getMetricValues(0).getValue())))
        .collect(Collectors.toList());
}

3. 일별 총 사용자 및 누적 통계

public List<DailyUsersDto> getDailyTotalUsers(LocalDate from, LocalDate to) {
    RunReportRequest req = RunReportRequest.newBuilder()
        .setProperty("properties/" + ga4PropertyId)
        .addDimensions(Dimension.newBuilder().setName("date"))
        .addMetrics(Metric.newBuilder().setName("totalUsers"))
        .addDateRanges(DateRange.newBuilder()
            .setStartDate(from.toString())
            .setEndDate(to.toString()))
        .addOrderBys(OrderBy.newBuilder()
            .setDimension(OrderBy.DimensionOrderBy.newBuilder()
                .setDimensionName("date"))
            .setDesc(false))
        .build();

    // 누적 계산 로직
    long cumulative = 0;
    for (Row row : res.getRowsList()) {
        LocalDate date = LocalDate.parse(row.getDimensionValues(0).getValue(), fmt);
        long daily = Long.parseLong(row.getMetricValues(0).getValue());
        cumulative += daily;
        list.add(new DailyUsersDto(date, daily, cumulative));
    }
}

🔄 데이터 흐름

사용자 웹사이트 방문
        ↓
GA4 자동 데이터 수집
        ↓
Google Analytics Data API
        ↓
AnalyticsService (Spring)
        ↓
AdminHomeController
        ↓
관리자 대시보드 (JSP)
        ↓
Chart.js로 시각화

API 엔드포인트

엔드포인트 기능 반환 데이터

/admin/active-users	도시별 활성 사용자	JSON
/admin/daily-users	일별 총 사용자	JSON
/admin/home	관리자 대시보드	JSP

📊 관리자 대시보드

1. 방문자 추이 차트

// 차트 데이터 로드
$.getJSON(ctx + '/admin/daily-users', {date: period}, data => {
    const labels = data.map(d => d.date);
    const counts = data.map(d => d.daily);

    signupChart = new Chart(c, {
        type: 'line',
        data: {
            labels,
            datasets: [{
                label: '방문자 수',
                data: counts,
                fill: true,
                tension: 0.3
            }]
        },
        options: {
            responsive: true,
            plugins: {legend: {display: false}},
            scales: {y: {beginAtZero: true}}
        }
    });
});

2. 필터링 기능

연간/월간/일간 데이터 조회
실시간 사용자 현황
누적 방문자 수 표시

3. 시각적 요소

📈 선형 차트: 방문자 추이
🎨 Bootstrap 5: 모던한 UI
📱 반응형 디자인: 모바일 지원
🎯 실시간 업데이트: AJAX 기반

🔐 설정 및 보안

1. 서비스 계정 키

{
  "type": "service_account",
  "project_id": "project_ID",
  "private_key_id": "비밀 키",
  "client_email": "analytics@goyo-415004.iam.gserviceaccount.com",
  "client_id": "클라이언트 아이디"
}

2. 보안 고려사항

✅ 서비스 계정 키: classpath에 안전하게 저장
✅ Property ID: 환경변수로 관리
✅ HTTPS: 모든 통신 암호화
✅ 권한 분리: 관리자만 접근 가능

3. 설정 파일 구조

src/main/resources/
├── application.properties    # GA4 설정
├── goyo-415004-a06976a1469f.json  # 서비스 계정 키
└── kr/co/solfood/
    └── admin/              # 관리자 매퍼

📈 성과 및 활용

1. 데이터 활용 방안

사용자 행동 분석: 가장 인기 있는 페이지 파악
지역별 마케팅: 홍대 지역 사용자 집중도 분석
서비스 개선: 사용자 이탈 지점 식별
비즈니스 인사이트: 수익성 높은 기능 우선순위 결정

2. 실시간 모니터링

서버 상태: 트래픽 급증 시 대응
사용자 경험: 페이지 로딩 시간 최적화
마케팅 효과: 캠페인 성과 측정

3. 향후 발전 방향

고급 세그멘테이션: 사용자 그룹별 분석
커스텀 이벤트: 비즈니스 특화 지표
A/B 테스트: 기능 개선 효과 측정
예측 분석: 사용자 행동 예측

🎯 결론

구현 성과

완전한 GA4 통합: 서버 사이드 API 활용
실시간 대시보드: 관리자 효율성 증대
확장 가능한 아키텍처: 향후 기능 확장 용이
보안 강화: 안전한 인증 시스템

기술적 가치

Spring Boot 통합: 기존 아키텍처와 seamless 연동
RESTful API: 표준화된 데이터 교환
차트 시각화: 직관적인 데이터 표현
반응형 UI: 모든 디바이스 지원

비즈니스 가치

데이터 기반 의사결정: 객관적 지표 활용
사용자 경험 개선: 행동 패턴 분석
마케팅 최적화: 타겟팅 정확도 향상
운영 효율성: 실시간 모니터링

728x90

'Study' 카테고리의 다른 글

Pagination - 페이지네이션 (3)	2025.07.27
오목 구현해보기 (0)	2025.04.20
정보 처리 기사 실기 용어 정리 (0)	2025.04.16
3월 4째주 기록 (0)	2025.03.28
3월 3째주 기록 (0)	2025.03.17

지원 공부방

Google Analytics - 구글 애널리틱스

구글 아날리틱스 관리 바로가기

사용자 권한 (IAM) 설정 바로가기

📊 목차

📈 구글 아날리틱스 도입 배경

GA4란?

왜 GA4를 선택했는가?

🛠️ 기술적 구현

1. 의존성 설정 (pom.xml)

2. 설정 파일 (application.properties)

3. GA4 설정 클래스

🔧 주요 기능

1. 도시별 활성 사용자 분석

2. 실시간 사용자 분석 / 나라

3. 일별 총 사용자 및 누적 통계

🔄 데이터 흐름

API 엔드포인트

📊 관리자 대시보드

1. 방문자 추이 차트

2. 필터링 기능

3. 시각적 요소

🔐 설정 및 보안

1. 서비스 계정 키

2. 보안 고려사항

3. 설정 파일 구조

📈 성과 및 활용

1. 데이터 활용 방안

2. 실시간 모니터링

3. 향후 발전 방향

🎯 결론

구현 성과

기술적 가치

비즈니스 가치

'Study' 카테고리의 다른 글

티스토리툴바

Google Analytics - 구글 애널리틱스

구글 아날리틱스 관리 바로가기

사용자 권한 (IAM) 설정 바로가기

📊 목차

📈 구글 아날리틱스 도입 배경

GA4란?

왜 GA4를 선택했는가?

🛠️ 기술적 구현

1. 의존성 설정 (pom.xml)

2. 설정 파일 (application.properties)

3. GA4 설정 클래스

🔧 주요 기능

1. 도시별 활성 사용자 분석

2. 실시간 사용자 분석 / 나라

3. 일별 총 사용자 및 누적 통계

🔄 데이터 흐름

API 엔드포인트

📊 관리자 대시보드

1. 방문자 추이 차트

2. 필터링 기능

3. 시각적 요소

🔐 설정 및 보안

1. 서비스 계정 키

2. 보안 고려사항

3. 설정 파일 구조

📈 성과 및 활용

1. 데이터 활용 방안

2. 실시간 모니터링

3. 향후 발전 방향

🎯 결론

구현 성과

기술적 가치

비즈니스 가치

'Study' 카테고리의 다른 글

관련글

티스토리툴바