Components
Web Vitals
next/web-vitals를 사용하여 웹 성능 지표(Web Vitals)를 측정하고 Google Analytics로 전송하는 컴포넌트입니다.
설치
pnpm
pnpm dlx shadcn@latest add @chaesunbak/web-vitalsnpm
npx shadcn@latest add @chaesunbak/web-vitals다음 코드를 프로젝트에 복사/붙혀넣기 하세요.
"use client";import { usePathname } from "next/navigation";import { useReportWebVitals } from "next/web-vitals";import { sendGAEvent } from "@next/third-parties/google";export function WebVitals() { const pathname = usePathname(); useReportWebVitals((metric) => { sendGAEvent("web_vitals", { metric_name: metric.name, // LCP, CLS, INP 등 지표 이름 metric_value: Math.round( metric.name === "CLS" ? metric.value * 1000 : metric.value, ), // CLS는 정수화 필요 metric_id: metric.id, // 지표의 고유 ID (중복 데이터 방지) page_path: pathname, // 실제 경로: /tests/V1StGXR8_Z5jdHi6B-myT page_pattern: getRoutePattern(pathname), // 패턴: /tests/[id] }); }); return null;}// pathname을 route pattern으로 변환 (nanoid 21자 패턴)function getRoutePattern(pathname: string): string { return pathname.replace(/\/[A-Za-z0-9_-]{21}(?=\/|$)/g, "/[id]");}관련 의존성을 추가하세요.
사용법
SPA 환경에서는 <Link/>를 통한 페이지 이동을 감지할 수 없기 때문에, 페이지별 지표수집이 어렵습니다. MPA 환경에서 사용을 권장합니다.
import { GoogleAnalytics } from '@next/third-parties/google'
import { WebVitals } from "@/components/web-vitals";<>
<GoogleAnalytics gaId="G-XXXXXXXXXX" />
<WebVitals />
</>인터페이스
WebVitals
이 컴포넌트는 별도의 Props를 받지 않습니다.