https://tagmanager.google.com/
구글 태그매니저로 구글 애널리틱스 적용하려면, 자바스크립트 코드를 추가해야하는데, 고대로 복붙하면 적용되지 않는다.
다음을 참고하면 된다.
https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries
Optimizing: Third Party Libraries | Next.js
Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.
nextjs.org
설치
npm install @next/third-parties@latest next@latest
다음 코드를 layout.tsx에 적용
import { GoogleTagManager } from '@next/third-parties/google'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<GoogleTagManager gtmId="GTM-XYZ" />
<body>{children}</body>
</html>
)
}
구글 애널리틱스는 다음과 같은 방법으로 :
import { GoogleAnalytics } from '@next/third-parties/google'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
<GoogleAnalytics gaId="G-XYZ" />
</html>
)
}
'React.js ／ Next.js' 카테고리의 다른 글
| [펌][React] 리액트에서 파이어베이스를 이용한 구글 로그인 구현 (1) | 2025.05.02 |
|---|---|
| [펌] Next14와 Next-auth를 이용해 OAuth 구현하기 (0) | 2025.05.02 |
| NEXTAUTH_SECRET 적용하기 (NextAuth) (1) | 2024.10.12 |
| [nextjs] 구글 로그인 구현하기, 구글 클라우드 플랫폼에 사이트 등록 (0) | 2024.10.12 |
| Kakao oAuth2 API 단계별 프로세스 (0) | 2024.10.07 |
