feat: google analytics (#66)

* chore: npm i react-ga4

* feat: add google analytics via react-ga4

https://github.com/codler/react-ga4?tab=readme-ov-file#usage

package.json

@@ -9,6 +9,7 @@
     "@govtechsg/open-attestation": "^6.10.0-beta.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
     "react-router-dom": "^6.6.1"
   },
   "devDependencies": {

src/app.tsx

@@ -1,8 +1,12 @@
 import React from "react";
 import { Router } from "./router";
+import { useGoogleAnalytics } from "./utils/google-analytics";
 
-export const App: React.FunctionComponent = () => (
-  <div className="flex flex-col min-h-screen">
-    <Router />
-  </div>
-);
+export const App: React.FunctionComponent = () => {
+  useGoogleAnalytics();
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Router />
+    </div>
+  );
+};

src/utils/google-analytics.ts

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+import ReactGA from "react-ga4";
+
+/**
+ * Initialise Google Analytics 4 only once (if GTAG_ID is provided)
+ *
+ * The ReactGA.send("pageview") is explicitly called afterwards because
+ * the pageview event is not automatically triggered on first initialisation
+ * but will be automatically triggered by the GA script on subsequent page views.
+ */
+export const useGoogleAnalytics = (): void => {
+  useEffect(() => {
+    try {
+      ReactGA.initialize("G-GXV2BSGK4K");
+      ReactGA.send("pageview");
+    } catch (e) {
+      console.error(e);
+    }
+  }, []);
+};