diff --git a/package.json b/package.json index f63de6c..eff20b2 100644 --- 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 index ff5dbf4..20af88e 100644 --- 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 index bec6c62..cb5b472 100644 --- 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 index a26718f..d8cd2ad 100644 --- 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 ( { @@ -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 ( diff --git a/src/containers/Contributors/index.js b/src/containers/Contributors/index.js index ad47138..4d9e89e 100644 --- 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 = () => { useMixpanel.track("gabung_discord")} target="_blank" > diff --git a/src/containers/ViewSchedule/Schedule.js b/src/containers/ViewSchedule/Schedule.js index e54a85f..1cfa2e7 100644 --- a/src/containers/ViewSchedule/Schedule.js +++ b/src/containers/ViewSchedule/Schedule.js @@ -5,6 +5,7 @@ import { useSelector } from "react-redux"; import { useColorModeValue } from "@chakra-ui/react"; import { useDisclosure } from "@chakra-ui/react"; import DetailsModal from "./DetailsModal"; +import { useMixpanel } from "hooks/useMixpanel"; const DAYS = ["Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"]; const pad = (val) => { @@ -62,10 +63,16 @@ function Schedule({ ); const handleClickedCourse = (course) => { + useMixpanel.track("open_course_detail"); setSelectedCourse(course); onOpen(); }; + const handleCloseModal = () => { + useMixpanel.track("close_course_detail"); + onClose(); + }; + const pageOne = useRef(null); const pageTwo = useRef(null); @@ -87,7 +94,7 @@ function Schedule({ > { const dataUrl = await htmlToImage.toPng(refs.current); setImageURL(dataUrl); shareModal.onOpen(); + useMixpanel.track("open_share_jadwal"); }; const copyImage = () => { copyImageToClipboard(imageURL) .then(() => showAlertCopy("Gambar")) .catch((e) => showErrorCopy()); + + useMixpanel.track("share_copy_image"); }; return ( @@ -175,7 +181,10 @@ function ViewSchedule({ match, history }) { Batal