adds google analytics

Author: vivek9patel

package.json

@@ -19,6 +19,7 @@
     "react-circular-progressbar": "^2.0.4",
     "react-codemirror2": "^7.2.1",
     "react-dom": "^17.0.2",
+    "react-ga": "^3.3.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/App.js

@@ -5,6 +5,7 @@ import { useAuth0 } from '@auth0/auth0-react'
 import { Icon } from '@iconify/react';
 import axios from 'axios';
 import { v4 as uuidV4 } from 'uuid';
+import ReactGA from 'react-ga';
 import runIcon from './images/icons/run.svg';
 import whiteboard24Regular from '@iconify/icons-fluent/whiteboard-24-regular';
 import Preview from './components/Preview';
@@ -33,12 +34,27 @@ function App() {
       setDocId(window.location.pathname.split('/')[1])
       setIsDocId(true);
     }
+    if (isAuthenticated) {
+      ReactGA.event({
+        category: `user.logged`,
+        action: `Login`,
+        label: `${user.email}`
+      });
+    }
+    // eslint-disable-next-line
   }, []);
 
 
   let statusLoop = null;
 
   const runCode = () => {
+
+    ReactGA.event({
+      category: `button.clicked`,
+      action: `Run Code`,
+      lang: `${selected}`
+    });
+
     setOutput('')
     setTextEditor('output');
     setProcessing(true);
@@ -131,6 +147,10 @@ function App() {
   }
 
   const toggleModal = () => {
+    ReactGA.event({
+      category: `button.clicked`,
+      action: `Whiteboard ${modal ? "Opened" : "Closed"}`,
+    });
     setModal(!modal);
   }
 

src/components/IDE.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef, useCallback } from 'react';
 import { io } from 'socket.io-client';
 import { Controlled as CodeMirror } from 'react-codemirror2';
+import ReactGA from 'react-ga';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/material.css';
 import 'codemirror/mode/htmlmixed/htmlmixed';
@@ -40,6 +41,7 @@ export default function IDE({ docId, modal, toggleModal, python, setpython, inpu
 
 
     useEffect(() => {
+        ReactGA.pageview('IDE-screen');
         var TempSocket = io(process.env.REACT_APP_BACKEND_ENDPOINT_URL);
         setSocket(TempSocket);
         const peer = new Peer(undefined, {

src/components/Preview.js

@@ -1,6 +1,10 @@
-import React from 'react'
+import React, { useEffect } from 'react';
+import ReactGA from 'react-ga';
 
 export default function Preview({ docId }) {
+    useEffect(() => {
+        ReactGA.pageview('preview-screen');
+    }, [])
 
     const joinRoomViaRoomId = () => {
         const roomId = document.getElementById("roomIdInput");
@@ -9,9 +13,19 @@ export default function Preview({ docId }) {
         if (roomIdValue.includes("http") || roomIdValue.includes("https")) {
             const url = new URL(roomIdValue);
             const path = url.pathname;
+            ReactGA.event({
+                category: `button.clicked`,
+                action: `Join Room`,
+                label: `from copied url`
+            });
             window.location.href = `${path}`;
         }
         else {
+            ReactGA.event({
+                category: `button.clicked`,
+                action: `Join Room`,
+                label: `from input url`
+            });
             window.location.href = `/${roomIdValue}`;
         }
     }
@@ -24,6 +38,10 @@ export default function Preview({ docId }) {
                 </div>
                 <div className="flex flex-col mt-20 justify-center  text-white">
                     <button onClick={() => {
+                        ReactGA.event({
+                            category: `button.clicked`,
+                            action: `Create Room`
+                        });
                         window.location.href = `/${docId}`
                     }} className=" hover:shadow-md duration-150 px-4 py-2 rounded-lg shadow text-blue-500 bg-white border border-blue-600 font-semibold">Create Room</button>
                     {/* <button className=" hover:shadow-md duration-300 px-4 mx-2 py-2 rounded-lg shadow bg-blue-600 font-medium">Sign Up</button> */}

src/components/auth/Auth0.js

@@ -1,11 +1,18 @@
 import React from 'react'
 import { useAuth0 } from '@auth0/auth0-react';
+import ReactGA from 'react-ga';
 
 export function Login() {
     const { loginWithRedirect } = useAuth0();
     return (
         <div className=" text-white mx-1">
-            <button onClick={() => { loginWithRedirect() }}>Login</button>
+            <button onClick={() => {
+                ReactGA.event({
+                    category: `button.clicked`,
+                    action: `Login`,
+                });
+                loginWithRedirect()
+            }}>Login</button>
         </div>
     )
 }
@@ -14,7 +21,13 @@ export function Logout() {
     const { logout } = useAuth0();
     return (
         <div className=" text-white mx-1">
-            <button onClick={() => { logout() }}>Logout</button>
+            <button onClick={() => {
+                ReactGA.event({
+                    category: `button.clicked`,
+                    action: `Logout`,
+                });
+                logout()
+            }}>Logout</button>
         </div>
     )
 }

src/index.js

@@ -4,10 +4,14 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { Auth0Provider } from '@auth0/auth0-react';
+import ReactGA from 'react-ga';
 
+const trackingId = process.env.REACT_APP_TRACKING_ID
 const domain = process.env.REACT_APP_AUTH0_DOMAIN;
 const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
 
+ReactGA.initialize(trackingId);
+
 ReactDOM.render(
   <React.StrictMode>
     <Auth0Provider

yarn.lock

@@ -9519,6 +9519,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-ga@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.0.tgz#c91f407198adcb3b49e2bc5c12b3fe460039b3ca"
+  integrity sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==
+
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"