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>
)
}
