Upgrading react-ga to react-ga4

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

@@ -1,6 +1,8 @@
-# React-GA example
+# React-GA4 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)
+As of May 2023, [react-ga](https://github.com/react-ga/react-ga/issues/541) uses Universal Analytics which will stop processing new data starting July 2023. Until this is fixed, this example has been updated to use [react-ga4](https://github.com/codler/react-ga4) instead.
+
+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
@@ -14,15 +16,15 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
 
 ```bash
-npx create-next-app --example with-react-ga with-react-ga-app
+npx create-next-app --example with-react-ga4 with-react-ga-app
 ```
 
 ```bash
-yarn create next-app --example with-react-ga with-react-ga-app
+yarn create next-app --example with-react-ga4 with-react-ga-app
 ```
 
 ```bash
-pnpm create next-app --example with-react-ga with-react-ga-app
+pnpm create next-app --example with-react-ga4 with-react-ga-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

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,
+      fatal, // set to true if the error is fatal
+    })
   }
 }