add google tag manager for main page

.env.dist

@@ -1,2 +1,3 @@
 REACT_APP_QUIZ_SERVER_URL=https://lis-dev.github.io/big5-data
 REACT_APP_DEFAULT_LANG=en
+REACT_APP_GTM_ID=

package.json

@@ -16,6 +16,7 @@
     "kutty": "^0.5.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-ga4": "^1.4.1",
     "react-scripts": "^4.0.3",
     "typescript": "^4.1.2",
     "valtio": "^1.2.6",

src/index.tsx

@@ -5,6 +5,12 @@ import App from './App'
 import reportWebVitals from './reportWebVitals'
 import { Base } from './components/Base'
 import { ErrorBoundary } from './components/ErrorBoundary'
+import ReactGA from 'react-ga4'
+
+if (process.env.REACT_APP_GTM_ID) {
+  ReactGA.initialize(process.env.REACT_APP_GTM_ID)
+  ReactGA.send('pageview')
+}
 
 ReactDOM.render(
   <React.StrictMode>

yarn.lock

@@ -9406,6 +9406,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-ga4@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-1.4.1.tgz#6ee2a2db115ed235b2f2092bc746b4eeeca9e206"
+  integrity sha512-ioBMEIxd4ePw4YtaloTUgqhQGqz5ebDdC4slEpLgy2sLx1LuZBC9iYCwDymTXzcntw6K1dHX183ulP32nNdG7w==
+
 react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"