patch: Adjusting google analytics events trigger

patch: Adjusting google analytics events trigger

Author: AntonioGally

package.json

@@ -13,7 +13,6 @@
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
     "react-dom": "^17.0.2",
-    "react-ga": "^3.3.0",
     "react-hook-form": "^7.12.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/components/Modal/modalTag.js

@@ -1,6 +1,5 @@
 import React, { useState, useContext, memo } from "react";
 import { useForm } from "react-hook-form";
-import ReactGA from "react-ga";
 
 //Scripts
 import { dataContext } from "../../context/dataContext";
@@ -75,8 +74,8 @@ const ModalTag = ({ hideModal, showModal }) => {
       auxArr.push(auxObj);
       setTagList(auxArr);
 
-      ReactGA.event({
-        category: "Create",
+      window.gtag("event", "click-event", {
+        event_category: "Create",
         action: "Creating a new tag",
         label: "Tag Creation",
       });

src/components/Modal/modalTodo.js

@@ -1,6 +1,5 @@
 import React, { useState, useContext, memo } from "react";
 import { useForm } from "react-hook-form";
-import ReactGA from "react-ga";
 
 //Scripts
 import { dataContext } from "../../context/dataContext";
@@ -87,8 +86,8 @@ const ModalTodo = ({ hideModal, showModal }) => {
       todoArr.push(todoObj);
       setTodoList(todoArr);
 
-      ReactGA.event({
-        category: "Create",
+      window.gtag("event", "click-event", {
+        event_category: "Create",
         action: "Creating a new todo",
         label: "Todo Creation",
       });

src/components/SideBar/index.js

@@ -1,5 +1,4 @@
 import React, { useState, useContext } from "react";
-import ReactGA from "react-ga";
 //Context
 import { dataContext } from "../../context/dataContext.js";
 
@@ -27,8 +26,8 @@ const SideBar = () => {
   const [searchValue, setSearchValue] = useState("");
 
   function handleClickAdd() {
-    ReactGA.event({
-      category: "Open",
+    window.gtag("event", "click-event", {
+      event_category: "Open",
       action: "Openned tag creation modal",
       label: "Tag Modal",
     });

src/pages/Main/app.js

@@ -1,6 +1,5 @@
 import React, { useContext, useState, useEffect } from "react";
 import { Col, Drawer } from "antd";
-import ReactGA from "react-ga";
 
 //Minor Components
 import {
@@ -23,7 +22,6 @@ import ModalTodo from "../../components/Modal/modalTodo";
 
 import { ToastContainer } from "react-toastify";
 
-ReactGA.initialize('G-JF1788P5N0');
 
 const App = () => {
   const [showModal, setShowModal] = useState(false);
@@ -41,18 +39,13 @@ const App = () => {
     }
   }, [])
 
-  useEffect(() => {
-
-    //to report page view
-    ReactGA.pageview(window.location.pathname + window.location.search);
-  }, [])
 
   function handleClickAdd() {
-    ReactGA.event({
-      category: 'Open',
-      action: 'Openned todo creation modal',
-      label: 'Todo Modal'
-    });
+    window.gtag("event", "click-event", {
+      event_category: "Open",
+      action: "Openned todo creation modal",
+      label: "Todo Modal"
+    })
     setShowModal(true);
   }