구글 애널리틱스는 웹사이트에서 방문자들의 행동을 분석할 수 있는 도구입니다. 이 도구를 사용하면 여러 지표들을 확인할 수 있습니다.
예를 들어, 방문자가 검색을 통해 유입되었는지, SNS 링크를 통해 들어왔는지 확인할 수 있습니다. 또한 특정 페이지에 오래 머무는지, 빨리 떠나는지 알 수 있습니다.
이 도구를 사용하면 고객에 대한 이해를 높이고 어떤 콘텐츠나 상품에 관심이 있는지 파악할 수 있습니다. 이를 바탕으로 더 매력적인 콘텐츠나 상품을 중심으로 웹사이트 구조를 설계할 수 있습니다.
긍정적인 피드백도 좋지만 부정적인 피드백을 통해 문제를 개선할 수 있습니다. 특정 페이지에서 체류 시간이 짧다면 이는 사용자가 "이 페이지는 별로 매력적이지 않다."는 메시지를 주는 것과 같습니다. 이 페이지를 개선해 고객의 만족도를 높이고 더 나은 서비스를 제공할 수 있습니다.
이렇게 유용한 도구인 구글 애널리틱스를 Next.js에서 쉽고 빠르게 적용해볼까요?
계정 생성
먼저, 계정을 생성해야합니다.
- 구글 애널리틱스 계정 생성 : 바로가기
가입 과정은 아래와 같으며, 서비스 혹은 프로젝트에 맞게 내용을 기입하면 됩니다.
- 계정 이름 입력
- 속성 이름 입력
- 비즈니스 세부 정보 선택
- 비즈니스 목표 설정
- 데이터 수집 서비스 선택: 웹 / Android 앱 / iOS 앱
- 웹사이트 주소와 이름 입력
계정 생성 과정을 마치면 측정 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>
)
}
루트 레이아웃에 구글 애널리틱스 컴포넌트를 추가해줍니다.
'프론트엔드 > Next.js' 카테고리의 다른 글
| Next.js Vercel Functions timeout(시간초과) 해결 방법 (0) | 2024.11.15 |
|---|---|
| Auth.js(Next Auth) 사용자 인증 쉽게 구현하기 (0) | 2024.11.14 |