fix: google analytics tracking issue fixed

Asfak00 · Asfak00 · commit a7e98e5a2fd7 · 2025-04-25T23:39:03.000+06:00
diff --git a/index.html b/index.html
@@ -25,16 +25,6 @@
     <meta name="twitter:title" content="ZENUI LIBRARY - Open-Source Free Templates & Components Library">
     <meta name="twitter:description" content="Elevate your project with free UI components, customizable icons, and a color palette. No dependencies required">
 
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-V0DX4Z7PRF"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-
-      gtag('config', 'G-V0DX4Z7PRF');
-    </script>
-
     <title>ZENUI LIBRARY - Open-Source Free Templates & Components Library</title>
   </head>
   <body class="light">
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "react": "^18.2.0",
     "react-countup": "^6.5.3",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.12.0",
     "react-parallax-tilt": "^1.7.228",
diff --git a/src/App.jsx b/src/App.jsx
@@ -130,11 +130,14 @@ import { MenuProvider } from "./Context/MenuContext.jsx";
 import GithubActivityGraphPage from "./Pages/Components/Data Display/GithubActivityGraphPage.jsx";
 import ComparisonCardPage from "./Pages/Components/Surfaces/ComparisonCardPage.jsx";
 import LazyImagePackagePlaygroundPage from "./Pages/LazyImagePackagePlaygroundPage.jsx";
+import usePageTracking from "./CustomHooks/usePageTracking.js";
 
 
 const App = () => {
     const [isCookie, setIsCookie] = useState(false)
 
+    usePageTracking()
+
     let Title = document.title;
     window.addEventListener('blur', () => {
         document.title = 'Get more components 😍';
diff --git a/src/CustomHooks/usePageTracking.js b/src/CustomHooks/usePageTracking.js
@@ -0,0 +1,13 @@
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
+import ReactGA from "react-ga4";
+
+const usePageTracking = () => {
+    const location = useLocation();
+
+    useEffect(() => {
+        ReactGA.send({ hitType: "pageview", page: location.pathname + location.search });
+    }, [location]);
+};
+
+export default usePageTracking;
diff --git a/src/main.jsx b/src/main.jsx
@@ -3,6 +3,10 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./index.css";
 import { BrowserRouter } from "react-router-dom";
+import ReactGA from 'react-ga4';
+
+ReactGA.initialize('G-V0DX4Z7PRF');
+ReactGA.send('pageview');
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
