feat: add mixpanel events

ristekoss · Nov 26, 2023 · df7f6b1 · df7f6b1
1 parent 6c1e8ee
commit df7f6b1
Show file tree

Hide file tree

Showing 19 changed files with 239 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "framer-motion": "^4",
     "html-to-image": "^1.9.0",
     "ics": "^2.31.0",
+    "mixpanel-browser": "^2.48.1",
     "query-string": "^6.8.1",
     "react": "^16.8.6",
     "react-burger-menu": "^2.6.10",

diff --git a/src/config.js b/src/config.js
@@ -4,19 +4,20 @@ const config = {
     SSO_UI_URL: "https://sso.ui.ac.id/cas2",
     AIRTABLE_BASE_ID: process.env.REACT_APP_BETA_AIRTABLE_BASE_ID,
     AIRTABLE_API_KEY: process.env.REACT_APP_BETA_AIRTABLE_API_KEY,
-    AIRTABLE_TABLE_NAME: process.env.REACT_APP_BETA_AIRTABLE_TABLE_NAME
+    AIRTABLE_TABLE_NAME: process.env.REACT_APP_BETA_AIRTABLE_TABLE_NAME,
+    MIXPANEL_PROJECT_TOKEN: process.env.REACT_APP_MIXPANEL_PROJECT_TOKEN,
   },
   production: {
     API_BASE_URL: process.env.REACT_APP_AWS_BACKEND_URL,
-    BASE_URL: "/"
+    BASE_URL: "/",
   },
   development: {
     API_BASE_URL: "http://localhost:5000/susunjadwal/api",
-    BASE_URL: "/"
-  }
+    BASE_URL: "/",
+  },
 };
 
 export default {
   ...config.base,
-  ...config[process.env.NODE_ENV || "development"]
+  ...config[process.env.NODE_ENV || "development"],
 };
diff --git a/src/containers/BuildSchedule/CourseClass.js b/src/containers/BuildSchedule/CourseClass.js
@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import { useMixpanel } from "hooks/useMixpanel";
 import { useSelector, useDispatch } from "react-redux";
 import { addSchedule, removeSchedule } from "redux/modules/schedules";
 import { useColorModeValue } from "@chakra-ui/react";
@@ -99,6 +100,7 @@ function CourseClass({ course, courseClass }) {
       dispatch(removeSchedule(item));
     } else {
       dispatch(addSchedule(item));
+      useMixpanel.track("select_course");
     }
   };
 

diff --git a/src/containers/BuildSchedule/SelectMajor.js b/src/containers/BuildSchedule/SelectMajor.js
@@ -1,8 +1,10 @@
 import React from "react";
+import { useMixpanel } from "hooks/useMixpanel";
 import { Flex } from "@chakra-ui/react";
 import FACULTIES from "utils/faculty-base-additional-info.json";
 import { useForm } from "react-hook-form";
 import { CustomSelect } from "components/CustomSelect";
+import { useEffect } from "react";
 
 function SelectMajor({ theme, isMobile, setMajorSelected, show }) {
   const { register, watch } = useForm();
@@ -26,6 +28,14 @@ function SelectMajor({ theme, isMobile, setMajorSelected, show }) {
     setMajorSelected(selectedMajor[0]);
   }
 
+  useEffect(() => {
+    if (selectedFaculty) useMixpanel.track("select_faculty");
+  }, [selectedFaculty]);
+
+  useEffect(() => {
+    if (selectedMajorName) useMixpanel.track("select_prodi");
+  }, [selectedMajorName]);
+
   return (
     <Flex
       flexDir={{ base: "column", lg: "row" }}

diff --git a/src/containers/BuildSchedule/index.js b/src/containers/BuildSchedule/index.js
@@ -1,5 +1,6 @@
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useEffect, useState, useCallback, useRef } from "react";
 import { useSelector, useDispatch } from "react-redux";
+import { useMixpanel } from "hooks/useMixpanel";
 import {
   Button,
   useColorModeValue,
@@ -47,6 +48,7 @@ function BuildSchedule() {
   const [showSelectMajor, setShowSelectMajor] = useState(false);
 
   const theme = useColorModeValue("light", "dark");
+  const isInitialMount = useRef(true);
 
   const fetchCourses = useCallback(
     async (majorId, majorSelected) => {
@@ -95,6 +97,15 @@ function BuildSchedule() {
     }
   });
 
+  useEffect(() => {
+    useMixpanel.track("open_buat_jadwal");
+  }, []);
+
+  useEffect(() => {
+    if (isInitialMount.current) isInitialMount.current = false;
+    else useMixpanel.track("search_course");
+  }, [value]);
+
   return (
     <Container>
       <BauhausSide />

diff --git a/src/containers/Contributors/index.js b/src/containers/Contributors/index.js
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
+import { useMixpanel } from "hooks/useMixpanel";
 import { Text, Box, Button, Flex, useColorModeValue } from "@chakra-ui/react";
 import { ChevronLeftIcon } from "@chakra-ui/icons";
 import { Link } from "react-router-dom";
@@ -34,6 +35,10 @@ const Contributors = () => {
     fetchContributors();
   }, [fetchContributors]);
 
+  useEffect(() => {
+    useMixpanel.track("open_contributors");
+  }, []);
+
   const MergeContributors = (contributors, otherContributors) => {
     if (contributors && otherContributors) {
       // if contributors from repoA and repoB fetched
@@ -85,6 +90,7 @@ const Contributors = () => {
       avatar={user.avatar_url}
       github={user.html_url}
       contributions={user.contributions}
+      onClick={() => useMixpanel.track("see_contributor_detail")}
     />
   ));
 
@@ -131,6 +137,7 @@ const Contributors = () => {
         <a
           href="https://ristek.link/oss-discord"
           rel="noopener noreferrer"
+          onClick={() => useMixpanel.track("gabung_discord")}
           target="_blank"
         >
           <Button

diff --git a/src/containers/Header/index.js b/src/containers/Header/index.js
@@ -1,5 +1,6 @@
 import { Link, useLocation } from "react-router-dom";
 import { useSelector } from "react-redux";
+import { useMixpanel } from "hooks/useMixpanel";
 import React from "react";
 
 import {
@@ -87,7 +88,11 @@ function Header() {
             <label class="switch">
               <input
                 type="checkbox"
-                onClick={toggleColorMode}
+                onClick={() => {
+                  toggleColorMode();
+                  if (theme === "light") useMixpanel.track("dark_mode");
+                  else useMixpanel.track("light_mode");
+                }}
                 checked={theme === "light" ? false : true}
               />
               <span class="slider">

diff --git a/src/containers/Login/index.js b/src/containers/Login/index.js
@@ -1,5 +1,6 @@
 import { useSelector, useDispatch } from "react-redux";
 import { Fade, Button, Box, useColorModeValue } from "@chakra-ui/react";
+import { useMixpanel } from "hooks/useMixpanel";
 import React, { useEffect, useState, useMemo, useRef } from "react";
 import { Link } from "react-router-dom";
 import { parse } from "query-string";
@@ -398,13 +399,17 @@ function Login({ history, location }) {
             href="https://ristek.link/oss-discord"
             rel="noopener noreferrer"
             target="_blank"
+            onClick={() => useMixpanel.track("gabung_discord")}
           >
             <DiscordButton _hover={{ background: "primary.Purple" }}>
               Join Discord
             </DiscordButton>
           </a>
           <div style={{ minWidth: "16px", minHeight: "16px" }}></div>
-          <Link to="/kontributor">
+          <Link
+            to="/kontributor"
+            onClick={() => useMixpanel.track("see_contributor_detail")}
+          >
             <DiscordButton variant="outline">Lihat Kontributor</DiscordButton>
           </Link>
         </LinkBox>

diff --git a/src/containers/ScheduleList/ScheduleDetail.js b/src/containers/ScheduleList/ScheduleDetail.js
@@ -1,4 +1,5 @@
 import React, { useRef } from "react";
+import { useMixpanel } from "hooks/useMixpanel";
 import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
 import styled from "styled-components";
@@ -65,7 +66,10 @@ const ScheduleDetail = ({
 
   return (
     <>
-      <Link to={`/jadwal/${schedule.id}`}>
+      <Link
+        onClick={() => useMixpanel.track("open_jadwal")}
+        to={`/jadwal/${schedule.id}`}
+      >
         <Card key={`${schedule.name}-${idx}`} mode={theme}>
           <div className="headerInfo">
             <div>

diff --git a/src/containers/ScheduleList/SortByTermButton.js b/src/containers/ScheduleList/SortByTermButton.js
@@ -1,13 +1,22 @@
 import React from "react";
+import { useMixpanel } from "hooks/useMixpanel";
 import { useSelector } from "react-redux";
-import { Menu, MenuButton, MenuItemOption, MenuList, MenuOptionGroup, IconButton, useColorModeValue } from "@chakra-ui/react";
+import {
+  Menu,
+  MenuButton,
+  MenuItemOption,
+  MenuList,
+  MenuOptionGroup,
+  IconButton,
+  useColorModeValue,
+} from "@chakra-ui/react";
 import { SortAscendingIcon, SortDescendingIcon } from "@heroicons/react/solid";
 
 const sortIconProps = {
   color: "white",
   width: "2rem",
   height: "2rem",
-}
+};
 
 const SortByTermButton = ({ isSortByLatest, setSortByLatest }) => {
   const theme = useColorModeValue("light", "dark");
@@ -17,15 +26,19 @@ const SortByTermButton = ({ isSortByLatest, setSortByLatest }) => {
     <Menu>
       <MenuButton
         as={IconButton}
-        aria-label='Options'
-        icon={isSortByLatest ? <SortDescendingIcon {...sortIconProps} /> : <SortAscendingIcon {...sortIconProps} />}
-        variant='outline'
+        aria-label="Options"
+        icon={
+          isSortByLatest ? (
+            <SortDescendingIcon {...sortIconProps} />
+          ) : (
+            <SortAscendingIcon {...sortIconProps} />
+          )
+        }
+        variant="outline"
         h={isMobile ? "44px" : "57px"}
         w={isMobile ? "44px" : "57px"}
         ml={isMobile ? "0.75rem" : "1rem"}
-        bg={
-          theme === "light" ? "primary.Purple" : "primary.LightPurple"
-        }
+        bg={theme === "light" ? "primary.Purple" : "primary.LightPurple"}
         _hover={{
           bg: theme === "light" ? "primary.Purple" : "primary.LightPurple",
         }}
@@ -37,15 +50,36 @@ const SortByTermButton = ({ isSortByLatest, setSortByLatest }) => {
         display="flex"
         justifyContent="center"
         alignItems="center"
+        onClick={() => useMixpanel.track("sort_daftar_jadwal")}
       />
       <MenuList>
-        <MenuOptionGroup defaultValue='desc' title='Urut Berdasarkan' type='radio'>
-          <MenuItemOption onClick={() => setSortByLatest(true)} value='desc'>Semester Terbaru</MenuItemOption>
-          <MenuItemOption onClick={() => setSortByLatest(false)} value='asc'>Semester Terlama</MenuItemOption>
+        <MenuOptionGroup
+          defaultValue="desc"
+          title="Urut Berdasarkan"
+          type="radio"
+        >
+          <MenuItemOption
+            onClick={() => {
+              setSortByLatest(true);
+              useMixpanel.track("sort_semester_terbaru");
+            }}
+            value="desc"
+          >
+            Semester Terbaru
+          </MenuItemOption>
+          <MenuItemOption
+            onClick={() => {
+              setSortByLatest(false);
+              useMixpanel.track("sort_semester_terlama");
+            }}
+            value="asc"
+          >
+            Semester Terlama
+          </MenuItemOption>
         </MenuOptionGroup>
       </MenuList>
     </Menu>
-  )
-}
+  );
+};
 
-export default SortByTermButton
+export default SortByTermButton;
diff --git a/src/containers/ScheduleList/index.js b/src/containers/ScheduleList/index.js
@@ -1,5 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import ReactGA from "react-ga";
+import { useMixpanel } from "hooks/useMixpanel";
 import { useHistory } from "react-router";
 import {
   Button,
@@ -72,6 +73,7 @@ const ScheduleList = () => {
   const [isSortByLatest, setSortByLatest] = useState(true);
 
   const [imageURL, setImageURL] = useState("");
+  const isInitialMount = useRef(true);
 
   useEffect(() => {
     const fetchSchedules = async () => {
@@ -114,6 +116,15 @@ const ScheduleList = () => {
     }
   }, [filteredSchedules, isSortByLatest]);
 
+  useEffect(() => {
+    useMixpanel.track("open_daftar_jadwal");
+  }, []);
+
+  useEffect(() => {
+    if (isInitialMount.current) isInitialMount.current = false;
+    else useMixpanel.track("search_daftar_jadwal");
+  }, [query]);
+
   const performDeleteSchedule = async (userId, scheduleId) => {
     ReactGA.event({
       category: "Hapus Jadwal",
@@ -309,9 +320,10 @@ const ScheduleList = () => {
                 bg={
                   theme === "light" ? "primary.Purple" : "primary.LightPurple"
                 }
-                onMouseDown={() =>
-                  setQuery(document.getElementById("input").value)
-                }
+                onMouseDown={() => {
+                  setQuery(document.getElementById("input").value);
+                  useMixpanel.track("search_daftar_jadwal");
+                }}
                 fontSize={isMobile && "14px"}
                 px={isMobile && "4px"}
                 display={isMobile && "none"}

diff --git a/src/containers/SelectedCourses/index.js b/src/containers/SelectedCourses/index.js
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactGA from "react-ga";
 import styled from "styled-components";
+import { useMixpanel } from "hooks/useMixpanel";
 import { withRouter } from "react-router";
 
 import { useSelector, useDispatch } from "react-redux";
@@ -151,7 +152,10 @@ function SelectedCourses({ history, scheduleId, isEditing }) {
 
           <ModalFooter>
             <Button
-              onClick={onClose}
+              onClick={() => {
+                onClose();
+                useMixpanel.track("cancel");
+              }}
               variant="outline"
               borderColor={
                 theme === "light" ? "primary.Purple" : "dark.LightPurple"
@@ -161,13 +165,15 @@ function SelectedCourses({ history, scheduleId, isEditing }) {
               Batal
             </Button>
             <Button
-              onClick={() =>
+              onClick={() => {
                 !isEditing
                   ? saveSchedule()
                   : schedules.length === 0
                   ? handleDeleteSchedule()
-                  : updateSchedule()
-              }
+                  : updateSchedule();
+
+                useMixpanel.track("simpan_jadwal");
+              }}
               variant="solid"
               bg={theme === "light" ? "primary.Purple" : "dark.LightPurple"}
               color={theme === "light" ? "white" : "dark.White"}
@@ -225,7 +231,10 @@ function SelectedCourses({ history, scheduleId, isEditing }) {
         )}
 
         <Button
-          onClick={onOpen}
+          onClick={() => {
+            useMixpanel.track("open_simpan_modal");
+            onOpen();
+          }}
           disabled={isConflict || totalCredits > 24 || schedules.length === 0}
           intent={schedules.length === 0 && isEditing && "danger"}
         >