feat(frontend): add GTM for site data analysis

junzero741 · junzero741 · commit f646b37ac975 · 2026-03-02T22:06:12.000+09:00
diff --git a/apps/frontend/.env.example b/apps/frontend/.env.example
@@ -1 +1,2 @@
 NEXT_PUBLIC_API_URL=http://localhost:4000
+NEXT_PUBLIC_GTM_ID=GTM-XXXXXXX
diff --git a/apps/frontend/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx
@@ -1,7 +1,10 @@
 import './global.css';
 import { Inter } from 'next/font/google';
+import Script from 'next/script';
 import type { Metadata } from 'next';
 
+const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
+
 const inter = Inter({
   subsets: ['latin'],
   variable: '--font-inter',
@@ -45,7 +48,26 @@ 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>
+        )}
         <header className="border-b border-border">
           <div className="mx-auto flex max-w-3xl items-center gap-2.5 px-4 py-4">
             <svg

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`NEXT_PUBLIC_API_URL=http://localhost:4000`
	`2`	`+NEXT_PUBLIC_GTM_ID=GTM-XXXXXXX`