diff --git a/frontend/pages/index.js b/frontend/pages/index.js index ba3c0f76..9b73461d 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -937,6 +937,15 @@ const Homepage = () => { variant="outline" colorScheme="blue" w="250px" + onClick={() => { + if (mixpanel.get_distinct_id()) { + mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { + full_url: router.nextRouter.asPath, + buttonName: `Check out our GitHub repository and join our community on + Discord > git clone moonstream`, + }); + } + }} leftIcon={} > git clone moonstream @@ -949,6 +958,15 @@ const Homepage = () => { colorScheme="blue" leftIcon={} w="250px" + onClick={() => { + if (mixpanel.get_distinct_id()) { + mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { + full_url: router.nextRouter.asPath, + buttonName: `Check out our GitHub repository and join our community on + Discord > Join our Discord`, + }); + } + }} > Join our Discord @@ -958,7 +976,16 @@ const Homepage = () => { placeSelf="center" w={["100%", "100%", "fit-content", null]} maxW={["250px", null, "fit-content"]} - onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })} + onClick={() => { + if (mixpanel.get_distinct_id()) { + mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { + full_url: router.nextRouter.asPath, + buttonName: `Check out our GitHub repository and join our community on + Discord > sign up`, + }); + } + toggleModal({ type: MODAL_TYPES.SIGNUP }); + }} size="lg" variant="solid" colorScheme="orange" diff --git a/frontend/src/components/SplitWithImage.js b/frontend/src/components/SplitWithImage.js index 2328a53d..64392044 100644 --- a/frontend/src/components/SplitWithImage.js +++ b/frontend/src/components/SplitWithImage.js @@ -17,6 +17,9 @@ import React, { useContext } from "react"; import UIContext from "../core/providers/UIProvider/context"; import { FaDiscord, FaGithubSquare } from "react-icons/fa"; import RouteButton from "../components/RouteButton"; +import mixpanel from "mixpanel-browser"; +import MIXPANEL_EVENTS from "../core/providers/AnalyticsProvider/constants"; +import { useRouter } from "../core/hooks"; const Feature = ({ text, icon, iconBg, bullets }) => { return ( @@ -72,6 +75,8 @@ const SplitWithImage = ({ imgBoxShadow, py, }) => { + const router = useRouter(); + var buttonSize = useBreakpointValue({ base: { single: "sm", double: "xs" }, sm: { single: "md", double: "sm" }, @@ -186,6 +191,14 @@ const SplitWithImage = ({ w={["100%", "100%", "fit-content", null]} maxW={["250px", null, "fit-content"]} href={socialButton.url} + onClick={() => { + if (mixpanel.get_distinct_id()) { + mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { + full_url: router.nextRouter.asPath, + buttonName: `splitWithImage > ${badge} > ${socialButton.title}`, + }); + } + }} mt={[0, 0, null, 16]} size={socialButton ? buttonSize.double : buttonSize.single} variant="outline"