feat: add Google Tag Manager integration (#8058)

.env

@@ -11,6 +11,9 @@ AUTH_TRUST_HOST=true
 UI_PORT=3000
 # openssl rand -base64 32
 AUTH_SECRET="N/c6mnaS5+SWq81+819OrzQZlmx1Vxtp/orjttJSmw8="
+# Google Tag Manager ID
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="GTM-XXX"
+
 
 #### Prowler API Configuration ####
 PROWLER_API_VERSION="stable"

ui/CHANGELOG.md

@@ -19,7 +19,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 - Compliance detail view: Generic (rest of the compliances) [(#7990)](https://github.com/prowler-cloud/prowler/pull/7990)
 - Compliance detail view: MITRE ATTACK [(#8002)](https://github.com/prowler-cloud/prowler/pull/8002)
 - Improve `Scan ID` filter by adding more context and enhancing the UI/UX [(#7979)](https://github.com/prowler-cloud/prowler/pull/7979)
-- Lighthouse chat interface [(#7878)](https://github.com/prowler-cloud/prowler/pull/7878)
+- Add Google Tag Manager integration [(#8058)](https://github.com/prowler-cloud/prowler/pull/8058)
 
 ### 🔄 Changed
 

ui/app/(auth)/layout.tsx

@@ -1,5 +1,6 @@
 import "@/styles/globals.css";
 
+import { GoogleTagManager } from "@next/third-parties/google";
 import { Metadata, Viewport } from "next";
 import { redirect } from "next/navigation";
 
@@ -53,6 +54,9 @@ export default async function RootLayout({
         <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
           {children}
           <Toaster />
+          <GoogleTagManager
+            gtmId={process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID || ""}
+          />
         </Providers>
       </body>
     </html>

ui/package-lock.json

@@ -11,6 +11,7 @@
         "@hookform/resolvers": "^3.9.0",
         "@langchain/langgraph-supervisor": "^0.0.12",
         "@langchain/openai": "0.5.10",
+        "@next/third-parties": "^15.3.3",
         "@nextui-org/react": "2.4.8",
         "@nextui-org/system": "2.2.1",
         "@nextui-org/theme": "2.2.5",
@@ -1435,6 +1436,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@next/third-parties": {
+      "version": "15.3.3",
+      "resolved": "https://registry.npmjs.org/@next/third-parties/-/third-parties-15.3.3.tgz",
+      "integrity": "sha512-kwhDkK/3klTvW6SuNkmIMSqzEk9Rnc7PkpGeAi3x0mcbPJhFTwdC/qTEd/HZt53J2yFv73YohOBk6dUG3TEIkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "third-party-capital": "1.0.20"
+      },
+      "peerDependencies": {
+        "next": "^13.0.0 || ^14.0.0 || ^15.0.0",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0"
+      }
+    },
     "node_modules/@nextui-org/accordion": {
       "version": "2.0.40",
       "resolved": "https://registry.npmjs.org/@nextui-org/accordion/-/accordion-2.0.40.tgz",
@@ -16494,6 +16508,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/third-party-capital": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/third-party-capital/-/third-party-capital-1.0.20.tgz",
+      "integrity": "sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==",
+      "license": "ISC"
+    },
     "node_modules/throttleit": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-2.1.0.tgz",

ui/package.json

@@ -3,6 +3,7 @@
     "@hookform/resolvers": "^3.9.0",
     "@langchain/langgraph-supervisor": "^0.0.12",
     "@langchain/openai": "0.5.10",
+    "@next/third-parties": "^15.3.3",
     "@nextui-org/react": "2.4.8",
     "@nextui-org/system": "2.2.1",
     "@nextui-org/theme": "2.2.5",