Add Google Analytics pageviews

ishuah · Aug 15, 2024 · ce27ec8 · ce27ec8
1 parent d82174f
commit ce27ec8
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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) => {