Add Gtag

primefaces · Sep 8, 2023 · 2387f72 · 2387f72
1 parent 137d0c7
commit 2387f72
Showing 1 changed file with 41 additions and 3 deletions.
diff --git a/pages/_app.js b/pages/_app.js
@@ -7,6 +7,8 @@ import '../styles/layout/layout.scss';
 // prettier-ignore
 import '../styles/primereact.css';
 // prettier-ignore
+import { useRouter } from 'next/router';
+import Script from 'next/script';
 import PrimeReact from '../components/lib/api/Api';
 import { PrimeReactContext, PrimeReactProvider } from '../components/lib/api/PrimeReactContext';
 import AnnouncementData from '../data/news.json';
@@ -20,7 +22,31 @@ function Main({ component: Component }) {
     const announcement = useRef(AnnouncementData);
     const context = useContext(PrimeReactContext);
 
+    const router = useRouter();
+
+    useEffect(() => {
+        const handleRouteChange = (url) => {
+            pageview(url);
+        };
+
+        router.events.on('routeChangeComplete', handleRouteChange);
+
+        return () => {
+            router.events.off('routeChangeComplete', handleRouteChange);
+        };
+    }, [router.events]);
+
+    const pageview = (url) => {
+        // eslint-disable-next-line no-console
+        console.log(url);
+        window.gtag('config', 'G-FZJEC89ZVF', {
+            page_path: url
+        });
+    };
+
     useEffect(() => {
+        pageview(router.pathname);
+
         const itemString = localStorage.getItem(storageKey);
 
         if (itemString) {
@@ -97,8 +123,20 @@ function Main({ component: Component }) {
 
 export default function MyApp({ Component }) {
     return (
-        <PrimeReactProvider>
-            <Main component={Component} />
-        </PrimeReactProvider>
+        <>
+            <Script src="https://www.googletagmanager.com/gtag/js?id=G-FZJEC89ZVF" />
+            <Script id="google-analytics">
+                {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+ 
+          gtag('config', 'G-FZJEC89ZVF');
+        `}
+            </Script>
+            <PrimeReactProvider>
+                <Main component={Component} />
+            </PrimeReactProvider>
+        </>
     );
 }