Next.js에서 next/script를 사용하여 Google Analytics 통합하기
KUKJIN LEE • 2주 전 작성
왜 Next.js에서 Google Analytics를 사용해야 하나요?
Google Analytics를 사용하면 페이지 조회수, 사용자 상호작용, 전환 등 중요한 메트릭을 측정할 수 있어 데이터 기반의 결정을 내리는 데 도움이 됩니다. Next.js와 통합함으로써 서버 사이드 렌더링(SSR) 기능을 활용하면서도 원활한 분석을 유지할 수 있습니다.
※ Next Version 15 이상 사용할 경우, 아래 내용으로 진행하지 마세요.
- https://nextjs.org/docs/messages/next-script-for-ga
- https://www.npmjs.com/package/@next/third-parties
단계별 통합 방법
-
Google Analytics 계정 생성
-
아직 계정이 없다면 Google Analytics 계정을 설정하고 웹사이트에 대한 속성을 생성하세요.
-
추적 코드에 사용할 측정 ID(예:
G-XXXXXXX
)를 얻으세요.
-
-
next/script
설치-
next/script
는 타사 스크립트를 Next.js 앱에 추가하면서 적절한 로딩과 실행을 보장하는 내장 컴포넌트입니다.
-
-
_app.js
또는_app.tsx
에 Google Analytics 스크립트 추가-
_app.js
또는_app.tsx
파일을 엽니다. 이 파일에서 모든 페이지에 Google Analytics를 전역으로 추가할 수 있습니다.
-
import { useEffect } from 'react';
import Script from 'next/script';
function MyApp({ Component, pageProps }) {
useEffect(() => {
if (typeof window !== "undefined") {
window.dataLayer = window.dataLayer || [];
function gtag() { window.dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-XXXXXXX'); // 측정 ID로 대체하세요
}
}, []);
return (
<>
{/* Google Analytics 스크립트 */}
<Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX`}
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXX');
`}
</Script>
<Component {...pageProps} />
</>
);
}
export default MyApp;
next/script
를 사용하여 Next.js 애플리케이션에 Google Analytics를 통합하는 것은 사용자 상호작용에 대한 유용한 통찰을 수집하는 간단한 과정입니다. 위 단계를 따르면 효율적으로 메트릭을 추적할 수 있으며, 프로젝트에 대한 이해와 의사 결정을 개선할 수 있습니다.