feat: update from ua to ga4 (#701)

* chore: add react-ga4

* chore: remove next-ga

* chore: use react-ga4

* chore: remove label key from Event interface

* chore: remove console log

* chore: add back non-interaction

* chore: remove use of window ga

* chore: update analytics test

* chore: lint

* chore: use gtag id as environment variable

* chore: update usage of analyticsEvent

* chore: update tests

* chore: removes null and undefined dimensions before sending event

* chore: add quotes to document store value if exists

* chore: add quotes to values starting with 0x

* chore: refactor to registryIssuer.name

* chore: replace action with custom param

* chore: add issuer id into custom dimension

* chore: remove action from test

* chore: replace action by specifying documentId

* chore: refactor using of quotations

* chore: replace GTAG_ID with GA4_TAG_ID for deployment

* chore: update test to use issuer id instead of document store

next.config.js

@@ -26,6 +26,7 @@ module.exports = withBundleAnalyzer({
     INFURA_API_KEY: process.env.INFURA_API_KEY || "01b3ed28c54f4ae49cb4e27df560c5e8", // nebulis personal api key, feel free to change
     ALCHEMY_API_KEY: process.env.ALCHEMY_API_KEY || "FK1x9CdE8NStKjVt236D_LP7B6MMCFOs", // default key works on ropsten
     TRUSTED_TLDS: process.env.TRUSTED_TLDS || "gov.sg,edu.sg",
+    GA4_TAG_ID: process.env.GA4_TAG_ID,
   },
   // Variables passed to both server and client
   publicRuntimeConfig: {

package.json

@@ -49,13 +49,13 @@
     "isomorphic-fetch": "^3.0.0",
     "lodash": "^4.17.20",
     "next": "^11.1.4",
-    "next-ga": "^2.3.4",
     "next-redux-wrapper": "^6.0.2",
     "next-seo": "^4.17.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-dropzone": "^11.2.4",
     "react-feather": "^2.0.9",
+    "react-ga4": "^1.4.1",
     "react-google-recaptcha": "^2.1.0",
     "react-qr-svg": "^2.4.0",
     "react-redux": "^7.2.4",

pages/_app.tsx

@@ -1,13 +1,12 @@
 import { mapValues } from "lodash";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore repository has been archived, will wait to upgrade to fix
-import withGA from "next-ga";
 import { DefaultSeo } from "next-seo";
 import App from "next/app";
-import Router from "next/router";
 import React from "react";
+import ReactGA from "react-ga4";
 import { useDispatch } from "react-redux";
-import { DEFAULT_SEO, ENVIRONMENT, GA_ID } from "../src/config";
+import { DEFAULT_SEO, ENVIRONMENT, GA4_TAG_ID } from "../src/config";
 import { updateFeatureToggles } from "../src/reducers/featureToggle.actions";
 import { wrapper } from "../src/store";
 import "../src/tailwind.css";
@@ -29,6 +28,15 @@ const FeatureFlagLoader: React.FunctionComponent = ({ children }) => {
 };
 
 class MyApp extends App {
+  setGA = () => {
+    if (GA4_TAG_ID) {
+      ReactGA.initialize(GA4_TAG_ID);
+      ReactGA.send("pageview");
+    }
+  };
+  componentDidMount() {
+    this.setGA();
+  }
   render(): JSX.Element {
     const { Component, pageProps } = this.props;
     return (
@@ -42,5 +50,4 @@ class MyApp extends App {
   }
 }
 
-const appWrappedWithGA = withGA(GA_ID, Router)(MyApp);
-export default wrapper.withRedux(appWrappedWithGA);
+export default wrapper.withRedux(MyApp);