프론트엔드/Next.js

Next.js에 구글 애널리틱스(GA) 쉽게 적용하기

다소스랩 2024. 11. 20. 22:33
반응형

구글 애널리틱스 사이트

 

구글 애널리틱스는 웹사이트에서 방문자들의 행동을 분석할 수 있는 도구입니다. 이 도구를 사용하면 여러 지표들을 확인할 수 있습니다.

 

예를 들어, 방문자가 검색을 통해 유입되었는지, SNS 링크를 통해 들어왔는지 확인할 수 있습니다. 또한 특정 페이지에 오래 머무는지, 빨리 떠나는지 알 수 있습니다.

 

이 도구를 사용하면 고객에 대한 이해를 높이고 어떤 콘텐츠나 상품에 관심이 있는지 파악할 수 있습니다. 이를 바탕으로 더 매력적인 콘텐츠나 상품을 중심으로 웹사이트 구조를 설계할 수 있습니다.

 

긍정적인 피드백도 좋지만 부정적인 피드백을 통해 문제를 개선할 수 있습니다. 특정 페이지에서 체류 시간이 짧다면 이는 사용자가 "이 페이지는 별로 매력적이지 않다."는 메시지를 주는 것과 같습니다. 이 페이지를 개선해 고객의 만족도를 높이고 더 나은 서비스를 제공할 수 있습니다.

 

이렇게 유용한 도구인 구글 애널리틱스를 Next.js에서 쉽고 빠르게 적용해볼까요?

 

계정 생성

구글 애널리틱스 계정 생성

 

먼저, 계정을 생성해야합니다.

가입 과정은 아래와 같으며, 서비스 혹은 프로젝트에 맞게 내용을 기입하면 됩니다.

  1. 계정 이름 입력
  2. 속성 이름 입력
  3. 비즈니스 세부 정보 선택
  4. 비즈니스 목표 설정
  5. 데이터 수집 서비스 선택: 웹 / Android 앱 / iOS 앱
  6. 웹사이트 주소와 이름 입력

 

스트림 세부정보

 

계정 생성 과정을 마치면 측정 ID를 확인할 수 있습니다. G- 로 시작하는 값을 복사합니다.

 

환경변수

복사한 측정 ID를 .env 파일에 저장합니다.

GOOGLE_ANALYTICS_ID="G-"

 

@next/third-parties 모듈 설치

npm i @next/third-parties

 

`@next/third-parties`는 Next.js에서 쉽고 효율적으로 서드 파티 라이브러리를 로드하고 관리할 수 있는 라이브러리입니다.

 

라이브러리를 사용하지 않으면 직접 스크립트 컴포넌트로 적용하려면 복잡한 과정을 거쳐야합니다.

 

import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <GoogleAnalytics gaId={process.env.GOOGLE_ANALYTICS_ID} />
      <body>{children}</body>
    </html>
  )
}

 

루트 레이아웃에 구글 애널리틱스 컴포넌트를 추가해줍니다.

반응형