Merge pull request #184 from kjannette/gtags

Gtags

public/index.html

@@ -33,7 +33,6 @@
         dataLayer.push(arguments);
       }
       gtag("js", new Date());
-
       gtag("config", "G-J6SQL5DF6V");
     </script>
 

src/Components/Home/HomePage.js

@@ -22,6 +22,41 @@ const HomePage = () => {
       ? process.env.REACT_APP_API_DEV
       : process.env.REACT_APP_API_PROD;
 
+  useEffect(() => {
+    if (typeof window.gtag !== "undefined") {
+      window.gtag("event", "screen_view", {
+        app_name: "novodraft",
+        screen_name: "Home",
+      });
+    }
+  }, []);
+
+  function clickedTryItButton() {
+    if (typeof window.gtag !== "undefined") {
+      window.gtag("event", "try_it_click", {
+        app_name: "novodraft",
+        screen_name: "Home",
+      });
+    }
+  }
+
+  function promoSignup() {
+    if (typeof window.gtag !== "undefined") {
+      window.gtag("event", "promo_sign_up", {
+        send_to: "G-J6SQL5DF6V",
+      });
+    }
+  }
+
+  function clickedExploreLink() {
+    if (typeof window.gtag !== "undefined") {
+      window.gtag("event", "explore_click", {
+        app_name: "novodraft",
+        screen_name: "Home",
+      });
+    }
+  }
+
   async function saveUserData(
     authId,
     dataValues,
@@ -111,6 +146,7 @@ const HomePage = () => {
     try {
       const usersRef = collection(db, "users");
       const res = await setDoc(doc(usersRef, fbAuthUid), userData);
+      promoSignup();
       return res;
     } catch (error) {
       console.log(`Error saving new user to db: ${error}`);
@@ -195,7 +231,9 @@ const HomePage = () => {
     }
   }
 
-  const handleTryItButton = () => {
+  const handleTryItButton = (e) => {
+    console.log("hndleTryItButton e", e);
+    clickedTryItButton();
     setShowPromoModal(true);
   };
 
@@ -317,11 +355,14 @@ const HomePage = () => {
                 pleadings and briefs. Use it to augment your drafting as much or
                 as little as you prefer.
               </p>
-              <div className="home-link-box">
-                <a className="link">
+              <div
+                className="home-link-box"
+                onClick={() => clickedExploreLink()}
+              >
+                <div className="explore-link">
                   Explore Novodraft
                   <img src={arrow} className="img-1" alt="" />
-                </a>
+                </div>
               </div>
             </div>
           </div>

src/styles/homepage.scss

@@ -109,6 +109,12 @@ section.section-1 {
   margin-right: 15px;
 }
 
+.explore-link {
+  color: blue;
+  cursor: pointer;
+  font-weight: 500;
+}
+
 .card-link-box {
   display: flex;
   flex-direction: column;
@@ -253,6 +259,7 @@ a.link:hover {
 
 img.img-1 {
   padding-left: 13px;
+  color: blue;
 }
 
 .section-3 {