feat(frontend): replace manual GTM script with @next/third-parties

junzero741 · claude · junzero741 · commit cd22544bcd36 · 2026-03-03T00:57:08.000+09:00
- Add @next/third-parties package for official Next.js GTM integration
- Replace inline script + noscript iframe with GoogleTagManager component
- Add NEXT_PUBLIC_GTM_ID ARG to Dockerfile so it's inlined at build time

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/apps/frontend/Dockerfile b/apps/frontend/Dockerfile
@@ -20,6 +20,8 @@ COPY packages/shared/ ./packages/shared/
 # NEXT_PUBLIC_ vars are inlined at build time
 ARG NEXT_PUBLIC_API_URL
 ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
+ARG NEXT_PUBLIC_GTM_ID
+ENV NEXT_PUBLIC_GTM_ID=$NEXT_PUBLIC_GTM_ID
 
 # Build frontend (includes shared via dependsOn)
 RUN pnpm nx build frontend
diff --git a/apps/frontend/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import './global.css';
 import { Inter } from 'next/font/google';
-import Script from 'next/script';
+import { GoogleTagManager } from '@next/third-parties/google';
 import type { Metadata } from 'next';
 
 const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
@@ -48,26 +48,8 @@ export default function RootLayout({
 }) {
   return (
     <html lang="ko" className={inter.variable}>
-      {GTM_ID && (
-        <Script id="gtm" strategy="afterInteractive">
-          {`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','${GTM_ID}');`}
-        </Script>
-      )}
       <body className="flex min-h-screen flex-col font-sans">
-        {GTM_ID && (
-          <noscript>
-            <iframe
-              src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
-              height="0"
-              width="0"
-              style={{ display: 'none', visibility: 'hidden' }}
-            />
-          </noscript>
-        )}
+        {GTM_ID && <GoogleTagManager gtmId={GTM_ID} />}
         <header className="border-b border-border">
           <div className="mx-auto flex max-w-3xl items-center gap-2.5 px-4 py-4">
             <svg
diff --git a/package.json b/package.json
@@ -54,6 +54,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.999.0",
+    "@next/third-parties": "^16.1.6",
     "@prisma/adapter-pg": "^7.4.1",
     "@prisma/client": "^7.4.1",
     "@tailwindcss/typography": "^0.5.19",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
