feat: ✨ Umami Analytics added

components/Login.js

@@ -168,7 +168,9 @@ const Login = () => {
             onChange={handleChange}
             className="penguin"
           />
-          <button type="submit">Login</button>
+          <button type="submit" className="umami--click--login">
+            Login
+          </button>
         </fieldset>
       </FormStyles>
     </div>

package-lock.json

@@ -34,7 +34,7 @@
         "react-icons": "^4.4.0",
         "sharp": "^0.30.7",
         "styled-components": "^5.3.5",
-        "swr": "^1.0.1",
+        "swr": "^1.3.0",
         "waait": "^1.0.5"
       },
       "devDependencies": {
@@ -11558,9 +11558,9 @@
       }
     },
     "node_modules/swr": {
-      "version": "1.2.2",
+      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/swr/-/swr-1.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
-      "integrity": "sha512-ky0BskS/V47GpW8d6RU7CPsr6J8cr7mQD6+do5eky3bM0IyJaoi3vO8UhvrzJaObuTlGhPl2szodeB2dUd76Xw==",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
       "peerDependencies": {
         "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
       }
@@ -20774,9 +20774,9 @@
       "dev": true
     },
     "swr": {
-      "version": "1.2.2",
+      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/swr/-/swr-1.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
-      "integrity": "sha512-ky0BskS/V47GpW8d6RU7CPsr6J8cr7mQD6+do5eky3bM0IyJaoi3vO8UhvrzJaObuTlGhPl2szodeB2dUd76Xw==",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
       "requires": {}
     },
     "symbol-tree": {

package.json

@@ -36,7 +36,7 @@
     "react-icons": "^4.4.0",
     "sharp": "^0.30.7",
     "styled-components": "^5.3.5",
-    "swr": "^1.0.1",
+    "swr": "^1.3.0",
     "waait": "^1.0.5"
   },
   "devDependencies": {

pages/_app.js

@@ -65,6 +65,13 @@ function MyApp({ Component, pageProps }) {
             as="font"
             crossOrigin=""
           />
+          <script
+            async
+            defer
+            data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
+            src={process.env.NEXT_PUBLIC_UMAMI_URL}
+            data-do-not-track="true"
+          />
           <noscript>
             <link rel="stylesheet" href="assets/css/noscript.css" />
           </noscript>

pages/rsvp/[id].js

@@ -12,6 +12,7 @@ import Guest from '../../models/Guest';
 import connectDb from '../../utils/db';
 import { CalendarIcon, MapIcon } from '../../lib/svgs';
 import Modal from '../../components/Modal';
+import { handleUmamiEvent } from '../../utils/handleUmamiEvent';
 
 const RSVPGroupStyles = styled.div`
   h2 {
@@ -211,6 +212,7 @@ export default function SingleGroupPage({ group }) {
       console.log('res.message', res.message);
 
       if (res.message === 'SUCCESS') {
+        handleUmamiEvent('RSVP SUCCESS', 'success-rsvp');
         setMessage(
           `Successfully submitted your RSVP${
             body.guests.length > 1 ? 's' : ''
@@ -218,6 +220,7 @@ export default function SingleGroupPage({ group }) {
         );
         openModal();
       } else {
+        handleUmamiEvent('RSVP FAILURE', 'failure-rsvp');
         setErrorCount(errorCount + 1);
         setErrorMsg('Unable to RSVP Your Group');
       }

pages/rsvp/index.js

@@ -7,6 +7,7 @@ import Form from '../../components/styles/Form';
 import fetchJson from '../../lib/fetchJson';
 import useForm from '../../lib/useForm';
 import useUser from '../../lib/useUser';
+import { handleUmamiEvent } from '../../utils/handleUmamiEvent';
 
 const RSVPStyles = styled.div`
   display: grid;
@@ -51,17 +52,19 @@ export default function RsvpPage() {
       });
 
       if (res.status === 'SUCCESS') {
+        handleUmamiEvent('Fetch RSVP SUCCESS', 'success-fetch-rsvp');
         router.push({
           pathname: `/rsvp/${res.groupId}`,
         });
       } else {
+        handleUmamiEvent('Fetch RSVP FAILURE', 'failure-fetch-rsvp');
         setErrorCount(errorCount + 1);
         setErrorMsg('Unable to RSVP');
       }
     } catch (error) {
       // console.error('An unexpected error happened:', error);
       setErrorCount(errorCount + 1);
-      setErrorMsg('Unable to RSVP');
+      setErrorMsg('Unable to find your RSVP');
     }
   }
 
@@ -115,7 +118,9 @@ export default function RsvpPage() {
               onChange={handleChange}
             />
           </label>
-          <button type="submit">Click to RSVP</button>
+          <button type="submit" className="umami--click--find-rsvp">
+            Find Your RSVP
+          </button>
         </fieldset>
       </Form>
     </RSVPStyles>

utils/handleUmamiEvent.js

@@ -0,0 +1,7 @@
+async function handleUmamiEvent(eventValue, eventType) {
+  if (typeof window !== 'undefined') {
+    window?.umami?.trackEvent(eventValue, eventType);
+  }
+}
+
+export { handleUmamiEvent };