update to google analytics 4 property

Author: vivek9patel

.github/workflows/gh-deploy.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Building 🧱
         run: yarn build
         env:
-          NEXT_PUBLIC_TRACKING_ID: UA-182113713-1
+          NEXT_PUBLIC_TRACKING_ID: G-8FBXBFXC10
           NEXT_PUBLIC_SERVICE_ID: service_qt4ryip
           NEXT_PUBLIC_TEMPLATE_ID: template_2ni69n8
           NEXT_PUBLIC_USER_ID: user_Do31sKneP4eYfn5n1nLTD

components/apps/gedit.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import $ from 'jquery';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import emailjs from '@emailjs/browser';
 
 export class Gedit extends Component {

components/apps/terminal.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import $ from 'jquery';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 
 export class Terminal extends Component {
     constructor() {

components/apps/vivek.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 
 export class AboutVivek extends Component {
 
@@ -38,7 +38,8 @@ export class AboutVivek extends Component {
         localStorage.setItem("about-section", screen);
 
         // google analytics
-        ReactGA.pageview(`/${screen}`);
+        ReactGA.send({ hitType: "pageview", page: `/${screen}`, title: "Custom Title" });
+
 
         this.setState({
             screen: this.screens[screen],

components/base/window.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Draggable from 'react-draggable';
 import Settings from '../apps/settings';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { displayTerminal } from '../apps/terminal'
 
 export class Window extends Component {
@@ -28,14 +28,15 @@ export class Window extends Component {
         this.setDefaultWindowDimenstion();
 
         // google analytics
-        ReactGA.pageview(`/${this.id}`);
+        ReactGA.send({ hitType: "pageview", page: `/${this.id}`, title: "Custom Title" });
 
         // on window resize, resize boundary
         window.addEventListener('resize', this.resizeBoundries);
     }
 
     componentWillUnmount() {
-        ReactGA.pageview("/desktop");
+        ReactGA.send({ hitType: "pageview", page: "/desktop", title: "Custom Title" });
+
         window.removeEventListener('resize', this.resizeBoundries);
     }
 

components/screen/desktop.js

@@ -8,7 +8,7 @@ import AllApplications from '../screen/all-applications'
 import DesktopMenu from '../context menus/desktop-menu';
 import DefaultMenu from '../context menus/default';
 import $ from 'jquery';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 
 export class Desktop extends Component {
     constructor() {
@@ -36,7 +36,7 @@ export class Desktop extends Component {
 
     componentDidMount() {
         // google analytics
-        ReactGA.pageview("/desktop");
+        ReactGA.send({ hitType: "pageview", page: "/desktop", title: "Custom Title" });
 
         this.fetchAppsData();
         this.setContextListeners();

components/ubuntu.js

@@ -3,7 +3,7 @@ import BootingScreen from './screen/booting_screen';
 import Desktop from './screen/desktop';
 import LockScreen from './screen/lock_screen';
 import Navbar from './screen/navbar';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 
 export default class Ubuntu extends Component {
 	constructor() {
@@ -57,7 +57,7 @@ export default class Ubuntu extends Component {
 
 	lockScreen = () => {
 		// google analytics
-		ReactGA.pageview('/lock-screen');
+		ReactGA.send({ hitType: "pageview", page: "/lock-screen", title: "Lock Screen" });
 		ReactGA.event({
 			category: `Screen Change`,
 			action: `Set Screen to Locked`
@@ -71,7 +71,7 @@ export default class Ubuntu extends Component {
 	};
 
 	unLockScreen = () => {
-		ReactGA.pageview('/desktop');
+		ReactGA.send({ hitType: "pageview", page: "/desktop", title: "Custom Title" });
 
 		window.removeEventListener('click', this.unLockScreen);
 		window.removeEventListener('keypress', this.unLockScreen);
@@ -86,7 +86,8 @@ export default class Ubuntu extends Component {
 	};
 
 	shutDown = () => {
-		ReactGA.pageview('/switch-off');
+		ReactGA.send({ hitType: "pageview", page: "/switch-off", title: "Custom Title" });
+
 		ReactGA.event({
 			category: `Screen Change`,
 			action: `Switched off the Ubuntu`
@@ -98,7 +99,7 @@ export default class Ubuntu extends Component {
 	};
 
 	turnOn = () => {
-		ReactGA.pageview('/desktop');
+		ReactGA.send({ hitType: "pageview", page: "/desktop", title: "Custom Title" });
 
 		this.setState({ shutDownScreen: false, booting_screen: true });
 		this.setTimeOutBootScreen();

package.json

@@ -23,7 +23,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
-    "react-ga": "^3.3.1",
+    "react-ga4": "^2.1.0",
     "react-onclickoutside": "^6.12.2",
     "tailwindcss": "^3.2.4"
   }

pages/index.js

@@ -1,5 +1,5 @@
 import Ubuntu from "../components/ubuntu";
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import Meta from "../components/SEO/Meta";
 
 const TRACKING_ID = process.env.NEXT_PUBLIC_TRACKING_ID;

yarn.lock

@@ -559,10 +559,10 @@ react-draggable@^4.4.5:
     clsx "^1.1.1"
     prop-types "^15.8.1"
 
-react-ga@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.1.tgz#d8e1f4e05ec55ed6ff944dcb14b99011dfaf9504"
-  integrity sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==
+react-ga4@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"
+  integrity sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==
 
 react-is@^16.13.1:
   version "16.13.1"