Fix google analytics config

pages/_app.tsx

@@ -15,6 +15,8 @@ import Footer from '../components/Footer';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 
+import { GOOGLE_ANALYTICS_KEY } from '../utils/gtag';
+
 NProgress.configure({ showSpinner: false });
 
 const App = ({ Component, pageProps }: AppProps) => {
@@ -38,7 +40,7 @@ const App = ({ Component, pageProps }: AppProps) => {
 		<>
 			<Script
 				strategy='afterInteractive'
-				src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_ANALYTICS_KEY}`}
+				src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_KEY}`}
 			/>
 			<Script
 				id='analytics-init'
@@ -52,7 +54,9 @@ const App = ({ Component, pageProps }: AppProps) => {
 						}
 						
 						gtag('js', new Date());
-						gtag('config', ${process.env.GOOGLE_ANALYTICS_KEY});
+						gtag('config', ${GOOGLE_ANALYTICS_KEY}, {
+              page_path: window.location.pathname,
+            });
 					`
 				}}
 			/>

utils/gtag.ts

@@ -0,0 +1,19 @@
+export const GOOGLE_ANALYTICS_KEY = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_KEY;
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url: any) => {
+	// @ts-ignore
+	window.gtag('config', GOOGLE_ANALYTICS_KEY, {
+		page_path: url
+	});
+};
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({ action, category, label, value }: any) => {
+	// @ts-ignore
+	window.gtag('event', action, {
+		event_category: category,
+		event_label: label,
+		value: value
+	});
+};