feat(analytics): add Google Tag Manager tracking

lambdalisue · lambdalisue · commit 0b5c17c87f77 · 2026-01-12T22:56:04.000+09:00
Integrate GTM (GTM-KP54C7F4) across all site pages to enable
web analytics and conversion tracking. The GTM script loads early
in &lt;head&gt; to capture page events, with noscript fallback for
non-JS visitors.
diff --git a/app/templates/HomeLayout.tsx b/app/templates/HomeLayout.tsx
@@ -52,6 +52,17 @@ export function HomeLayout({ title, children }: HomeLayoutProps) {
   return (
     <html lang="en">
       <head>
+        {/* Google Tag Manager */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(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-KP54C7F4');`,
+          }}
+        />
+        {/* End Google Tag Manager */}
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content={description} />
@@ -81,6 +92,16 @@ export function HomeLayout({ title, children }: HomeLayoutProps) {
         <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
       </head>
       <body class="page-home">
+        {/* Google Tag Manager (noscript) */}
+        <noscript>
+          <iframe
+            src="https://www.googletagmanager.com/ns.html?id=GTM-KP54C7F4"
+            height="0"
+            width="0"
+            style="display:none;visibility:hidden"
+          />
+        </noscript>
+        {/* End Google Tag Manager (noscript) */}
         <HomeHeader />
         {children}
         <SearchModal />
diff --git a/app/templates/Layout.tsx b/app/templates/Layout.tsx
@@ -75,6 +75,17 @@ export function Layout(
   return (
     <html lang="en">
       <head>
+        {/* Google Tag Manager */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(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-KP54C7F4');`,
+          }}
+        />
+        {/* End Google Tag Manager */}
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content={pageDescription} />
@@ -119,6 +130,16 @@ export function Layout(
         <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
       </head>
       <body>
+        {/* Google Tag Manager (noscript) */}
+        <noscript>
+          <iframe
+            src="https://www.googletagmanager.com/ns.html?id=GTM-KP54C7F4"
+            height="0"
+            width="0"
+            style="display:none;visibility:hidden"
+          />
+        </noscript>
+        {/* End Google Tag Manager (noscript) */}
         <Header />
         {children}
         <SearchModal />
