fix: use next/script component for Google Tag Manager to resolve linting error

daniel-lxs · daniel-lxs · commit 73622561aae3 · 2025-06-30T09:58:43.000-05:00
diff --git a/apps/web-roo-code/src/app/layout.tsx b/apps/web-roo-code/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import type { Metadata } from "next"
 import { Inter } from "next/font/google"
+import Script from "next/script"
 
 import { Providers } from "@/components/providers"
 
@@ -45,17 +46,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 	return (
 		<html lang="en" suppressHydrationWarning>
 			<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-M2JZHV8N');`,
-					}}
-				/>
-				{/* End Google Tag Manager */}
 				<link
 					rel="stylesheet"
 					type="text/css"
@@ -79,6 +69,19 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 				<Providers>
 					<Shell>{children}</Shell>
 				</Providers>
+				{/* Google Tag Manager */}
+				<Script
+					id="google-tag-manager"
+					strategy="afterInteractive"
+					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-M2JZHV8N');`,
+					}}
+				/>
+				{/* End Google Tag Manager */}
 			</body>
 		</html>
 	)
