From 56cbb0008d8810b89ce54517df3b1ff6eca50619 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Sun, 6 Feb 2022 10:28:28 +0100
Subject: [PATCH] Fix google analytics config

---
 pages/_app.tsx |  8 ++++++--
 utils/gtag.ts  | 19 +++++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 utils/gtag.ts

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 285b38d..2725229 100644
--- a/pages/_app.tsx
+++ b/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,
+            });
 					`
 				}}
 			/>
diff --git a/utils/gtag.ts b/utils/gtag.ts
new file mode 100644
index 0000000..7a215c9
--- /dev/null
+++ b/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
+	});
+};