Upgrading react-ga to react-ga4

examples/with-react-ga/README.md → examples/with-react-ga4/README.md

@@ -1,6 +1,6 @@
 # React-GA example
 
-This example shows the most basic way to use [react-ga](https://github.com/react-ga/react-ga) using custom [App](https://github.com/vercel/next.js#custom-app)
+This example shows the most basic way to use [react-ga4](https://github.com/codler/react-ga4) using custom [App](https://github.com/vercel/next.js#custom-app)
 component with NextJs. Modify `Tracking ID` in `utils/analytics.js` file for testing this example.
 
 ## Deploy your own

examples/with-react-ga/package.json → examples/with-react-ga4/package.json

@@ -9,6 +9,6 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-ga": "2.5.3"
+    "react-ga4": "2.1.0"
   }
 }

examples/with-react-ga/utils/analytics.js → examples/with-react-ga4/utils/analytics.js

@@ -1,14 +1,14 @@
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 
 export const initGA = () => {
   console.log('GA init')
-  ReactGA.initialize('UA-xxxxxxxxx-1')
+  ReactGA.initialize('your GA measurement id')
 }
 
 export const logPageView = () => {
   console.log(`Logging pageview for ${window.location.pathname}`)
   ReactGA.set({ page: window.location.pathname })
-  ReactGA.pageview(window.location.pathname)
+  ReactGA.send({ hitType: 'pageview', page: window.location.pathname })
 }
 
 export const logEvent = (category = '', action = '') => {
@@ -19,6 +19,9 @@ export const logEvent = (category = '', action = '') => {
 
 export const logException = (description = '', fatal = false) => {
   if (description) {
-    ReactGA.exception({ description, fatal })
+    ReactGA.gtag('event', 'exception', {
+      description: description,
+      fatal: fatal, // set to true if the error is fatal
+    })
   }
 }