Vercel Analytics 설정 및 활용 가이드

Introduction

Vercel Analytics는 웹 애플리케이션의 성능을 실시간으로 모니터링하는 강력한 도구입니다. 이번 포스트에서는 Vercel Analytics를 설정하고 활용하는 방법을 살펴보겠습니다.

Environment

npm list @vercel/analytics
# @vercel/analytics@1.2.0

npm list @vercel/speed-insights
# @vercel/speed-insights@1.0.0

# Vercel 대시보드에서 Analytics 탭 확인

Problem

웹 애플리케이션의 성능을 측정할 수 없었습니다:

# 측정 불가 항목
- Core Web Vitals (LCP, FID, CLS)
- 페이지 로딩 시간
- 사용자 위치별 성능
- 에러율

Solution

1. Vercel Analytics 설치

npm install @vercel/analytics

2. Analytics 설정

// app/layout.js 또는 pages/_app.js
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
    return (
        
            
                {children}
                
            
        
    );
}

3. Speed Insights 추가

npm install @vercel/speed-insights

// app/layout.js
import { SpeedInsights } from '@vercel/speed-insights/react';

export default function RootLayout({ children }) {
    return (
        
            
                {children}
                
                
            
        
    );
}

4. 커스텀 이벤트 추적

import { track } from '@vercel/analytics';

export default function Button() {
    const handleClick = () => {
        track('Button Clicked', {
            button: 'signup',
            page: 'home',
        });
    };

    return (
        
            Sign Up
        
    );
}

5. 성능 메트릭 커스터마이징

// lib/analytics.js
export function reportWebVitals(metric) {
    const { id, name, value, label } = metric;

    // 커스텀 엔드포인트로 전송
    if (label === 'web-vital') {
        console.log({
            name,
            value,
            id,
            timestamp: Date.now(),
        });

        // 분석 도구로 전송
        sendToAnalytics({
            name,
            value,
            id,
        });
    }
}

// pages/_app.js
import { reportWebVitals } from '../lib/analytics';

export function reportWebVitals(metric) {
    reportWebVitals(metric);
}

6. 에러 추적

// app/error.js
'use client';

export default function Error({ error, reset }) {
    // 에러 추적
    if (typeof window !== 'undefined') {
        track('Error Occurred', {
            message: error.message,
            stack: error.stack,
        });
    }

    return (
        

            
Something went wrong!
             reset()}>Try again
        
    );
}

Lessons Learned

1. 설정 용이성: Vercel Analytics는 몇 줄의 코드로 설정할 수 있습니다
2. Web Vitals 모니터링: Core Web Vitals를 지속적으로 모니터링하세요
3. 커스텀 이벤트: 중요한 사용자 행동을 커스텀 이벤트로 추적하세요
4. 에러 추적: 에러 발생 시 자동으로 추적되도록 설정하세요
5. 데이터 활용: 수집된 데이터를 기반으로 성능을 개선하세요

This blog does not accept any external sponsorships, affiliate marketing, or ad revenue.