From ce27ec881dc9160209e2ea300c7cf038346d48f4 Mon Sep 17 00:00:00 2001
From: ishuah <kariuki@ishuah.com>
Date: Thu, 15 Aug 2024 19:48:13 +0300
Subject: [PATCH] Add Google Analytics pageviews

---
 src/components/DataInputStep.tsx | 2 ++
 src/components/DownloadStep.tsx  | 2 ++
 src/components/MapDetailStep.tsx | 2 ++
 src/components/MapRefineStep.tsx | 2 ++
 src/components/VisualizeStep.tsx | 2 ++
 5 files changed, 10 insertions(+)

diff --git a/src/components/DataInputStep.tsx b/src/components/DataInputStep.tsx
index c5fd677..089f751 100644
--- a/src/components/DataInputStep.tsx
+++ b/src/components/DataInputStep.tsx
@@ -4,10 +4,12 @@ import {
 } from 'grommet';
 import Papa from 'papaparse';
 import React, { useCallback } from 'react';
+import ReactGA from 'react-ga4';
 import { useRecoilState } from 'recoil';
 import { recoilState } from '../store';
 
 function DataInputStep() {
+  ReactGA.send({ hitType: "pageview", page: "DataInputStep", title: "Data Input Step" });
   const [appState, setAppState] = useRecoilState<AppState>(recoilState);
   const choroplethCopy = `Upload a CSV file containing a column that corresponds to the name of countries in ${appState.map.region}.`;
   const symbolCopy = ` Upload a CSV file containing the points you want to map.
diff --git a/src/components/DownloadStep.tsx b/src/components/DownloadStep.tsx
index bbca345..6a80106 100644
--- a/src/components/DownloadStep.tsx
+++ b/src/components/DownloadStep.tsx
@@ -2,10 +2,12 @@ import {
   Box, Button, Heading, Paragraph,
 } from 'grommet';
 import React from 'react';
+import ReactGA from 'react-ga4';
 import { useRecoilValue } from 'recoil';
 import { recoilState } from '../store';
 
 function DownloadStep() {
+  ReactGA.send({ hitType: "pageview", page: "DownloadStep", title: "Download Step" });
   const appState = useRecoilValue<AppState>(recoilState);
 
   function createStyleElementFromCSS() {
diff --git a/src/components/MapDetailStep.tsx b/src/components/MapDetailStep.tsx
index 0c299b6..f129a29 100644
--- a/src/components/MapDetailStep.tsx
+++ b/src/components/MapDetailStep.tsx
@@ -2,11 +2,13 @@ import {
   Box, Heading, TextInput, RadioButtonGroup, Select,
 } from 'grommet';
 import React, { useCallback } from 'react';
+import ReactGA from 'react-ga4';
 import { useRecoilState } from 'recoil';
 import { REGIONS } from '../constants';
 import { recoilState } from '../store';
 
 function MapDetailStep() {
+  ReactGA.send({ hitType: "pageview", page: "MapDetailStep", title: "Map Detail Step" });
   const [appState, setAppState] = useRecoilState<AppState>(recoilState);
 
   const setMapTitle = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/src/components/MapRefineStep.tsx b/src/components/MapRefineStep.tsx
index a84380e..cbcc789 100644
--- a/src/components/MapRefineStep.tsx
+++ b/src/components/MapRefineStep.tsx
@@ -3,11 +3,13 @@ import {
   Select, Text, Notification, Table,
 } from 'grommet';
 import React, { useCallback, useEffect } from 'react';
+import ReactGA from 'react-ga4';
 import { useRecoilState } from 'recoil';
 import { REGIONS } from '../constants';
 import { recoilState } from '../store';
 
 function MapRefineStep() {
+  ReactGA.send({ hitType: "pageview", page: "MapRefineStep", title: "Map Refine Step" });
   const [appState, setAppState] = useRecoilState<AppState>(recoilState);
   const columns = appState.userData.data.length > 0
     ? Object.keys(appState.userData.data[0]).map((header) => header) : [];
diff --git a/src/components/VisualizeStep.tsx b/src/components/VisualizeStep.tsx
index 265824c..812454e 100644
--- a/src/components/VisualizeStep.tsx
+++ b/src/components/VisualizeStep.tsx
@@ -3,6 +3,7 @@ import {
   TableCell, Text, Select, Table,
 } from 'grommet';
 import React, { useCallback } from 'react';
+import ReactGA from 'react-ga4';
 import { useRecoilState } from 'recoil';
 import {
   CHOROPLETH_COLORS,
@@ -13,6 +14,7 @@ import {
 import { recoilState } from '../store';
 
 function VisualizeStep() {
+  ReactGA.send({ hitType: "pageview", page: "VisualizeStep", title: "Visualize Step" });
   const [appState, setAppState] = useRecoilState<AppState>(recoilState);
 
   const setSymbolShape = useCallback((event: any) => {