Upgrading react-ga to react-ga4 (vercel#48932)

taken from google analytic's page:

 "_On July 1, 2023, this property will stop processing data. Starting in March 2023, for continued website measurement, migrate your original property settings to a Google Analytics 4 (GA4) property, or they'll be copied for you to an existing GA4 property, reusing existing site tags._"

The package 'react-ga' doesn't support GA4, so i updated the package to 'react-ga4', the example continues primarily the same, the only differences is that specifying 'pageview' is now required instead of just setting the location of the pageview and the expection() function doesn't exist in this package.

required changes are welcomed




Co-authored-by: Steven <229881+styfle@users.noreply.github.com>

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
+    })
   }
 }