feat: Add Google Analytics component

Add a new component, GoogleAnalytics, to handle the integration of Google Analytics into the application. This component includes the necessary scripts and configuration to track user interactions and page views. This commit also updates the layout.jsx file to import and use the GoogleAnalytics component, adding the Google Analytics tracking code to the application's HTML.
DemocraciaEnRed · Aug 6, 2024 · 979847c · 979847c
1 parent 40411af
commit 979847c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/src/app/_components/common/google-analytics.jsx b/src/app/_components/common/google-analytics.jsx
@@ -0,0 +1,24 @@
+import Script from "next/script";
+
+const GoogleAnalytics = ({ ga_id }) => (
+  <>
+    <Script
+      async
+      src={`https://www.googletagmanager.com/gtag/js? 
+      id=${ga_id}`}
+    ></Script>
+    <Script
+      id="google-analytics"
+      dangerouslySetInnerHTML={{
+        __html: `
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', '${ga_id}');
+        `,
+      }}
+    ></Script>
+  </>
+);
+export default GoogleAnalytics;
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
@@ -10,7 +10,7 @@ import Overlay from '@/app/_components/common/overlay'
 import { createTheme } from '@mui/material'
 import Navbar from '@/app/_components/layout/navbar'
 import Footer from '@/app/_components/layout/footer'
-
+import GoogleAnalytics from "@/app/_components/common/google-analytics";
 
 const karla = Karla({
   weight: ['200', '300', '400', '500', '600', '700', '800'],
@@ -44,15 +44,14 @@ export default function RootLayout({ children}) {
   return (
     <html lang="es" className={karla.className}>
       <body>
+        <GoogleAnalytics ga_id="G-DJJZSS3LVE"/>
         <Providers>
           <Navbar />
           <main>
             {children}
           </main>
           <Footer />
           <Overlay />
-
-
         </Providers>
       </body>
     </html>