Add Google Analytics

arghyaxcodes · arghyaxcodes · commit 55bec4031123 · 2021-07-29T02:44:57.000+05:30
diff --git a/src/lib/ga/index.js b/src/lib/ga/index.js
@@ -0,0 +1,10 @@
+export const pageview = (url) => {
+    window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
+      page_path: url,
+    })
+  }
+  
+  // log specific events happening.
+  export const event = ({ action, params }) => {
+    window.gtag('event', action, params)
+  }
diff --git a/src/pages/_app.js b/src/pages/_app.js
@@ -10,6 +10,7 @@ import Router from 'next/router'
 import { Fragment, useEffect, useState } from 'react'
 import '../css/fonts.css'
 import '../css/main.css'
+import * as ga from '../lib/ga'
 
 if (typeof window !== 'undefined' && !('ResizeObserver' in window)) {
   window.ResizeObserver = ResizeObserver
@@ -41,14 +42,15 @@ export default function App({ Component, pageProps, router }) {
 
   useEffect(() => {
     if (!navIsOpen) return
-    function handleRouteChange() {
+    function handleRouteChange(url) {
       setNavIsOpen(false)
+      ga.pageview(url)
     }
     Router.events.on('routeChangeComplete', handleRouteChange)
     return () => {
       Router.events.off('routeChangeComplete', handleRouteChange)
     }
-  }, [navIsOpen])
+  }, [navIsOpen],[router.events])
 
   const Layout = Component.layoutProps?.Layout || Fragment
   const layoutProps = Component.layoutProps?.Layout
diff --git a/src/pages/_document.js b/src/pages/_document.js
@@ -22,6 +22,23 @@ export default class Document extends NextDocument {
           <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3884ff" />
           <meta name="theme-color" content="#ffffff" />
           <meta name="google-site-verification" content="OMYBoUbVEYAJu6SsOajfrvkTJunKMieK9ZhAgOFHobM"/>
+          {/* Global Site Tag (gtag.js) - Google Analytics */}
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
+          />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
+              page_path: window.location.pathname,
+            });
+          `,
+            }}
+          />
         </Head>
         <body>
           <Main />
