Google Analytics를 통해 Web Vitals 측정하기

GwangSoo·2025년 9월 22일

개인공부

목록 보기

32/34

유플텍플

지난 9월 17일에 LG 유플러스에서 주관하는 유플텍플이라는 컨퍼런스에 갔다왔다. Figma MCP를 이용한 프론트엔드 작업의 자동화, AI의 발전에 따른 우리가 임해야하는 자세 등에 대해 피가 되고 살이되는 좋은 강연을 들었다.

강연 이후에는 현직자분들과 자유롭게 이야기할 수 있는 네트워킹 시간도 제공되었다. 여러 명이서 현업자분께 이것저것 물어보다가 현업에서 프론트의 모니터링과 성능 측정에 대한 이야기가 굉장히 많이 나왔다.

그 과정에서 Web Vitals를 이용한 성능 측정에 대해 이야기를 하다가 한 번쯤 해보면 좋을 것 같다는 말씀이 나왔다.

전부터 적용해 보고 싶었고 이번 기회에 간단하게 만들었던 프로젝트 중 하나인 이따맘마에 적용해 보기로 했다.

🍽️ 이따맘마란?
룰렛을 돌려 점심 메뉴를 추천받고, 지도를 통해 주변 음식점을 찾아볼 수 있는 서비스다.
👉 구경하기 https://ittamamma.kro.kr/

Web Vitals

Web Vitals는 구글이 제안한 웹 품질 지표 모음으로 개발자와 사이트 운영자가 복잡한 성능 측정 지표들 속에서 가장 중요한 신호에 집중할 수 있도록 돕는 프로젝트다.

즉, 웹에서 좋은 사용자 경험을 보장하기 위해 필요한 최소한의 기준을 단순화하여 제공하는 지침이라 할 수 있다.

그중에서도 Core Web Vitals는 모든 사이트에 공통적으로 중요한 핵심 지표로 사용자 경험의 기반을 평가하는 중심 요소다.

Core Web Vitals

Core Web Vitals는 현재 세 가지 핵심 지표로 구성된다.

LCP (Largest Contentful Paint)
- 페이지에서 가장 큰 콘텐츠(이미지나 텍스트 블록)가 화면에 표시되는 데 걸리는 시간
- 권장 기준: 2.5초 이내
INP (Interaction to Next Paint)
- 사용자가 페이지와 상호작용(클릭, 탭, 키 입력 등)했을 때 그 입력에 대해 화면이 실제로 반응하는 데 걸리는 시간
- 권장 기준: 200ms 이하
CLS (Cumulative Layout Shift)
- 페이지 로딩 과정에서 예기치 않게 레이아웃이 움직이는 정도를 측정
- 권장 기준: 0.1 이하

Google Analytics에 web vitals 붙이기

애널리틱스 설정의 경우 공식 문서를 통해서 충분히 할 수 있기 때문에 링크만 첨부하겠다.
https://support.google.com/analytics/answer/1009694?hl=ko
+) 설정을 완료한 이후에 나온 G-XXXXXXXXXX 형태의 ID는 미리 적어두면 좋다.
+) 만약 어디서 찾아야할지 모르겠다면 검색창에 측정 ID를 검색하면 된다.

📌 참고 문서: 광고 측정항목으로 Core Web Vitals 필드 데이터 측정

📌 프로젝트 환경: Next.js 15 App Router

컨테이너 생성 및 태그 설정

태그 관리자로 접속하여 계정을 생성한다.

tag-manager-1

tag-manager-2

계정을 생성하고 나면 애널리틱스와 같이 스크립트를 주는데, 여기서는 GTM-XXXXXXXX 형식으로 된 태그를 갖고 있으면 된다.

이제 왼쪽 사이드 바에서 태그 → 새로 만들기에서 태그 구성을 선택해 준다. 그다음 Google 애널리틱스 → Google 태그를 선택하여 애널리틱스에서 생성된 측정 ID를 넣어주고 저장을 눌러준다.

마지막으로 우측 상단에 제출을 눌러서 게시를 한다.

Next.js 설정

Next.js에서는 공식적으로 써드파티 라이브러리 지원을 제공한다.

👉 공식 문서

아래 명령어를 통해 라이브러리를 설치해 준다.

npm install @next/third-parties@latest next@latest
# OR
pnpm add @next/third-parties@latest next@latest

나의 경우 전역적으로 제공하기 위해 root의 layout.tsx에 예제 코드와 같이 비슷하게 명시했다.

import { GoogleTagManager } from '@next/third-parties/google'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <GoogleTagManager gtmId="GTM-XYZ" />
      <body>{children}</body>
    </html>
  )
}

위 설정이 완료되었다면 배포 버전에 반영을 해준다.

이후 애널리틱스에서 관리 → 데이터 수집 및 수정 → 데이터 스트림으로 접속한다. 그리고 아까 만들었던 애널리틱스를 선택하고 하단에 태그 안내 보기 → 직접 설치에서 테스트를 해볼 수 있는데 사진과 같이 체크 표시가 뜨면 성공한 것이다.

gtag-test

만약 테스트에 실패했다면 아래 내용을 다시 확인해 보자

태그 관리자에서 컨테이너를 게시했는지 확인
GoogleTagManager 컴포넌트가 root layout에 적용됐는지 확인

태그 템플릿 추가

컨테이너에 설정을 마저 진행해 보겠다.

template.tpl이라는 파일을 다운로드 받고 태그 관리자의 템플릿으로 이동한다.

태그 템플릿 → 새로 만들기를 누르고 우상단에서 가져오기를 통해 방금 다운로드 받은 템플릿을 가져온다.

template

아래와 같이 화면이 뜨면 저장을 눌러준다.

set-template

Web Vitals 태그 설정

태그 탭으로 돌아와서 새로 만들기를 누른 후 제목을 Core Web Vitals - All Pages로 해준다. 그리고 아까 만든 Web Vitals를 선택해 준다.

web-vitals-tag

그리고 트리거에서는 모든 페이지를 선택하고 저장한다.

web-vitals-tag-trigger

게시 전 미리보기

제출하기 전에 우측 상단에 있는 미리보기를 통해 web vitals가 측정되는 것을 확인할 수 있다.

미리보기에 접속 후 배포된 주소를 입력해 준다.

preview

그러면 위 사진과 같이 web vitals를 눌러서 측정된 지표들에 대한 내용을 볼 수 있다.

애널리틱스로 보내기

이제 위 데이터들을 애널리틱스로 보내는 과정을 해보겠다.

트리거로 이동하여 새로 만들기 → 트리거 구성 → 하단에 맞춤 이벤트를 선택한다. 그리고 이벤트 이름을 web_vitals로 하고 저장을 한다.

custom-event

변수 만들기

변수 탭으로 이동하여 사용자 정의 변수 → 새로 만들기를 누르고 변수 구성 → 페이지 변수의 데이터 영역 변수를 눌러준다. 제목은 DLV - webVitalsData.name로 하고 데이터 영역 변수 이름은 DLV를 뺀 webVitalsData.name으로 해준다.

datalayer-name

이후에 webVitalsData.value, webVitalsData.id, webVitalsData.rating, webVitalsData.delta 변수들도 똑같이 추가해 준다.

datalayer-value

datalayer-id

datalayer-rating

datalayer-delta

애널리틱스 이벤트 태그 만들기

태그 탭에서 새로 만들기 → 태그 구성을 누른 후 Google 애널리틱스 → Google 애널리틱스: GA4 이벤트를 눌러준다.

send-ga-event

이후 측정 ID에 이전에 넣었던 값을 다시 넣고 이벤트 이름에는 {{DLV - webVitalsData.name}}를 넣어준다. 그리고 이벤트 매개변수를 열고 매개변수 추가를 통해 아래와 같이 데이터를 추가한다.

ga-variants

이벤트 매개변수	값
metric_value	{{DLV - webVitalsData.value}}
metric_id	{{DLV - webVitalsData.id}}
metric_rating	{{DLV - webVitalsData.rating}}
metric_delta	{{DLV - webVitalsData.delta}}
value	{{DLV - webVitalsData.delta}}
event_category	Web Vitals