내맘대로 개발일지

[NEXTJS] Google Analytics 연결 본문

Javascript/Next

[NEXTJS] Google Analytics 연결

eulBlue 2024. 11. 9. 21:54

📱테스트 환경

"react": "19.0.0-rc-02c0e824-20241028",
"react-dom": "19.0.0-rc-02c0e824-20241028",
"next": "15.0.2"

사실 애널리틱스는 필수느낌으로 가고있는 것 같다.

유저 리텐션이나 유입환경 등 파악하기 위해서는 필수이기 때문이다.

예전에는 설정하기 되게 좀 까다로웠던 같은데

쉽게 설정하는 방법이 있다고 하여 기록하려고 한다.

import Script from 'next/script';

export default function GoogleAnalytics({ gaId }: { gaId: string }) {
    return (
        <>
            <Script
                async
                src={`https://www.googletagmanager.com/gtag/js
				?id=${gaId}`}
            />
            <Script
                id="google-analytics"
                dangerouslySetInnerHTML={{
                    __html: `
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());

		gtag('config', '${gaId}');
		`,
                }}
            />
        </>
    );
}

/lib/GoogleAnalytics.tsx

<Html lang="en">
    <Head />
    <body className="antialiased">
        {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS ? (
          <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
        ) : null}
    	<GlobalStyles />
        <StyledComponentsRegistry>
          <Main />
          <NextScript />
        </StyledComponentsRegistry>
    </body>
  </Html>

pages/_document.tsx

이렇게 해주고 해당 키값은 .env 에 저장해놓으면 된다.

ㅇㅣ렇게만 해도 유입정보는 확인할 수 있고

Fuction 들은 따로 만들어야하는데 그건 다음에 작성하도록 하겠다.

저작자표시 (새창열림)

'Javascript > Next' 카테고리의 다른 글

[NEXTJS] ANTD SyntaxError: Unexpected token 'export'  (0) 2025.01.01
[NEXTJS] styled-components 적용  (0) 2024.11.08
[NEXTJS] Sentry 연결  (2) 2024.11.07
[JavaScript] Canvas 글자에 그림자 효과  (2) 2023.10.26
[NextJS] base64 Image ReSize  (0) 2023.09.01
'Javascript/Next' Related Articles more