Next.js 13, 14 버전에서 GA(gtag.js) 설정하는 방법을 알아보겠습니다.
문제점
ga를 설정하려면 아래와 같은 가이드대로 GA_TRACKING_ID만 변경해서 코드에 추가하면 됩니다.
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_TRACKING_ID');
</script>하지만 Next.js 13버전 부터는 app 폴더를 사용하게 되고 app 폴더는 SSR(Server Side Rendering)이 기본값이라 기존에 하던대로 추가하면 동작이 되지 않습니다.
설정방법
1. GA(gtag.js) 설정 코드 분리
개인마다 프로젝트 구조를 잡는 방식이 다르겠지만 저는 /src/context 폴더 안에 설정 파일을 모아놓습니다.
그래서 GA용으로 설정파일(GoogleAnalytics.tsx)을 추가했습니다.
그리고 파일 안에 아래와 같이 코딩했습니다.
import Script from 'next/script';
const GoogleAnalytics = ({ id }: { id: string }) => (
<>
<Script
async
src={`https://www.googletagmanager.com/gtag/js?
id=${id}`}
></Script>
<Script
id="google-analytics"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${id}');
`,
}}
></Script>
</>
);
export default GoogleAnalytics;여기서 눈여겨 볼 점은 dangerouslySetInnerHTML를 이용하여 DOM에서 innerHTML을 사용하도록 설정했습니다.
GA_TRACKING_ID값은 props로 받도록 셋팅했으니 위 코드 그대로 복사해서 사용하셔도 좋습니다.
2. layout.tsx에 GA 코드 추가
1. GA(gtag.js) 설정 코드 분리에서 분리한 설정을 추가합니다.
/src/app/layout.tsx 파일의 html 부분에서 GoogleAnalytics.tsx코드를 추가합니다.
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko">
<body className="flex flex-col w-full max-w-screen-sm mx-auto">
{/* GA 추가 영역 Start!! */}
{process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS ? (
<GoogleAnalytics id={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
) : null}
{/* GA 추가 영역 End!! */}
<header className="sticky top-0 bg-white z-10 border-b">
<Navbar />
</header>
<main className="w-full flex justify-center max-w-screen-sm mx-auto p-4">
<ReactQueryConfigContext>{children}</ReactQueryConfigContext>
</main>
<Footer />
</body>
</html>
);
}id는 따로 설정파일에서 관리하고자 .env파일에서 셋팅했습니다.
로컬 / 개발 환경에서는 스크립트를 호출하지 않고자 process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS값이 있을때만 GA를 실행시키도록 했고 로컬 / 개발 환경에서는 NEXT_PUBLIC_GOOGLE_ANALYTICS을 별도로 설정하지 않았습니다.
결과
실서버 배포 후 정상적으로 스크립트가 동작하는걸 확인할 수 있었습니다.
이상으로 Next.js 13, 14의 app폴더에서 GA설정하는 방법을 알아봤습니다.
방문해 주셔서 감사합니다.
'프로그래밍 > Frontend' 카테고리의 다른 글
| [Yarn] warning package.json: No license field 해결 (0) | 2023.09.30 |
|---|---|
| 자바스크립트 for, for in, for of 등 반복문 정리 (0) | 2023.09.11 |
| JQuery checkbox (0) | 2016.01.20 |