patch: Adjusting google events

AntonioGally · web-flow · commit 16ba68b05fe8 · 2021-10-03T23:11:17.000-03:00
diff --git a/public/index.html b/public/index.html
@@ -1,6 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-JF1788P5N0"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "G-JF1788P5N0");
+    </script>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -19,7 +33,7 @@
     <title>Todo list</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>    
+    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/components/Modal/modalTag.js b/src/components/Modal/modalTag.js
@@ -76,8 +76,9 @@ const ModalTag = ({ hideModal, showModal }) => {
       setTagList(auxArr);
 
       ReactGA.event({
-        category: 'Button',
-        action: 'Creating a new tag item' 
+        category: "Create",
+        action: "Creating a new tag",
+        label: "Tag Creation",
       });
 
       setSelectorError(false);
diff --git a/src/components/Modal/modalTodo.js b/src/components/Modal/modalTodo.js
@@ -88,8 +88,9 @@ const ModalTodo = ({ hideModal, showModal }) => {
       setTodoList(todoArr);
 
       ReactGA.event({
-        category: 'Button',
-        action: 'Creating a new todo item' 
+        category: "Create",
+        action: "Creating a new todo",
+        label: "Todo Creation",
       });
 
       setSelectorError(false);
diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js
@@ -1,5 +1,5 @@
 import React, { useState, useContext } from "react";
-
+import ReactGA from "react-ga";
 //Context
 import { dataContext } from "../../context/dataContext.js";
 
@@ -26,6 +26,15 @@ const SideBar = () => {
   const [showModal, setShowModal] = useState(false);
   const [searchValue, setSearchValue] = useState("");
 
+  function handleClickAdd() {
+    ReactGA.event({
+      category: "Open",
+      action: "Openned tag creation modal",
+      label: "Tag Modal",
+    });
+    setShowModal(true);
+  }
+
   return (
     <>
       <Container>
@@ -62,7 +71,11 @@ const SideBar = () => {
             />
           )}
           <Foot>
-            <AddIcon onClick={() => setShowModal(true)} />
+            <AddIcon
+              onClick={() => {
+                handleClickAdd();
+              }}
+            />
             <span onClick={() => setShowModal(true)}>Add a new tag</span>
           </Foot>
         </div>
diff --git a/src/pages/Main/app.js b/src/pages/Main/app.js
@@ -23,6 +23,8 @@ import ModalTodo from "../../components/Modal/modalTodo";
 
 import { ToastContainer } from "react-toastify";
 
+ReactGA.initialize('G-JF1788P5N0');
+
 const App = () => {
   const [showModal, setShowModal] = useState(false);
   const { todoFilter, setTodoFilter, tagList, setTagList } = useContext(dataContext);
@@ -40,16 +42,16 @@ const App = () => {
   }, [])
 
   useEffect(() => {
-    ReactGA.initialize('G-JF1788P5N0');
 
     //to report page view
-    ReactGA.pageview("/");
+    ReactGA.pageview(window.location.pathname + window.location.search);
   }, [])
 
   function handleClickAdd() {
     ReactGA.event({
-      category: 'Button',
-      action: 'Click the button that open todo modal' 
+      category: 'Open',
+      action: 'Openned todo creation modal',
+      label: 'Todo Modal'
     });
     setShowModal(true);
   }
