Merge pull request #105 from polywrap/rihp/goal-tracking

feat: track user goals with google analytics
agentcoinorg · Aug 31, 2023 · baa9a29 · baa9a29
2 parents c94374a + 4d87564
commit baa9a29
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 36 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -4,11 +4,8 @@ on:
   push:
     branches:
       - main
-    paths:
-      - "packages/**"
+      - dev
   pull_request:
-    paths:
-      - "packages/**"
 
 jobs:
   build:

diff --git a/apps/browser/public/index.html b/apps/browser/public/index.html
@@ -2,42 +2,25 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-YGT52QSVL9"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-YGT52QSVL9', {'debug_mode': true});
+    </script>
+    <!-- End Google tag -->
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="An agent that is able to learn functions on demand." />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>evo.ninja</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/apps/browser/src/components/Chat/Chat.css b/apps/browser/src/components/Chat/Chat.css
@@ -1,6 +1,5 @@
 .Chat {
   width: 80%;
-  /* background-color: #1c1c1c; */
   background-color: #121212;
   color: #f5f5f5;
   display: flex;
@@ -9,15 +8,51 @@
   border: 1px solid #2b2b30;
 }
 
+.DisclaimerRibbon {
+  background-color: black;
+  color: white; 
+  text-align: center;
+  font-size: 12px; 
+  padding: 10px; 
+  position: absolute; 
+  width: 80%;
+  bottom: 0; 
+  z-index: 1000;
+  border-radius: 10px 10px 0 0;
+  border: 2px solid red; 
+  display: flex;
+  justify-content: space-around; 
+  align-items: center;
+}
+
+.ButtonWrapper {
+  display: flex;
+  gap: 10px; 
+}
+
+.CloseDisclaimer {
+  cursor: pointer;
+  padding: 10px 20px; 
+  font-weight: bold;
+  color: red; 
+}
+
+.CloseWithoutTracking {
+  cursor: pointer;
+  padding: 10px 20px;
+  font-weight: bold;
+  color: white; 
+}
+
 .Chat__Export {
   cursor: pointer;
   font-size: 24px;
   color: #ff572e;
   transition: color 0.3s ease-in-out;
   margin: 10px;
-  position: absolute; /* Added */
-  top: 10px; /* Added */
-  right: 10px; /* Added */
+  position: absolute;
+  top: 10px; 
+  right: 10px;
 }
 
 .Chat__Export:hover {
@@ -55,6 +90,7 @@
   word-break: break-word;
   white-space: pre-line;
 }
+
 .SendMessage {
   display: flex;
   padding: 10px;

diff --git a/apps/browser/src/components/Chat/Chat.tsx b/apps/browser/src/components/Chat/Chat.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, ChangeEvent, KeyboardEvent, useRef } from "
 import { Evo } from "@evo-ninja/core";
 import ReactMarkdown from "react-markdown";
 
+import { trackMessageSent } from '../googleAnalytics';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMarkdown } from '@fortawesome/free-brands-svg-icons';
 
@@ -30,6 +31,8 @@ const Chat: React.FC<ChatProps> = ({ evo, onMessage, messages, goalEnded }: Chat
     undefined
   );
   const [stopped, setStopped] = useState<boolean>(false);
+  const [showDisclaimer, setShowDisclaimer] = useState<boolean>(true);
+  const [trackUser, setTrackUser] = useState<boolean>(false);
   const [hoveredMsgIndex, setHoveredMsgIndex] = useState<number>(-1);
 
   const pausedRef = useRef(paused);
@@ -98,6 +101,17 @@ const Chat: React.FC<ChatProps> = ({ evo, onMessage, messages, goalEnded }: Chat
     return () => clearTimeout(timer);
   }, [evoRunning, evoItr]);
 
+
+  const handleCloseDisclaimer = () => {
+    setShowDisclaimer(false);
+    setTrackUser(true);  // User accepted disclaimer, enable tracking
+  };
+
+  const handleCloseWithoutTracking = () => {
+    setShowDisclaimer(false);
+    setTrackUser(false); // User did not accept disclaimer, disable tracking
+  };
+
   const handleSend = async () => {
     onMessage({
       title: message,
@@ -106,6 +120,10 @@ const Chat: React.FC<ChatProps> = ({ evo, onMessage, messages, goalEnded }: Chat
     setSending(true);
     setMessage("");
     setEvoRunning(true);
+
+    if (trackUser) { // Only track if user accepted the disclaimer
+      trackMessageSent(message); 
+    }
   };
 
   const handlePause = async () => {
@@ -184,15 +202,25 @@ const Chat: React.FC<ChatProps> = ({ evo, onMessage, messages, goalEnded }: Chat
           </div>
         ))}
       </div>
+
       <div className="Chat__Container">
+        {showDisclaimer && (
+          <div className="DisclaimerRibbon">
+            🧠 Hey there! Mind sharing your prompts to help make Evo even better?
+            <div className="ButtonWrapper">
+              <span className="CloseDisclaimer" onClick={handleCloseDisclaimer}>Accept</span>
+              <span className="CloseWithoutTracking" onClick={handleCloseWithoutTracking}>Decline</span>
+            </div>
+          </div>
+        )}
         <input
           type="text"
           value={message}
           onChange={handleChange}
           onKeyPress={handleKeyPress}
           placeholder="Enter your main goal here..."
           className="Chat__Input"
-          disabled={sending} // Disable input while sending
+          disabled={sending || showDisclaimer} // Disable input while sending or if disclaimer is shown
         />
         {evoRunning && (
           <>

diff --git a/apps/browser/src/components/googleAnalytics.tsx b/apps/browser/src/components/googleAnalytics.tsx
@@ -0,0 +1,22 @@
+interface Window {
+    gtag: any;
+  }
+  declare var window: Window;
+
+  export const trackMessageSent = (message: string) => {
+    try {
+      if (window.gtag) { // Check if gtag is initialized
+        window.gtag('event', 'message_sent', {
+          'event_category': 'Chat',
+          'event_label': 'GOALS',
+          'value': message // The actual message content
+        });
+        console.log('GA event sent');
+      } else {
+        console.log('GA not initialized');
+      }
+    } catch (error) {
+      console.log('Error sending GA event:', error);
+    }
+  };
+